Creating a more equitable ordering experience
Creating a more equitable ordering experience
Club Club is a (fictitious) sandwich shop located in New York City. Despite having been a neighborhood staple for decades, they've noticed a drop in order volume in recent years. A company conducted customer survey indicated that this drop could be due to a lack of online presence and convenient ordering options.
In 2019, the company partnered with multiple delivery apps such as Uber Eats and Grubhub, but the owner worries that the associated fees with these services are still limiting their potential customer base
Club Club believes that by offering potential customers multiple avenues of ordering online they can increase their sales and their market share
Busy people need a way to order food online in a way that is both efficient and leaves them feeling that their individual needs are being considered
• User Research
• Design Strategy
• Wireframing
• Prototyping
• Usability Testing• UI Design
March 2021 - April 2021
• Figma
• Photoshop
• Illustrator
• Excel
• Miro
Before I could tackle the problem, I needed to understand the users that I would be designing for. Considering the prevalence of 3rd party delivery apps, I chose to start by learning why a potential user would choose to use a restaurant's app as opposed to these services.
I conducted a series of remote interviews over Zoom and Discord, collecting both quantitative and qualitative information, focusing primarily on the reasons that people order out and what goes into their decision to use either a restaurant’s native app or delivery apps such as UberEats or GrubHub.
How old are you?
How often do you order delivery/takeout online?
Do you use 3rd party delivery apps (Uber Eats, Grubhub, etc) or do you order directly from restaurant websites/apps?
• Can you describe your overall feelings about ordering takeout/delivery online?
• If you have ever ordered takeout/delivery online for reasons unrelated to the COVID19 pandemic, what were they?
• If you have experience using both 3rd party delivery apps and ordering directly from restaurant websites/apps, is there anything you like MORE about ordering directly from the restaurant?
• Is there anything you like LESS about ordering directly from restaurant websites/apps as opposed to delivery apps?
• Can you think of a particular experience with a restaurant website/app that stood out as being better than most?
• Can you recall an experience with a restaurant website/app that left you frustrated?
"I don't like ordering online because I have a severe food allergy and my special requests are always ignored. I usually call in since that's the only way to make sure they listen to me."
"I usually order online when i'm working late and don't want to worry about coming home and cooking something."
"I use delivery apps because they tend to be more optimized for mobile [than restaurant websites]"
In order to better understand the intent behind individual participant's statements, I created an empathy map for each of them. By grouping key quotes from the interviews and analyzing them in this way, I was able to gain a deeper understanding of the reasons a participant might have answered a question in a given way.
User personas were constructed to help put me in the shoes of potential users. Based on the information from the interviews, I created two individuals with differing priorities; one is a busy professional who prioritizes speed and convenience of ordering, and the other is someone with unique dietary needs who values special attention being paid to their order.
I charted out the steps my personas might take while ordering a sandwich in a set of journey maps. At each step of the process I documented what tasks they might perform and how they might feel while doing them. By breaking down the experience in this way I was able to create strategies for improvement on a granular level.
Once I had pain points and priorities established for my users, I was able to analyze existing competitors to see how they might deal with some them. I selected a mix of competitors local to our fictional company and national chains. I took notes on how well they performed in each category and rated them from good to poor. If a competitor did not have a dedicated mobile app, I analyzed their website instead.
I performed a number of rapid ideation exercises, including "Crazy 8's" and "How Might We's" to inform the design of a user flow. With the insights gained from these exercises, I constructed a series of user flows and a first draft of a sitemap.
Over the course of developing the user journey, I realized that many users may find it annoying to be forced to log in when it isn't necessary. With this in mind I designed the prototype so that users wouldn't be forced to enter any information unless it was required to perform a function
With the structure of the prototype starting to take shape, I made a list of elements that would need to be included and on each of the key screens and began sketching them out on paper.
I imported my wireframes into Figma and used them as a basis for creating a low fidelity prototype of the app. Below are a few of the features I included in the first iteration
Considering users with severe food allergies, I designed an item customization screen that features a set of icons to alert users to potential allergens. This list would be updated as the user customizes their item and would reflect the changes they make in real time. Ideally, such a feature would cut down significantly on the number of special requests that this segment of the user base would need to make, since they could see exactly what ingredients might conflict with their needs and make changes accordingly.
Most participants in the initial user research mentioned ordering speed and efficiency being a priority in some capacity. To address this, I included a system for repeating previous orders. Users can review items they've ordered in the past and quickly select an item that's already customized to their liking.
I gathered 5 individuals for a series of in-person and remote moderated usability studies. I gave each participant prompts for navigating through the app and observed their actions and the comments they made, recording them in a spreadsheet. I compared these results against other metrics, including time to completion and the fall off rate.
01. 3 out of 5 participants said that the "past orders" feature should include more information about previous orders
02. 2 out of 5 participants thought that there should be a quick order option in the “past orders” section.
03. 4 out of 5 participants said that the word "menu" in the hamburger menu should use different verbiage than the item list
Using the data I gathered in the previous round of testing, I made edits to the low fidelity prototype and started developing a high fidelity one. First I designed a mockup of a single screen which informed the design of the rest of the second version of the prototype.
The screen that underwent the most changes between iterations was the previous orders page. In the first round of testing, users complained that there wasn't enough information about previous orders and that they expected to see functionality for quickly re-ordering items. With the second round of testing, users liked the improvements but now complained that the screen was too crowded. The page was re-designed a second time to efficiently display all of the required information but not be as overwhelming to users.
One user commented that they're a vegetarian, and that they didn't see a reason that the allergy icons couldn't support unique diets such as theirs in addition to allergens. This prompted me to broaden the group of users supported by this section by including icons for meat and other animal products.
After applying the data gathered from the second round of user testing, the prototype was finally finished. It aims to create an equitable, transparent ordering experience that can be fast and inclusive to all users.
Outside of the scope of this project are several secondary features, such as a informational pages and a rewards system, that I would like to continue developing. Additionally, one final round of usability testing would be beneficial before a handoff were to occur.
This project taught me that designing for edge cases can create a unique experience that everyday users can still see a great deal of benefit from. It is my hope that more restaurants will adopt a similar approach to make sure that the needs of their customer bases are adequately cared for.
Shoot me an email and lets work together!