top of page
My Role: UX/UI Designer
Project Duration: 2 weeks
Tools Used: Figma, Adobe Photoshop, Adobe Indesign
  • Conducting interview
  • Paper and digital wireframing
  • Low and high-fidelity prototyping
  • Conducting usability studies
  • Accounting for accessibility
  • Iterating on designs
Project Overview

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.


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. 

  • 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


  • High delivery cost 


  • No reviews available


  • The actual product is not matching the online picture


  • No food ingredients and calories displayed


  • Can’t see the food availability


  • Lack of customization options

  • Discomfort of text heavy apps 

  • Can’t schedule time before checking out

  • Can’t track the order, Delivery delay


  • Hard to find customer support

  • Late response 

  • Complicated contact process


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.


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. ” 

  • 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. 

  • 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


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.


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.


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.


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.


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.


All the previous order will be saved on the app in the personal account, and the tracking map will be found within each order.

Wire Frame Page 008.jpg

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


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


Before Usability Study

After Usability Study

The “log out” button was added to enhance the completed user experience in different paths

High Fidelity Prototype


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


Contrast Ratio: 5.38:1

Contrast Ratio: 5.08:1

Contrast Ratio: 7.41:1

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


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

bottom of page