Simplifying the Fresh Bread Ordering Experience
Gandom Bakery Mobile Application
Designed by Kathy Kamangar
PROJECT OVERVIEW
Imagine driving down a bustling Main Street, eager to visit a popular Persian bakery. After finally securing a parking spot, you encounter a lengthy line outside the bakery. Despite patiently waiting, you reach the front only to find your favorite Sangak and Taufton breads sold out. Frustrated, you ponder if there's a more efficient way to enjoy these sought-after delicacies.
The Problem
Gandom bakery, famous for its Persian Sangak and Taufton breads, faces challenges due to limited parking on a busy street. High demand results in long lines and crowded parking, causing frustration for customers, especially those traveling from afar.
The Goals
The Goals were defined to guide the design process and address key user and business needs:
- Resolves limited and uncertain availability
- Expands ordering hours
- Overcomes planning challenges
- Streamlines ordering processes
- Incorporates helpful reminders
- Offers diverse payment options
The Solution
We propose creating a user-friendly mobile app for easy pre-ordering of Sangak and Taufton breads. Customers can place orders and pay in advance, ensuring their breads are ready upon arrival. This improves the customer experience, optimizes inventory management, predicts demand, and fosters growth for the small bakery. A win-win solution for both customers and the business.
The Product
Mobile Application
Role
UX/UI Designer
Responsibilities
User Research
Wireframe
UI Designing
Design System
Prototyping
Usability Testing
Deliverables
Wireframes
Design System
Mockups
Prototypes
Tools
Figma
Adobe Photoshop
Adobe Illustrator
Adobe Photoshop
Adobe Illustrator
Google Meet
Team
Maliheh Gh.
Kathy K.
Duration
12 weeks
The Design Framework
Gandom mobile application is designed based on the Design Thinking Framework which follows these five main steps:
- Empathize
- Define
- Ideate
- Prototype
- Test
EMPATHIZE
In the initial phase, we conducted user interviews to gain insights and created personas and user journey maps, enabling us to deeply understand our users' goals and pain points.
User Interview
We gathered insights from six interviews, using a mix of online and in-person formats to connect with a diverse audience. This approach provided valuable perspectives, preferences, and pain points, shaping a user-centered experience tailored to their needs.
Persona
After insightful interviews, we developed personas like Tara, offering valuable insights into our diverse user needs and motivations.
Now, it's time to pinpoint the challenges Tara faces to craft targeted solutions that enhance her overall journey.
User Journey Map
To improve the order process at Gandom bakery, we crafted a concise User Journey Map, outlining users' phases, feelings, thoughts, actions, and opportunities at each stage.
Competitors
In our analysis of the bakery industry, we found competitors with similar products, but what distinguishes us is the absence of a mobile app for online ordering among them. Additionally, their websites lack appealing design and smooth functionality.
We noticed a gap in the market and plan to help our bakery client stand out by creating an easy-to-use mobile app for online orders. This will make ordering convenient for customers and give our client a competitive edge.
Storyboarding
We employed storyboarding to visualize challenges in the current ordering process, revealing customer frustrations. This guided our design decisions for a more intuitive and user-friendly experience by identifying areas for enhancement and innovation.
DEFINE
5W & 1H
We employed the 5W's and 1H technique to thoroughly analyze and understand Tara's needs, gather essential information, and uncover critical insights for our UX design process.
Impact-Effort Diagram
After using the 5W & 1H technique for insights, we created an Impact-Effort diagram to prioritize features. This helped us make informed decisions on the most feasible and impactful elements for our UX design.
IDEATE
Crazy 8th
To quickly generate ideas, we used the 'Crazy 8th' exercise, followed by a voting system with green stars to filter and identify the most promising concepts with input from the team.
PROTOTYPE
User Flow
To ensure a user-centric approach, we designed the User Flow based on the Tara's actions and decisions. This flow is designed for the ordering process through receiving confirmation from the App.
Sitemap
After designing the User Flow, we created a simplified sitemap for the mobile application, visually outlining its structure with Tara's needs in mind. This sitemap outlines the main sections such as the home screen, ordering screens, account, history, and order status.
Wireframe
After finalizing the Sitemap, we moved forward with the creation of wireframes to provide a visual representation of the app's structure, layout, and functionality, with a primary focus on addressing Tara's pain points:
1- Limited and Uncertain Availability
2- Limited Ordering Hours
3- Planning Challenges
4- Ordering Convenience
5- Lack of Reminders
6- Payment Options
Mid-Fi Prototype
To gather design feedback from actual users, we connected the pages together and created the Mid-fidelity prototype.
Try the wireframe now →
Problem
Today is Thursday, March 2nd, 2023. Tara is going to use the Gandom Bakery mobile application for ordering some breads to pick up the same day when she comes back home.
Here is her order specification:
• 5 Fresh cut Sangak breads with Sesame
• 2 Frozen Sangak breads
• 2 cut Taufton breads
• Pickup date: Today
• Pickup time: 5:30 PM
• Payment order: Credit Card
• Reminder: 30 minute before the order is ready
Solution
Gandom Bakery mobile application makes users order their favorite bread, choose the date and time of pickup, pay online, set the reminder and save the order for the future.
TEST
Usability Test (on Mid-Fi Prototype)
After creating the mid-fi prototype, we conducted a usability test to figure out how easy users can complete the order process.
Participants:
- 3 Females
- 1 Male
Location:
- The United States (3 users - In person)
- The United States (1 user - Remote)
Study type:
Conversion rate
Length:
Each session lasted 10 to 15 minutes
Findings
Strengths Found:
- The ordering process appeared straightforward to the users.
- The users enjoyed the interactions.
- The "Thank You" note received positive feedback from the users.
- The "Save for Future" feature was appreciated by users for the time-saving benefit.
- The users liked the clean and clear user interfaces.
- The users enjoyed the interactions.
- The "Thank You" note received positive feedback from the users.
- The "Save for Future" feature was appreciated by users for the time-saving benefit.
- The users liked the clean and clear user interfaces.
Areas for Improvement:
- Some users would like to see the time picker on the top of the screen (next to the date picker).
- The status notification did not seek enough attention.
- The 15-minute reminder appeared too close to the pick-up time.
User Recommendations:
- Make a separate card for frozen items
Refinement
We revised the prototype based on the findings from the usability test to make sure the app provides users' needs. These revision include:
- Moved the time picker to the top of the screen
- Moved the notification icon to the bottom menu and placed an indicator to show the number of the orders
- Changed the 15 minute reminder to 30 minute
- Changed the 15 minute reminder to 30 minute
User Interface Design
In designing the User Interface for the Gandom Bakery mobile app, we used a warm color palette and a modern typeface for a user-friendly and aesthetically pleasing experience that captures the bakery's essence.
Design System
We developed a comprehensive Design System, including elements like Grid System, Color Palette, Typography, Icons, Buttons, Text Fields, Cards, and Elevations. Adhering to these guidelines ensured a cohesive and visually pleasing user interface.
Mockups
Mockups were key in bringing the Gandom Bakery Mobile App design to life, bridging the gap between concept and reality to explore appearance, interactions, and functionality.
Main Flow:
Additional Screens:
High-Fidelity Prototype
The High Fidelity Prototype is essential in turning design concepts into an interactive experience. It's a crucial tool for usability tests, providing valuable insights to enhance user-friendliness based on stakeholder feedback and our target audience's specific needs.
Problem
Today is Thursday, March 2nd, 2023. Tara is going to use the Gandom Bakery mobile application for ordering some breads to pick up the same day when she comes back home.
Here is her order specification:
• 3 Fresh Sangak breads with Sesame
• 1 Frozen Sangak bread
• 1 Taufton bread
• Pickup date: Today
• Pickup time: 5:30 PM
• Payment order: Credit Card
• Reminder: 60 minute before the order is ready
Try the Hi-Fi Prototype now →
Usability Test (on Hi-Fi Prototype)
After creating the hi-fi prototype, we conducted a usability test with 5 users to ensure that our design meets user expectations and functions seamlessly.
Findings
Strengths Found:
- All users successfully completed the process.
- All users praised the colors, tone, and clean design.
- All users thoroughly enjoyed interacting with the prototype.
Area for Improvement:
- The stepper's ability to convey the current step was criticized by some users.
User Recommendations:
- Add a title above the serving suggestion section on the Description screen.
- Enlarge the product stock indicator.
- Use more evident image/icon for the frozen products.
- Fade out image of out-of-stock products.
Refinement
To ensure that the app meets users' requirements, we have implemented the following refinements (including users' suggestions):
- Improved the Stepper visual to ensure communicate with users effectively
- Added the Serving Suggestions title on the Description screen
- Enlarged the product stock indicator
- Redesigned the image section of the frozen products to be more evident
- Faded out the image of out-of-stock products
Final Product
The Final Product, refined with user feedback, is an app that seamlessly meets user requirements and significantly benefits the Bakery business. Our user-centric approach enhances satisfaction, drives increased engagement, and benefits stakeholders immensely.
Try the prototype here ↓
TAKEAWAY
Expected Impact in 6 months
The Gandom Bakery mobile application not only attained remarkable 100% user satisfaction in usability testing but also delivered distinct benefits by addressing user pain points. Based on user needs and business objectives, the following outcomes are anticipated within 6 months of launching and promoting the product:
Challenges
We encountered three significant challenges during this project.
What I learned
During the design process of the Gandom Bakery Application, I gained insights into user expectations when placing orders. Applying design thinking principles, I empathized with end-users, identified problems, and devised user-friendly solutions. This experience emphasized the importance of placing users at the center of design—a valuable lesson for my future projects.
Thanks for watching!
Kathy Kamangar
