Small businesses often need to compete with large ordering apps that often upcharge the customer and take large cuts of profit from the businesses.
Many ordering apps take a commision fee of 20-30% and is not sustainable to small businesses(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.
I did a competitive analysis with bakeries local to my area. I went to these bakeries in person and quickly observed clients, researched the business's approach to online ordering and how they reached their customer base.
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.
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, but I recognize this also could have been due to nervousness of being observed.
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, 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.
All 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.
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.
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.
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.
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.
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.
.jpg)
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 screens 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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
In future iterations I would recreate this app from the perspective of the business owner. I feel it would add another challenge that would also improve my design from the customer side.
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.
I have a passion for design and I cannot wait for my next project. You can email me directly at mcheco.tung@gmail.com or find me on one of the sites below.
