Mobile App

Role: UX researcher, UI/UX designer

Duration: June 2022 - September 2022

Project Vision

Bakery Box is a mobile app designed to allow users to easily browse the menu, order, and pick up freshly baked goods whenever, wherever. Bakery Box targets customers who find the menu at stores to be too small and difficult to read, or those who simply want to browse the menu quickly and place an order to pick up. The MVP for this product was developed as a mobile based application rather than being web based to showcase my mobile design skillset.

Challenges

  1. Create an accessible and fun menu for all users

  2. Design a cohesive interface for familiar and unfamiliar users

  3. Provide a quick & streamlined checkout process

sign in page of the app

User Research

For this project, I decided to use a goal-directed design method which revolves around focusing on our persona creations and goals. This helped to empathize with users and define the problem. Both qualitative and quantitative methods were useful in designing the app, including interviews, competitive audits, and most importantly, the persona hypothesis construction. I started out by asking some key research questions.

“What is the product and who is it for?”

brown vertical line

“How long does it take for users to select and place an order in the app?”

“How long does it take for users to find the assistive technologies button to utilize?”

“What can we learn from the steps users take to browse the menu and place an order?”

“What challenges do users face when browsing the menu or placing an order?”

“Is the payment process easy for users?”

The interviews conducted gave me a better understanding of the usability of the app in its beginning stages. I used an affinity diagram to separate the data into similar categories, which helped to develop themes and actionable insights.

AFFINITY DIAGRAM

Meet the Users

police officer

Name: Jacob

Age: 50

Occupation: Police Officer

Jacob is a police officer who lives in New York City. He works both day and night shifts but will always find time to spend with his family. As he’s walking the streets of New York City, he often finds bakeries he would love to buy snacks from. Jacob has mild dyslexia, which can make it difficult to read text quickly and process information in fast-paced settings. Although Jacob enjoys working in an action-packed, fast-paced setting, reading text heavy menus may not be one that he loves to do.

Name: Ashley

Age: 25

Occupation: Lawyer

Ashley is a lawyer who loves looking for new places to eat small snacks or baked goods that she can easily bring with her when she’s working. However, with her busy schedule, she does not always have the time to sit down and enjoy her food. Before going to a new place, she always tries to browse their online menu, if they have one, to see what they have to offer so she knows what she wants when she gets there. Ashley is health-conscious as well as budget-conscious.

Competitive Audit

I analyzed several potential competing companies, including both direct and indirect competitors. Bakery Box has the opportunity to enhance their menu design and browsing experience based on the strengths and weaknesses of each competitor's app.

The majority of the features between competitors were very similar, however, the main differences I noticed were:

  • Offering full menus in multiple languages vs. one language

  • All key information present vs. too brief / missing details

  • Minimalistic interface vs. bright / distracting interface

  • Simple / streamlined checkout process vs. difficult / long checkout process.

Preparing the Journey

I constructed a user flow of what a basic start to finish journey looks like while placing an order from Bakery Box. This helps us in understanding the different ways users can interact with the app, as well as allowing us to see navigation through user goals.

user flow of bakery box app

USER FLOW DIAGRAM

paper wireframe

Wireframes

Taking the time to draft iterations of the menu screen of the app on paper ensured that the elements used in the digital wireframes would be well-suited to address user pain points. For the menu screen, I prioritized using large images as well as other assistive technology options to help users view the menu easily.

A lot of time and effort was spent on this step to determine what was necessary, unnecessary, or needed improvement before moving onto the visuals. The low-fidelity prototype connected the primary user flow of browsing the menu and ordering bakery items, so the prototype can be used in a usability study with users.

lo-fi wireframes

Iteration

After creating a prototype from the low-fidelity wireframes, I conducted a usability study. Five participants were asked to follow prompts and review the prototype, as well as provide valuable feedback that can be used for the next set of design iterations. The feedback was then incorporated into the high-fidelity mockups.

Users wanted to browse the menu and place their order quickly. However, there was no direct way for users to get from the menu page to their current order without having to go through the full “View Item Details” process.

Users wanted a quick and streamlined payment process. It would be valuable to have the ability to save credit card information for future purchases.

Users wanted assistive technologies that are easy to find and use in the app. It’s important to have assistive technologies available in the app but it’s just as important to be able to find it easily!

A “View Order” button was added to the menu page

The option to save credit card information was added

Challenge 1

Accessible and Fun Menu

Accessibility is a key factor that can encourage more users to use and order from the app. Along with the large images used for each bakery item, the assistive technologies can allow users with any range of disabilities to have the resources to navigate and order from the app. Once users log in, a pop-up will appear to highlight this feature in the app.

Challenge 2

A Familiar Experience

While mobile ordering and online shopping has become very popular to use, those unfamiliar with online ordering need to be able to use the app as well. Bakery Box strives to achieve this goal through the use of recognizable iconography, detailed imagery, and a linear checkout process.

Quick & Streamlined Checkout Process

Challenge 3

With payment information and bakery items ordered listed on the same screen, it allows users to be confident with their selections and information. This design can allow for users to confirm their order quickly, leading to a faster checkout process.

Style Guide

Combining different shades of brown to create Bakery Box’s signature look stemmed from wanting to express to users a warm and comforting feeling of freshly baked goods. The different shades of brown also help to emphasize and draw attention to all the images used for the bakery items.

Takeaways

The Bakery Box app was an idea that I’ve had since online ordering gained popularity. Most online menus and ordering apps in the market have either been for large meals or with no pictures. I wanted to design an app for a bakery where people can place an order for smaller snacks, with assistive technology available to do so. Through my usability studies, I’ve discovered that the use of images on menus encourages users to use the app and place an order because it allows for a fun visual experience.

This was my first time using the goal-directed design process, and I can definitely see it being useful in future projects. For any app to be successful, I’ve learned that it’s important to design with users in mind to truly address their pain points. The persona hypothesis creation is a super useful design process to ensure the business’ and user’s goals are met. While designing the Bakery Box app, I learned that the first ideas for the app are only the beginning of the process. Usability studies and peer feedback are key to iterate the app’s design to be better and more user-centred.