BakeryParadise Mobile App
UX/UI Case Study
Design of a mobile app for the local bakery, showcasing the whole process from an idea to the interactive prototype.
Where
Poland
What
Native mobile app (iOS)
Why
Portfolio project
Role
Designer, Researcher
Category
Food & Drink, Shopping
When
Dec 2021–Jan 2022
Why I created this app
I’m creating this app to help the customers of Bakery Paradise place orders and pay for them through my app and then pick them up at any convenient time. It will make the ordering process smooth and quick, without the customers lining up and waiting in long queues to order.
Market research
While I was looking for any kind of resources on the topic of food delivery apps and how that whole business operates, I came across a couple of articles that helped me with coming up with the approaches to ordering food online.
The claim
Food delivery apps are becoming more and more popular;
According to the article "Grocery and food delivery apps" by eMarketer, food delivery apps were among “the three fastest-growing categories in 2020;”
A report from payment publication PYMNTS and restaurant tech provider Paytronix notes that “usage of both curbside and in-store are now nearly equal with the drive-thru” and that the “vast majority of takeout orders in 2020 (89%) were placed online.”
The problem
With the arrival of the Covid-19 pandemic, food delivery apps maintained the flow of consuming products and buying food by ensuring that the food is delivered in a safe, socially distanced, and convenient way;
Anne Freer from Business of Apps states in her article "Food delivery app installs rose 34% compared to 2019" that demand for contactless ordering is still increasing, “as consumers who ordered food via apps out of necessity throughout the pandemic continue to do so;”
According to the previously mentioned report by Paytronix, “consumers appear to prefer ordering from a restaurant’s own app rather than a third party.” The report also stresses the fact that “more consumers than ever say they would be encouraged to spend more if their favorite restaurants offered time-saving services.”
Competitive analysis
I downloaded and then analysed three apps, two of which are my direct competitors and one is indirect. I compared the ordering experience of each competitor’s app as a new user and a returning user. What’s more, I also juxtaposed negative comments from the App Store and Android App Store to get the essence of what the users struggle with the most while using them and what they are not too keen on.
BakeryApp
The good
The app has simple, modern, and clean design with big headings and colours with high contrast;
The meaning behind the UI icons is explained;
The ordering process is smooth and there are many filters and categories of products.
The BAD
The navigation is unintuitive and takes time to get used to;
The list of ingredients seems sometimes too long. Thus, it should be folded on default;
Names of some products are clipped.
BakerOnline
The good
The navigation icons are big and have labels under them;
There are filters for different food allergens, such as eggs, nuts, etc.;
The app is available in different languages.
The BAD
The white text on the yellowish background has a Contrast Ratio of 1.77, thus it's not accessible;
There is no possibility to create an account using social links.
Pyszne.pl / Just Eat Takeaway
The good
Modern and clean design with big headings and colours with high contrast;
Customizable ingredients and orders, variety of restaurants to choose from;
Clear brand identity, including colours, logo, typeface, style, motion, imagery, and photography.
The BAD
Icons in the bottom navigation menu don't have labels underneath;
The hamburger menu makes it a little bit hard to navigate.
Problems from the comments
“You can't repeat orders, and there is no support button anywhere.”
Mary
User survey
I conducted a quick survey among people who use food delivery apps with a tracking system on a regular basis on Facebook.
Notable comments
“I like to know when the order will be ready.”
Anna
Initial research results
As the carried out research shows, there is a growing need for food delivery apps, and every company that provides services should have one such app.
Proto-personas
I created two proto-personas to help me explore the needs of a larger group of users and design my app with specific target users in mind.
Storyboarding
I then designed UX storyboards for one persona to help me visually predict and explore a user’s experience with my app. These were created using "Storyboard Mix-and-match Library" by Lucian Popovici.
User journey map
Next, I created a user journey map to identify the pain points and feelings the customer might go through while ordering in the traditional way. I also enlisted solutions to the problems my app would solve. This was created using "User Journey Map Template" by Bryan Maniotakis.
Time to start designing!
Once I went into my end user’s head, it was time to sketch out the first flows and the initial low-fidelity wireframes, as well as a prototype based on them.
Flow diagram
To outline all the necessary functionality, I created a simple flow diagram of the main tasks the user can do. One of the flows is shown below. Fall state flows were also created, but are not shown due to space constraints.
Wireframes and initial insights
Once the flow diagram was established, I started sketching with pen and paper the low fidelity wireframes of the main user flow. However, due to space constraints, I decided to show only a couple of the digital lo-fi wireframes I designed. The initial wireframes were made to adapt to the Android users (as a form of following the Material Design’s guidelines).
Getting feedback
After the lo-fi wireframes were designed, I made a prototype to test on a couple of users. I made a research plan where I outlined research goals, enlisted questions to be asked, KPIs, methodology, information about the participants, and a script with tasks to complete;
After collecting insights from the participants, I made an affinity diagram to seek for a pattern in the participants behaviour and their frustrations while going through the prototype;
Then I made a usability study presention to showcase the study’s quick recap, insights, and recommendations.
High-fidelity UI Design
Once the initial flow was completed and wireframes were ready, I started creating a couple of the main screens of the app. Choosing a typeface and set of colours were the two most important things. I created a simple UI Style Guide to maintain consistency. Thus, for colours I went with the HSL colour model to get exact tints and shadows of the main colours. Then I created a typography scale to ensure that the hierarchy throughout the project is preserved.
Colours
Primary
Neutrals
Typography
UI Design ideation process
The UI design went through a couple of changes. The very first version looked too clean and sterile for a local bakery app, so I started experimenting, but then I went to the other extreme and the design looked too kitschy. Because of that I created a mood board and started collecting inspirational images and it occurred to me that both yellow and red are strongly associated with the bakery and baked goods.
The wrongs of the previous designs
First iteration
Too little white space;
Too clean and sterile;
The most important information as price is not accentuated enough;
Too cramped;
Too much information to grasp at once.
Second iteration
Too kitschy.
Alignment and Grid
I used an 8-point grid system and 4-point grid vertically for the project. I set the margin to 24, as it’s a sweet spoot between 16 and 32. For the margins within groups I used 8 and 16, with margins between groups at 24 and 32. Also, all the designs was created using Constraints and Auto Layout to assure responsivity across different screens.
High-fidelity prototype
I connected my hi-fi designs into a clickable prototype with some custom and in-built animations in Figma. That will allow me to test the app on the first group of users. Live-preview of the prototype.
Prototype validation
After the prototype was created, I tested it on 5 users. I made a research plan where I outlined research goals, questions I wanted to know the answer from, KPIs, methodology, information about the participants, and a script with tasks to complete. Mainly I wanted to be sure that the ordering process is smooth without any friction and leads to the product being purchased and that later the user knows when and how the product can be picked up. This was tested and carried on in-person using Figma’s prototype mirror share app,
The tasks included adding one item and then more items into cart, multiplying the product’s quantity, and then proceeding to the checkout screen and completing the order. Side tasks included checking the loyalty card points a product has and the allergens of the product. Throughout the tasks, I asked the users to talk through their thought process and speak out when something is unclear or makes them irritated.After the usability study, I asked the participants to complete a short System Usability Scale questionnaire.
After collecting insights from the participants, I made an affinity diagram to organize a large number of ideas into their natural relationships.
Then I made a usability study presentation to showcase the study’s insights and recommendations.
Study results
60% of participants (3 out 5) weren’t able to purchase any product(s). However, all of the users were able to add the desired items to cart, check the loyalty card points and allergens of the product. What was the main friction of these two users who couldn’t purchase the product(s) was that they weren’t aware that paying through the app is only possible by owning a credit card.
Prototype update concept
Because of time constraints, I wasn’t able to run a second usability study on the updated prototype. However, I have updated it by adding an alert on the home and checkout screens that “for now, the only available payment method is by credit card and PayPal” when a new user registers.
Project summary
During the project, I managed to evaluate the market research, do a quick user survey, create a set of lo-fi wireframes, build them into hi-fi UI designs, connect them into a prototype, and perform a mini usability study. This was a demanding and time-consuming but very insightful journey. I learned a lot throughout the whole process but I’m not resting on my laurels. There is a lot of room for improvement and many things to learn.