Grocery Delivery App
Grocery Delivery App
Grocery delivery app that's convenient and simple, for busy residents of Ulaanbaatar, Mongolia saving 1-2 hours everyday.
Grocery delivery app that's convenient and simple, for busy residents of Ulaanbaatar, Mongolia saving 1-2 hours everyday.
My role
Product Designer
Branding / Color Palette
Timeline
Feb-Apr, 2023
(2 months)
Industry/Org
Client work
in Mongolia
Overview
Mobile app from scratch, focusing on the needs of Ulaanbaatar's busy residents who spend up to 5 hours weekly on grocery shopping due to traffic, and the 107,000 residents with disabilities who struggle with accessibility. I led the design process, including user research, crafting the design system, branding guide, wireframing, and ultimately creating a high-fidelity prototype.
Research
UX Design
User Flow
Wireframe
Style Guide & Ui Element
1
2
3
4
5
Design Process
Overview
Mobile app from scratch, focusing on the needs of Ulaanbaatar's busy residents who spend up to 5 hours weekly on grocery shopping due to traffic, and the 107,000 residents with disabilities who struggle with accessibility. I led the design process, including user research, crafting the design system, branding guide, wireframing, and ultimately creating a high-fidelity prototype.
Ulaanbaatar residents spend an average of 2.5 hours daily in traffic, making grocery shopping time-consuming, especially in harsh winters, while existing grocery delivery services cover only a 1-mile radius and 3.5% of the population faces difficulties accessing groceries due to limited disability-friendly infrastructure.
Ulaanbaatar residents spend an average of 2.5 hours daily in traffic, making grocery shopping time-consuming, especially in harsh winters, while existing grocery delivery services cover only a 1-mile radius and 3.5% of the population faces difficulties accessing groceries due to limited disability-friendly infrastructure.
Challenge
Challenge
Challenge
Problem Statement
Problem Statement
Saruul is a resident of Ulaanbaatar with a mobility impairment who needs an accessible grocery delivery service because the city’s poor infrastructure and limited disability-friendly facilities make it difficult for her to shop for essential items independently.
Saruul is a resident of Ulaanbaatar with a mobility impairment who needs an accessible grocery delivery service because the city’s poor infrastructure and limited disability-friendly facilities make it difficult for her to shop for essential items independently.
Solution
Solution
Developed a mobile app with an intuitive interface prioritizing easy navigation for time-conscious users and those with special needs, extended delivery coverage beyond 3 miles through partnerships with grocery stores across Ulaanbaatar, and optimized delivery routes, cutting peak-hour delivery times by 30%.
Developed a mobile app with an intuitive interface prioritizing easy navigation for time-conscious users and those with special needs, extended delivery coverage beyond 3 miles through partnerships with grocery stores across Ulaanbaatar, and optimized delivery routes, cutting peak-hour delivery times by 30%.
User Persona
User Persona
I focused on two main groups of users: active working group who are too busy for grocery shopping and people with disability who need special assistance.
I focused on two main groups of users: active working group who are too busy for grocery shopping and people with disability who need special assistance.
User Flow
User Flow
In order to design the best experience, I’ve look at the possible paths the user might take during their journey and examine what happens during each step. I usually create a map in Figma to get a detailed view of the User Flow.
In order to design the best experience, I’ve look at the possible paths the user might take during their journey and examine what happens during each step. I usually create a map in Figma to get a detailed view of the User Flow.
Paper Sketches and Ideation
Paper Sketches
and Ideation
I started by sketching out key screens on paper to quickly explore various layout ideas. Multiple iterations helped refine the design before moving to digital wireframes.
I started by sketching out key screens on paper to quickly explore various layout ideas. Multiple iterations helped refine the design before moving to digital wireframes.
Wireframes and Usability Testing
Wireframes and
Usability Testing
I developed wireframes based on UX research, focusing on clear navigation and efficient layouts. Usability tests were conducted with target users to identify pain points and improve interactions. This iterative process allowed us to validate the design and make adjustments to better meet user needs.
I developed wireframes based on UX research, focusing on clear navigation and efficient layouts. Usability tests were conducted with target users to identify pain points and improve interactions. This iterative process allowed us to validate the design and make adjustments to better meet user needs.
Design System and Branding
I developed a design system with consistent UI components, typography, and color schemes to create a fresh and approachable identity. Creamy pink and fresh green were chosen to convey warmth and natural freshness, ensuring accessibility and usability while maintaining a cohesive visual style.
Design System
and Branding
I developed a design system with consistent UI components, typography, and color schemes to create a fresh and approachable identity. Creamy pink and fresh green were chosen to convey warmth and natural freshness, ensuring accessibility and usability while maintaining a cohesive visual style.
Check-out
Check-out
Users can review their cart, select delivery options, and choose a payment method. The process is secure and streamlined, allowing users to complete their purchase quickly with minimal steps.
Users can review their cart, select delivery options, and choose a payment method. The process is secure and streamlined, allowing users to complete their purchase quickly with minimal steps.
Category and My Cart Pages
Categories
Each product is presented with detailed information, and users can quickly add their selections to the cart. The "My Cart" section provides a clear summary of chosen items, allowing for easy review, editing, or proceeding to checkout.
Each product is presented with detailed information, and users can quickly add their selections to the cart. The "My Cart" section provides a clear summary of chosen items, allowing for easy review, editing, or proceeding to checkout.
Each product is presented with detailed information, and users can quickly add their selections to the cart. The "My Cart" section provides a clear summary of chosen items, allowing for easy review, editing, or proceeding to checkout.
When a user first signs up for the app, they are greeted with a Welcome Screen followed by a Walkthrough. This introduction highlights the app’s strengths, helping to build trust and familiarize users with its features.
When a user first signs up for the app, they are greeted with a Welcome Screen followed by a Walkthrough. This introduction highlights the app’s strengths, helping to build trust and familiarize users with its features.
When a user first signs up for the app, they are greeted with a Welcome Screen followed by a Walkthrough. This introduction highlights the app’s strengths, helping to build trust and familiarize users with its features.
Welcome Page
Welcome Page
High Fidelity Prototyping
High Fidelity
Prototyping
Outcomes and Results
Outcomes
I conducted usability testing with 15 participants, including busy professionals, and individuals with disabilities. Each participant completed tasks like registering, searching for groceries, placing an order, and navigating checkout. The testing aimed to identify pain points and assess the app's ease of use and accessibility.
🙋🏻♂️
Busy Professional
works in Fintech
" The app layout is clean and straightforward. I could place an order quickly, but I found the filter options for products a bit hard to locate because filtering with a brand may exclude other options. "
"The app layout is clean and straightforward. I could place an order quickly, but I found the filter options for products a bit hard to locate because filtering with a brand may exclude other options."
👩🏻🦰
Individual with disability
stays at home
" The app looks amazing! It makes my day-to-day life a lot easier for someone like me who needs special assistance for grocery shopping. I like how the buttons are large and easy to tap! It may be lot easier if the app has voice assistance too! "
"The app looks amazing! It makes my day-to-day life a lot easier for someone like me who needs special assistance for grocery shopping. I like how the buttons are large and easy to tap! It may be lot easier if the app has voice assistance too!"
💁🏻♀️
Toddler Mom
works in Education
" The app looks promising. I could find what I needed, and overall color palette gives me fresh and organic impression of the products. "
"The app looks promising. I could find what I needed, and overall color palette gives me fresh and organic impression of the products."
🚗
DELIVERY
COVERAGE
+3 Mile Radius from the user
reaching wider zones
🚗 DELIVERY COVERAGE
+3 Mile Radius from the user reaching wider zones
🚗
DELIVERY COVERAGE
+3 Mile Radius from the user reaching wider zones
⛳️
ENHANCED
ACCESSIBILITY
providing essential needs for 3.5% of city's population
⛳️ ENHANCED ACCESSIBILITY
providing essential needs for 3.5% of city's population
⛳️
ENHANCED ACCESSIBILITY
providing essential needs for 3.5% of city's population
⏳
TIME
EFFICIENCY
user saves +5 hours per week
on grocery shopping
⏳ TIME EFFICIENCY
user saves +5 hours per week on grocery shopping
⏳
TIME EFFICIENCY
user saves +5 hours per week on grocery shopping
Mighty Health: Health and Wellness App
Grocerize: Grocery Delivery App
Grocerize: Grocery Delivery App
New Feature Proposal + Design System
New Feature Proposal + Design System
New Feature Proposal + Design System
Video Production and Photoshoots
Grocerize: Grocery Delivery App
Grocerize: Grocery Delivery App
Content Creation
Content Creation
Content Creation
See more work
See more work
