Bakery Paradise

Stop wasting your time in line and order your baked goods online

Market research Competitive analysis User survey Personas Storyboarding User journey map Flow diagram Lo-fi wireframes Alignment and grid Hi-fi UI Prototype Mini usability study Accessibility evaluation

Where

Kluczbork, 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 created 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

Business of Apps in their “Food Delivery App Revenue and Usage Statistics” article projects that the global market for delivery apps will increase to $120 billion by the end of 2021, reaching $300 billion by 2027.

The claim

  • Food delivery apps are becoming more and more popular.

  • According to 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 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, “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

  • White text on the orange background has Contrast Ratio of 1.77, thus it's not accessible.

  • There is no possibility to create an account using social links.

  • You can’t add an item to cart, so it’s impossible to order anything.

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

It's a shame that you have to enter the card number every time.

Anthony

You can't repeat orders, and there is no support button anywhere.

Mary

Sometimes out of area phone numbers don’t work and I don'y know what to do.

Yazan

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

Anna

I like the option to re-order.

Katarzyna

I like getting coupons and gift cards.

Kajetan

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.

Personas

I created two 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.

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.

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. The initial wireframes were made to adapt to the Android users (as a form of following the Material Design’s guidelines). The prototype can be live-previewed here.

Getting feedback

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

Alignment and grid

I used an 8-point grid system and a 4-point vertical grid for the project. I set the margin to 24, as it’s a sweet spot 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 were created using Constraints and Auto Layout to assure responsivity across different screen sizes.

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. The prototype can be live-previewed here.

Prototype validation

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.

Accessibility check

The app has been evaluated for contrast to match at least AA standards. Every frame was checked with contrast checker tools, such as the Figma plugin “A11y - Color Contrast Checker” and then by hand with the “Contrast Checker” by WebAIM.

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.

Get in touch

Contact me

Do you want to collaborate, say hello, or offer me a job?

I'm currently unavailable for work.

But you can always

drop me a line

. I'd love to hear from you! 😊