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.
Native mobile app (iOS)
Food & Drink, Shopping
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.
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.
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.”
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.”
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.
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 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.
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 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
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.
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
I conducted a quick survey among people who use food delivery apps with a tracking system on a regular basis on Facebook.
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.
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.
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.
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).
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.
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
Too little white space;
Too clean and sterile;
The most important information as price is not accentuated enough;
Too much information to grasp at once.
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.
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.
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.
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.
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.