![](https://static.wixstatic.com/media/772107_e6688fa11ccb4c0db6f910ffa4747faa~mv2.png/v1/fill/w_973,h_576,al_c,q_90,usm_0.66_1.00_0.01,enc_avif,quality_auto/772107_e6688fa11ccb4c0db6f910ffa4747faa~mv2.png)
THE PRODUCT
This is a meal delivery app for HoneyBun Bakery for customers of all classes of society to be able to order pastry meals and have them delivered to them.
MY ROLES
UX Designer [Generalist]
Graphic Designer
PROJECT DURATION
December 10th – 31st, 2022.
MY RESPONSIBILITIES
User research, Competitors audit, Wireframing, Prototyping, and Usability study.
PERSONAL OBJECTIVES
To facilitate an acceptable user experience for HoneyBun's app by ideating a visual design and user flow that meets users needs.
To take full ownership of the various roles involved in designing a product such as: User Researcher, UX Designer, Product Designer.
The Problem
Unavailability of online pastry meal ordering apps
Payment process pain points.
Poor meal delivery tracking.
Scanty menu details.
The Goal
Solve the problem for ordering, processing payment and delivery of pastry meals in a local community through a mobile app that makes it easier to find and select desired meals, provides health and dieting tips, makes payment and tracks delivery.
User Research: Summary
​
The user research was done primarily as a foundational research wherein users were being interacted with to discover the problems they face when ordering a meal for delivery.
The research was conducted solely by me and it was a mix of both primary and secondary research.
Data collection was done using both quantitative and qualitative methods, although more of qualitative due to the intense focus on interviews, surveys, usability studies and user feedbacks.
User Research: Pain Points
​
Meal Selection & Checkout
Users get frustrated when they struggle to find the meal they intend, and also when they struggle to checkout their selection. A straightforward user-flow with CTAs and a filter or search-bar for menu will be helpful.
Poorly Detailed Menus
Users get skeptical when they cannot view the full details of a meal they intend to order. Therefore, having a fully detailed menu will go a long way in helping users’ indecisiveness.
Limited Payment Options
Users enjoy services that provides multiple payment options. A product that restricts users to one payment option causes a block to users. Adding multiple most used payment options will please the users.
Indecision
​
Some users struggle in deciding on what to order. Adding an order history section or dietary/health tips will help keep users healthy and also aid their decision when using the app to order.
Persona - Oamen
PROBLEM STATEMENT
Oamen is an IT Specialist who needs a service through which he can order breakfast pastry meals for delivery at the office because he is too busy to stop by the bakery to get it every morning.
![](https://static.wixstatic.com/media/772107_c185bf3f27774f3a89099f033fcbbbca~mv2.jpg/v1/fill/w_709,h_424,al_c,q_80,usm_0.66_1.00_0.01,enc_avif,quality_auto/772107_c185bf3f27774f3a89099f033fcbbbca~mv2.jpg)
Persona - Jane
PROBLEM STATEMENT
Jane is an Radio Presenter who needs a service through which she can order varieties of healthy breakfast meals for her kids, to be delivered at her home early every morning because she struggles to prepare breakfast on time and also have enough energy for the day at work afterwards..
![](https://static.wixstatic.com/media/772107_302b7871d4e8480ea4c64f16bc25a094~mv2.jpg/v1/fill/w_710,h_420,al_c,q_80,usm_0.66_1.00_0.01,enc_avif,quality_auto/772107_302b7871d4e8480ea4c64f16bc25a094~mv2.jpg)
Digital Wireframes
As the initial design phase continued, I made sure to base screen designs on feedback and findings from the user research. Easy navigation was a key user need to address in the designs in addition to equipping the app to work with assistive technologies.
Search bar to enable users easily search for an order from the home screen
Previous orders section on Home screen should user decide to repeat an order
Health and diet section to aid user make healthy orders
![HoneyBun App home wireframe](https://static.wixstatic.com/media/772107_b61bfa3ef229467d9846d02d31948f6f~mv2.png/v1/fill/w_303,h_512,al_c,q_85,enc_avif,quality_auto/772107_b61bfa3ef229467d9846d02d31948f6f~mv2.png)
​Easy access to navigation that’s screen reader friendly
Big navigation button to the Menu screen
![HoneyBun App dropdown menu wireframe](https://static.wixstatic.com/media/772107_54e4ea004f0143ff83814eeac2ab59e4~mv2.png/v1/fill/w_304,h_512,al_c,q_85,enc_avif,quality_auto/772107_54e4ea004f0143ff83814eeac2ab59e4~mv2.png)
Included social media link to better connect with the client
![Image by ROBIN WORRALL](https://static.wixstatic.com/media/nsplsh_46507431304c584b306367~mv2_d_5184_3456_s_4_2.jpg/v1/fill/w_980,h_653,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/nsplsh_46507431304c584b306367~mv2_d_5184_3456_s_4_2.jpg)
Usability Study: Findings
I conducted two rounds of usability studies. Findings from the FIRST STUDY helped guide the designs from wireframes to mockups. The SECOND STUDY used a high-fidelity prototype and revealed what aspects of the mockups needed refining.
Round 1 findings
Users want to remove item from cart
Users want a bigger ‘Menu’ button
Users want only accurate reviews
Round 2 findings
Users want a ‘logout’ option
‘Add to Cart’ process is too long
​‘Like’ and ‘Dislike’ buttons on articles are no functional
Usability Study: Redefined Mockups
Early designs allowed for some customization, but after the usability studies, I added a Remove icon to items in the cart as well as a remove from cart process/flow.
![Before Usabilty Study](https://static.wixstatic.com/media/772107_9a12736374ad4a74bb9b2a8f3ff6cea6~mv2.png/v1/fill/w_265,h_440,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/772107_9a12736374ad4a74bb9b2a8f3ff6cea6~mv2.png)
Before Usability Study
![After Usabilty Study](https://static.wixstatic.com/media/772107_71eb231d78bf43288995fc0d43f40ace~mv2.png/v1/fill/w_302,h_521,al_c,lg_1,q_85,enc_avif,quality_auto/772107_71eb231d78bf43288995fc0d43f40ace~mv2.png)
After Usability Study
The SECOND USABILITY STUDY revealed users’ interest in wanting to logout but there was no provision for that. I then included a Logout button in the Profile screen and Dropdown Menu.
![After Usabilty Study](https://static.wixstatic.com/media/772107_db85980fc14642d884284302b5ac5ab7~mv2.png/v1/fill/w_468,h_385,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/772107_db85980fc14642d884284302b5ac5ab7~mv2.png)
![Before Usabilty Study](https://static.wixstatic.com/media/772107_44609c9e64534131adbb02ea99e1012e~mv2.png/v1/fill/w_468,h_385,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/772107_44609c9e64534131adbb02ea99e1012e~mv2.png)
Before Usability Study
After Usability Study
Key Mockups
![HoneyBun App home screen](https://static.wixstatic.com/media/772107_0db66efadf5647c4abeb8646cc37d1fe~mv2.jpg/v1/fill/w_244,h_401,al_c,q_80,usm_0.66_1.00_0.01,enc_avif,quality_auto/772107_0db66efadf5647c4abeb8646cc37d1fe~mv2.jpg)
![HoneyBun App meal screen](https://static.wixstatic.com/media/772107_fe4a0a3f3f234bb88ccc214100da9ad7~mv2.jpg/v1/fill/w_240,h_400,al_c,q_80,usm_0.66_1.00_0.01,enc_avif,quality_auto/772107_fe4a0a3f3f234bb88ccc214100da9ad7~mv2.jpg)
![HoneyBun App menu screen](https://static.wixstatic.com/media/772107_bf47dddca2cd44e1ba33c22e6179dd5e~mv2.jpg/v1/fill/w_237,h_401,al_c,q_80,usm_0.66_1.00_0.01,enc_avif,quality_auto/772107_bf47dddca2cd44e1ba33c22e6179dd5e~mv2.jpg)
![HoneyBun App cart screen](https://static.wixstatic.com/media/772107_c1195878217e46feacc0cda987745629~mv2.jpg/v1/fill/w_235,h_401,al_c,q_80,usm_0.66_1.00_0.01,enc_avif,quality_auto/772107_c1195878217e46feacc0cda987745629~mv2.jpg)
![Image by Jakub Pabis](https://static.wixstatic.com/media/nsplsh_d2a09748cafc4867806e67131afb593c~mv2.jpg/v1/fill/w_746,h_497,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/nsplsh_d2a09748cafc4867806e67131afb593c~mv2.jpg)
Accessibility Considerations
Detailed imagery
Used detailed imagery for pastry meals to help all users better understand the designs and what they are ordering.
Icons
​
Used icons to help make navigation easier.
Contrast and Alts
​
Provided access
to users who are vision impaired through using good contrast for screens, and adding alt text to images for screen readers.
Impact
The app makes users feel like HoneyBun Bakery really thinks about how to meet their needs wherever they may be.
​
One quote from peer feedback:
“The app made it so easy and quick to place an order and have it delivered to me.”
What I Learnt
While designing the HoneyBun Bakery app, I learned that the first ideas for the app are only the beginning of the process. Usability studies and peer feedback influenced each iteration of the app’s designs
Everyone deserves a special treat
![](https://static.wixstatic.com/media/772107_770cd6ea8ab547f2849c69943a162a21~mv2.png/v1/fill/w_908,h_443,al_c,q_90,usm_0.66_1.00_0.01,enc_avif,quality_auto/772107_770cd6ea8ab547f2849c69943a162a21~mv2.png)