ABOUT THE PROJECT
Embedded Files
The Product
The Product
Epic Treats is a bakery app that displays baked goods for users to easily order and have it delivered and picked up as well. Epic treats strives to provide healthy diversified baked food depending on the users preference. This app targets working class customers with little time on their hands. Also, Epic Treats target workers with remote jobs who prefer to order in, rather than go out to get their meal.
The Problem
Potential users have no time to pick-up their order and are too busy to prepare their own baked food.
Project Duration
The project lasted from May to July
My Role
I worked on this project as a UX Designer, UX Researcher, User Interface Designer. I did comparative analysis, I also put accessibility into account as i iterated on my designs. The whole project was my idea from start to finish as I worked alone on this project.
The Goal
Design a bakery app that allows busy users get their specific order delivered to their exact location and that also make healthy baked food available and accessible.
Responsibilities
User Research
Wireframing
Lo-Fi Prototype
Mockups
Usability Studies
Persona creation
Hi-Fi Prototype
Visual Design
MY DESIGN PROCESS
In the design phase, I focus on the most effective and efficient way to construct the solution and make the overall experience better.
Empathize
Empathizing with the user through user research is a crucial step in every design process.
Define
Analyzing the data collected from research to know the actual problem.
Ideate
This is the part where I come up with the best possible solution to solve the problem.
Design
Starting with the user's journey maps to wire-frames, lo-fi and high fidelity, prototypes and the final UI Design.
EMPATHIZE
Understanding the user
This is where I empathize with the user through user research. I conducted interviews, surveys and created empathy maps to understand the users I’m designing for and their specific needs. A primary user group identified through hours of research was people who are vegan and needed healthy baked goods.
Another user group was working class users who had no time to prepare their pastries and needed their order delivered to them in time and accurately. These set of users need their food delivered to the precise address. Research has shown that these sets of users sometimes find it hard to get the exact kind of baked goods they order and at other times, their order gets delayed and arrives late.
User Personas
Based on the research findings, I came up with two personas and a journey map which describes the potential users's frustrations and goals as well as the series of events a user will have to go through as they achieve their goal while using the product.
Persona 1
Problem Statement
Thomas Ola is a Web designer who needs to be able to order healthy gluten free baked goods and have it delivered to his residence because he is vegan and values his privacy.
Persona 2
Problem Statement
Tara Williams is an events planner who needs to be able to get her orders in time and accurately because wants to be more organized and also have time for her child.
DEFINE
In the define phase, all the aspects of the collected information and facts are compiled together to arrive at a sustainable solution for any specified problem. I identified user pain points according to the research in the empathize phase. I drew out user journey maps, created a big picture and close up story board after using crazy 8s to ideate.
User Research: Pain Points
Time
Time
Users have busy schedules and cannot prepare their meals
Delivery
Delivery
Users get frustrated when their order arrives late, is inaccurate and cannot be tracked.
Navigation
Navigation
Users find it hard to navigate through platforms because the functions are not easily understood
Lifestyle
Lifestyle
Users with healthy lifestyle complains of not being able to find healthy meals easily on available bakery apps
User Journey Map
The user journey of Thomas Atkinson just shows how the app would be used from start to finish and how useful and helpful it will prove for users to have access to the Epics Treats App.
Big Picture Story Board
This is the big picture story board of a User persona, Thomas Atkinson. This shows the how and the why. That is, the problem a particular set of users would face and how the Epic Treats app can solve that problem.
Close - Up Story Board
This focuses more on the product and what happens on each screen as the user navigate through the product to meet that need. This close up story board shows the representation of a particular set of users, Thomas Atkinson as they download the epic treats app, get to the home page, scroll through to get their desired pastry. They are led to the payment page and then a map to track their order.
IDEATE
In the Ideate phase, I did a lot of brainstorming and came up with a lot of ideas which i iterated as the design phase continued. I drew up wireframes and made some sketches which helped me come up with the best solution for the problem that users face when dealing with bakery apps. Also, I conducted a competitive audit to check out what our competitors are doing right and wrong and how I could use that information in making sure that the Epic Treats app live up to standard.
Under the Ideate phase, I will drop down pointers as to what to expect as I move through this aspect of the design process:
Goal Statement
Competitive Audits
Brainstorming on paper
Paper Wireframes
Digital Wireframes
Low Fidelity Prototype
Usability Study Findings
GOAL STATEMENT:
Our Epic Treats Bakery App will let users have baked goods delivered to required location which will affect working users with little time on their hands to pick up their orders by allowing this set of users get their order delivered, giving them extra time for other happenings in their lives. We will measure effectiveness by paying more attention to individual orders and tracking orders till they get delivered.
Competitive Audits
The goal of the competitive audit I conducted was to track the competitors, understand their approach, and figure out what my app might be missing out on. The aim is to discover what works for other bakery apps and incorporate those strategies so as to gain a competitive edge.
Our key competitors are Bakology, a bakery that's more vast than Epic Treats and has their Bakery in more locations in the country. Another competitor is Love Cakes, a low-cost family-style Bakery that has a wide ranging menu. We also have Glovo, an indirect competitor that provides delivery of baked goods nationwide.
I started my drawing out my plan on how my competitive audit will be conducted with the goals, competitors strengths and weaknesses, gaps and opportunities. All compiled in a document format.
To view the full Competitive Audit I conducted, tap on the document titled ''Bakery App Audit''
The concluded Competitive audit I did on a spreadsheet can be accessed at- Competitive audit spreadsheet.
Brainstorming and Ideating
After concluding on my competitive audit, I started brainstorming on solutions to the problem. I needed to plan out how my app was supposed to function and its outlook so I did a lot of paper sketches. I iterated on the sketches and drew out ideas which I could pick out from when I have established the final design.
Paper Wireframes
After a lot of iterations and paper scrunching, I finally came up with six screens that will show the user’s primary journey through the app, which is the login process down to the tracking and order completion. The screens addresses the users pain point because I made it a priority to design a quick and easy ordering process for an all round great user experience. Every button is labelled to assist accessibility.
Digital Wireframes
I moved from paper wireframes to digital using Figma as my primary design tool.
Some explanation of the DWF (Digital Wireframe)
As the initial design phase continued, I made sure to base screen designs on feedback and findings from the user research and also put users needs into consideration as a progress further down the design phase.
For example, the search bar I created helps users easily find what they want to order instead of scrolling , thereby saving time.
I also divided baked foods into sections and categories for users to get specific baked food according to its class. I added a call to action button "add to cart" to ensure users understand how to navigate through the app and also add order quite easily too.
A tracking screen is very necessary for the user. Especially users that lack enough time to prepare their meals and are skeptical about ordering apps. This feature makes them rest assured as user can see the order on the tracking page till it gets delivered at their doorstep.
I added the call and message option for the user to be able to reach the delivery guy, thereby monitoring their order
Low Fidelity Prototype
The complete set of digital wireframes was used in creating a low-fidelity prototype. The primary user flow was login, select, order and track. This was made simplified so that the low fidelity prototype can be used in a usability study.
View Low-Fi Prototype Link
Usability Study Findings
Two sessions of usability study were conducted. Findings, as listed below, from the fist usability study conducted, helped guide the designs from wireframes to mockups. I had to consider the complaints from the wireframes and iterate multiple times as I work on the high-fidelity. The second usability study was conducted using the high fidelity prototype and revealed what other touch-ups needed to be made.
Findings from 1st Study
Findings from 1st Study
Users didn’t understand the categories button on the homepage.
Users wanted a healthy pastries section.
Users want a call option to get their order fasted instead of just scrolling through options available.
A call button to be added in the tracking page for users to contact their delivery.
Findings from 2nd Study
Findings from 2nd Study
A confirmation page needed to be added
The refined search page assists accessibility
Users liked the small, medium, large option on the items screen
DESIGN
Early mock-up concept and design - that is the low fidelity prototype - allowed for some refining and iterating of the final design. After the usability study, I designed with the user feedback in mind as I wanted to come up with the best possible solution to the problem and that these solution I am coming up with will address the user pain points.
I will thoroughly explain my process, decisions and choices as I move through the project.
Refining the design based on Usability Study
Before and after Usability Study
The results of the usability studies helped me refine my designs. I changed 'Favorites' 'Explore Healthy Pastries' to suit users needs as some users might be vegetarian or would prefer vegan pastries. The refresh button was added so that the users could reload as they please.
I also added a categories icon for users to easily get to the categories page. Usability studies revealed that users found the categories button on the homepage of the low-fidelity prototype confusing so I worked on making it easier to understand by creating a subcategory on the homepage and adding images for better navigation.
Before and after Usability Study
I made sure to label Icons, sections and subsections so that the design can be clearer to new users when they interact with the product. I also considered accessibility in my designs by adding the speaker icon for users that want to search but can’t type with their hands. I added a sun icon for different mode options e.g dark mode.
On the main body of the screen, I changed the swipe option to scroll for users to easy browse through. I created a different page for specific pastry selected. If users are not interested in checking out more details about the pastry they picked out, they could easy tap the + icon to add automatically to cart.
On the items page, I added the small, medium and large option, with the particular item chosen boldly displayed. I had to iterate the design and came up with a user centered icon - the call icon. This icon is so useful because i figured that users sometimes get the wrong or incomplete order because there might be lack of a particular needed item in the app. To to make ordering easier, users can easily call to describe exactly what they need.
I created an empty cart page as this is what a user would see when interacting with the product for the first time with no items in their cart
I added accessibility for users with disability to switch modes.
I wanted users to have as much freedom with the app as possible so i added two options for the users to pick from: Delivery or pickup.
Usability study result of the low fidelity shows that there was no option to contact the delivery guy just in case they encountered a delay in receiving the order so i added a call and message icon.
The 'Track Order' button allows users to monitor their order and the exact time their order is meant to arrive. They can monitor their order in real time which in my opinion is pretty great!
High Fidelity Prototype
The prototype presented showcases a neater version of the user flow. It meets users needs as the usability study findings was applied to step up design.
View Hi-Fi Prototype link
Other Screens
WRAPPING UP
Accessibility Considerations
Descriptive text are placed text under icons to enable new users understand what each icon meant and the roles they play.
Added the sun icon for visually impaired users and night users to be able to switch to their preferred mode
Call to action buttons are big enough for every user to use and navigate.
Takeaways
What I've learned
What I've learned
First of all,
Research in a must!
Personas are very important.
And the user is always right
I learnt so much. The whole process was fun but it was not an easy one. This is my first design and case study and one most important thing I picked out of everything I have learnt so far is ITERATION. It cannot be overemphasized. Great designs are not built in a day. You conduct usability study, you test and you iterate over and over till it seems great enough. I believe that there are no finished designs, they change. Big apps like Facebook, Twitter, Instagram and even Google, iterate on their designs. They keep improving. They never stop.
Impact
Impact
“For your first design, this is pretty great! I believe in you Anna. I root for you. Keep designing, never give up…!''
Kenny Gbemi
UX Designer
Next Steps
Next Steps
Continue to improve on the design. The work is not completely done yet.
Build the dark mode screens and i added an orange mode screen as well.
Conduct another round of usability studies in case there are ways to improve.
Thank you for taking time to review my work!
If you’d like to get in touch, my contact information is provided below.
Email: annaajayi3@gmail.com
Website: https://sites.google.com/view/annaajayi
LinkedIn: www.linkedin.com/in/anna-ajayi
Page updated
Google Sites
Report abuse