Create a Mobile Ordering App for a Bakery

Client

Pear Street Bakery (Conceptual)

Role

UX Designer

Timeline

2 Weeks

Tools USed

Figma, Illustrator

The Challenge

Small businesses often need to compete with large ordering apps that often upcharge the customer and take large cuts of profit from the businesses.

Project Goals

  • Create an ordering app that can be easily used by the customer and able to be frequently updated by the business owner. The goal is to increase the small bakery's consumer base and increase business success over time.
  • Allow the business owner to have an easy to use interface that will not take up too much of their time to understand and use.
  • Create a painless ordering app for busy customers.

My Approach

  • Create an app that is targeted to multiple types of customers.
  • Add a feature to establish customer loyalty.
  • Create an easy to update interface for the business owner.

01 Research

Ordering app monopolies

Many ordering apps take a commision fee of 20-30% and is not sustainable (source, source). In this day and age of quick and easy ordering and the desire to perform tasks as efficiently as possible, small businesses need a way to compete. I wanted to design an attractive and easy-to-use app that appeals to the typical customer and rewards their loyalty.

Different approaches for reaching customers

I did a competitive analysis with bakeries local to my area. I went to these bakeries in person and quickly observed clientele researched their approach to online ordering and reaching their customer base.

Discovering issues when ordering online

I interviewed and shadowed 5 users to better understand their behaviors when ordering food online. I wanted to learn what parts of the process I can better focus on and improve in my own app. I observed and took notes on their behaviors. I asked them to show me what they typically do when ordering a food item online. I wanted to simulate a realistic experience and asked them to act as if this will be what their next meal is, whether or not they planned on ordering it. They did not pay for this item, we stopped at the payment screen. The apps used were: Doordash, Uber Eats, and Grubhub.

Finding and opening the app

It's the first step but it was interesting seeing how similar some apps look to each other. For example one user accidentally clicked their Capital One app instead of Doordash.

Decision making

I found that the behaviors of users changed whether a user knew what they wanted or not. One user knew she wanted to order buffalo chicken pizza and typed it in the search bar, while another user went through categories and would often change his mind.

I categorized users into the following: A user who knows what they want and where to look for it, a user who knows what they want but does not know where to find it, a user who knows what they want roughly, like for instance, they want something savory but would like to see their options first, and a user who has no idea what to buy. So they explore the app to figure out what they want.

Payment Methods

Most users had a stored card in their app making it easy to quickly order if they used the app in the past. I want to make sure to include this since speed in ordering is a big priority.

02 Define

The Customer and the Business Owner

I put together personas based on two user behavior patterns I observed from my interviews: The bakery customer and the bakery owner. I knew the approaches would be different for these two individuals and I wanted to explore this.

The Customer

May Henderson would typically want to order an item on the way to work and would ideally want to be able to pick it up quickly. It's pretty straight forward but the challenge would be ensuring that the app allows the user to choose an item easily and quickly without too many screens between selection and payment.

The Business Owner

Evelyn Hayes is a business owner and has limited time to learn a complicated system to fulfill orders. For her I would design a CMS template that would allow her to quickly upload images and descriptions of food items, keep a database of order fulfillments and be able to upload any important bakery announcements or sales on the homescreen.

Identifying Needs and Pain Points

I created a user journey map to emphasize with the customer from their perspective in order to understand solutions and potential ideas. I decided to focus on the customer side of the app for now.

03 Ideate

Exploring Ideas

Using the information above I gathered some ideas on how to begin designing this app. I added major categories on the first page, used minimal levels to reach an item, added a way to track your order, and sketched ways to easily move through several categories while on one category page. I began to brainstorm these thoughts through a quick sketching session.


Paper Wireframes

I created paper wireframes of a typical user flow to solidify the ideas I felt worked best in this case. My thought was that I wanted a user to be able to see the bakery's categories upfront on the home page. The bar at the bottom would contain crucial pages the user may want easy access to. There would be a button for the user to find their own personal information. there would be several options of selecting items based on the user's goal, whether they know what they want, they do not know what they want, or they have an idea of the type of item they want.

Identifying Needs and Pain Points

I created a user journey map to emphasize with the customer from their perspective in order to understand solutions and potential ideas. I decided to focus on the customer side of the app for now.

Figuring out touch points from the customer perspective

As part of my brainstorming and sketching process I created a user flow diagram based on my user journey map. This helped me understand the decisions I needed to account for in my design.

04 Prototype

Home Screen

The Home Screen has several visual hierarchies based on priority for the customer and the bakery, while following some placements that customers would be familiar with. Since this a US based app, typical users read from left to right, and top to bottom.

  • The logo is at the top left. According to a study by the NNGroup of 128 participants in an A/B test: "Left-aligned logos lead to greater brand recall. Specifically, the average brand recall for left-aligned logos was 39% as opposed to 21% for the right-aligned version.". This was an important step as this app is meant for a small business that requires brand recognition to stay popular in the area it serves.
  • The user avatar is at the top right since it is a common design pattern and meets user expectations when locating their profile.
  • The search bar is the first item related task, this is for those who know what to look for.
  • Below the search bar is a section for the bakery to be able to display any bakery news or announcements, scaled at as the largest section and follows the Z pattern in visual hierarchies.
  • The category section allows users to browse common item types leading them to a separate menu.
  • Popular items help the bakery promote specific items and help prepare for the amount of stock required, as well as give suggestions to new customers that want recommendations.
  • The bottom bar continues to follow the Z pattern and has home, browse, favorites and cart screens in the order a customer may take to select and purchase an item.


Browse Screen

I kept the same top section as the home screen in order to allow users to quickly reference other forms of searching for items or getting to their profile. I added a horizontal scrolling bar with categories at the top to allow users to quickly switch between item types. There is also an option to filter items. Each item has an image, headline, and a short description as well as the price and a favorite button.


Item Page

The item page is an overlay that allows users to quickly return using the back arrow. They can also favorite an item at the top right. The image of the item is prominent and the title is directly below. The add to cart button is below the title to be easily found by the customer.


Shopping Cart

Again relying on a Z-pattern for visual hierarchy I made sure a user can easily exit the overlay with the back button on the top left. A user can quickly toggle between pickup or delivery, and scan through the items they are purchasing. Here they can change item quantity, select tip and confirm their payment method. For the payment method I intend for the most recent payment method to be displayed while giving the option to change this method if desired instead of having many options displayed first. This would keep the page clear of any unnecessary information or steps for a customer who is in a hurry.


Confirmation Page

After a customer purchases their item, a page showing estimated preparation time can give customers reassurance that their item order is progressing and when to expect it. The address section would be clickable and would open the user's default map app to help them get to the bakery successfully. When they arrive they can show the employee their QR code to quickly locate the item and not deal with confusing name calls or misspellings. The bakery still knows the customer's name through their own item preparation screen, in order to not make the process too impersonal.


Figma Work space

I included a screenshot of my workspace to show how my work is organized for potential developers. I want to ensure anyone using the file can quickly access the final prototypes and find components and button states.


Sticker Sheet

I enjoy creating sticker sheets to keep my graphic design choices organized and easy to reference. This practice would be important for larger companies who want to keep their branding guideline consistent. I also added a potential design for the mobile app icon. I designed something with the bakery's branding that can be easily located on a screen.

05 Testing

Pinpointing Improvements

For this app's usability tests I used Maze, which allowed me to conduct unmoderated usability tests with 14 users. I was able to utilize heat maps and success rates before users answered questions and gave feedback on their experience.

Some improvements made to the UI

  • Make sure users can return to the menu through one click after adding an item to their cart
  • Add labels to bottom menu to make it more accessible to users who are not familiar with tech iconography.
  • Switch the category slider and the bakery's news section to keep categories consistent with other pages.
  • Add additional states to buttons so users know they are successfully completing an action.
  • Keep "Add to Cart" button fixed to the botton to keep consistency and allow bakery to add additional information without users needing to scroll up to add to cart.

Next Steps
& Lessons Learned

The Business Owner Perspective

In future iterations I would recreate this app from the perspective of the business owner. I feel it would add added challenge that would also improve my design from the customer side.

Success Metrics

With a larger sample size during usability tests I would likely find many more things to improve on, including improved UI for accessibility and any missed opportunities due to the demographics of my participants.

Previous

Next