My Role: UX/UI Designer
Project Duration: 2 weeks
Tools Used: Figma, Adobe Photoshop, Adobe Indesign
Responsibilities
-
Conducting interview
-
Paper and digital wireframing
-
Low and high-fidelity prototyping
-
Conducting usability studies
-
Accounting for accessibility
-
Iterating on designs
Project Overview
Introduction
Breka Bakery & Cafe is a local family bussiness famoused of German bakeries. The versatility in their baked items and 24/7 operation time make this bakery best in town as it provides wide range of products from vegetarian items to gluten-free products.
We are creating a new Breka Bakery app to let people place the order easily during the busy personal schedule. Therefore, people can skip the in-store lines and check the ingredients clearly in each product.
Problem
The traditional method of odering baked goods requires customers to physically visit the bakery, and it is time consuming. Customers need to find a way to order and receive healthy baked goods or a simple meal at their own convienience.
More consumers appear to prefer ordering from a bakery store’s own app rather than a third party.
Goals
-
To design an accessible and useful app for people who want to buy bakery goods online with delivery.
-
Let users track their order all the way from placing order to delivery to the point.
-
To provide product customization feature where it possible.
-
Create an app that can be frequently updated by the business owner, therefore, the brand is able to increase customer satisfacation and thus positively affect sales.
User Research
After deciding on the purpose of this app, I conducted interviews and did primary research. The purpose of the research is to identify common user groups, their behaviors, experiences and frustrations that can be addressed when designing the application.
Understanding the User
Step 1:
I create a list of questions on the online survery for people who use food delivery app with a tracking system on a regular basis.
Step 2:
Through designing an empathy map that detailed what the user says, thinks, does and feels, the scope of the research was narrowed.
Step 3:
The competitive audit also helped me understand how users interact with the product and let me discover the different features that I can add to my app to make it unique.
Pain Points
Financial
-
High delivery cost
Product
-
No reviews available
-
The actual product is not matching the online picture
-
No food ingredients and calories displayed
-
Can’t see the food availability
Process
-
Lack of customization options
-
Discomfort of text heavy apps
-
Can’t schedule time before checking out
-
Can’t track the order, Delivery delay
Support
-
Hard to find customer support
-
Late response
-
Complicated contact process
Persona
Leah is a doctor with busy working schedule everyday who needs o easily place the order through app and get the delivery on time, or make the payment on app and pick up the order in store, because she wants to make a daily order at any time she needs.
Leah
Age: 42
Education: Doctor of Medicine
Hometown: Newport, Rhode Island
Family: Single, lives alone
Occupation: Doctor
Leah is a doctor with a busy and demanding schedule. She works unpredictable shifts in a mid-size hospital. Leah would like for there to be an easier and efficient way to order food, groceries, and personal care items. She has a visual impairment for which she uses screen reader technologies. She also would like to be able to spend as much of her non-work time as possible on her hobbies and personal life.
“ I’m always looking for a healthy lifestyle to balance my busy work life. ”
Goals
-
Be able to order her food on the way to work quickly and seamlessly.
-
Health conscious, mindful of what she eats, looks at ingredients in her food & where it’s sourced
-
Sufficient time to choose tasty baked goods.
Frustrations
-
Be able to order her food on the way to work quickly and seamlessly.
-
Health conscious, mindful of what she eats, looks at ingredients in her food & where it’s sourced
-
Sufficient time to choose tasty baked goods.
User Journey Map
Goal: An easy and efficient way to order the bakeries on app any time during the busy personal schedule. (Screen Reader Service Available)
User Flow
Paper Wireframe
Taking the time to draft multiple screen iterations of the main user flow on paper ensured that the elements that made it to digital wireframes would be well-suited to address user pain points. The Favorite sections were highlighted and refined until the screens were narrowed down to a single user flow.
Digital Wireframe
Goal:
Customers can log in to the account to create a personal experience, they are also able to process further without creating an account.
Underline the “forgot password” option to allow customers to create a new one.
Clear and different options allow customers to choose how they want to proceed further on.
Goal:
Main menu page allows users to check detailed products information and add products to the cart.
Tab bar to easily access to the popular product categories, swipe to view more.
Fill up stars to enter the favorite level of the product
Click Image to enter the detailed product information page.
Edit quantities of the product that will be added to the cart.
Goal:
Review and update products in cart before move on.
The icon to indicate three order steps, and which page you are at.
All images are clickable to be enlarged in another screen.
Bottom navigation bar allows users to quickly navigate within key pages.
Goal:
The home page intended to display the most updated products and to provide clear directions for the detailed category.
Voice input and search bar designed to benefit all users to search the product they want.
Iconic button to remind customers who are able to swipe the screen for more items.
All images are clickable to be enlarged in another screen.
Bottom navigation bar allows users to quickly navigate within key pages.
Goal:
The product information page allows users to select size, flavour and quantity.
The information is compatible of voice control.
Scroll down the page for more options.
The price will be
automatically updated based on the quantity.
Goal:
All the previous order will be saved on the app in the personal account, and the tracking map will be found within each order.
Clarify the order status and date
Low-fidelity Prototype
The goal is to create a minimal viable product (MVP) that is usable for early testing. In addition to the current wireframes, additional screens were added to make the primary user flow more cohesive and complete.
User Flow Goal:
Making a purchase & Tracking the order
Log In
Home Page
Browse Menu
Select item and add to the cart
Track the Order
Order Placed
Make the Payment
Process Order
Usability Study
To test my low fidelity prototype, I completed a moderated usability study with 5 participants, with guided questions and promts for users.
The goal was also to identify pain points that the user experiences, so issues could be fixed. Two rounds of usability studies were conducted.
Design Iteration - Delivery Option
Finding 1
The delivery method needs to include an accurate time slot for users to choose
Delivery time detail
Before Usability Study
After Usability Study
Based on the user needs, the delivery
information was added the “delivery time and date” selections to
improve the ease of use.
Design Iteration - Food Availability
Finding 2
The product details need to include information of food availability related to store locations
Food
availability
Before Usability Study
After Usability Study
Food availability
information is included as part of product details. In terms of user interface, the color contrast and text description help
users to place the order.
Design Iteration - Account Status
Finding 3
User needs a clear instruction to go back and forth from login page
Switch
account
Before Usability Study
After Usability Study
The “log out” button was added to enhance the completed user experience in different paths
High Fidelity Prototype
Onboarding
Log in page
Sign up page
Confirmation page
Store selection page
Menu page
Delivery time page
Order & Products
Home page
Delivery information page
Pick up information page
Shopping cart page
Payment information page
Order confirmation page
App setting page
Track Orders & Setting
Order history page
Profile setup page
Accessibility Considerations
The goal is to design a more inclusive and accessible design.
Color Contrast
The text and background color provide sufficient level of contrast.
Contrast Ratio: 8.22:1
WCAG AA: Pass
Contrast Ratio: 5.38:1
WCAG AA: Pass
Contrast Ratio: 5.08:1
WCAG AA: Pass
Contrast Ratio: 7.41:1
WCAG AA: Pass
Screen Reader
Each icon is compaired with the name and alt texts to provide a better experience to people who use screen reader technology.
Speak to search feature for inclusion and accessibility.
Contrast Ratio: 4.71:1
WCAG AA: Pass
Takeaways
With the Breka Bakery app, users can easily order high-quality baked goods, including healthy options that can be customized to their liking. This is a great option for those who are short on time but still want to enjoy delicious, fresh-baked treats.
One of my main challenges is the lack of resources and time that I had during the design and development phase. With this challenge, I have to reiterate the designs in order to be achievable within time and technical constraints, while still providing an overall and functional product to potential users.
There are still improvements that can be made and the product needs to be tested on the real market with real users. At this stage of the process, the focus was to complete the primary user flow. To complete the app, more sections need to be refined and tested to find out of the pain points have been effectively addressed.
Were I to continue to develop this project, my next steps would be to iterate on the last round of feedback from my usability study. Also, add more features to make the product accessible to all. I would continue to iterate until I was satisfied with the user flow and and then package my files to send to a UX Engineer for development.
© 2021 by ZAM Design . All Rights Reserved. Legal/Privacy