Good Sandwich Co. app
UX + UI / Visual design + illustration / Interaction design
A local sandwich shop that strives to bring new meaning to “fast casual” by offering its customers a wholesome, worry-free experience.
Project Duration
April to July 2021
Nine weeks
skills
UX + UI
Visual design + illustration
Interaction design
tool
Figma
Overview
The problem: Annapolis, Maryland locals often feel that they have to choose between fast (and cheap) and healthy (and expensive) restaurant options. They would like the ability to fully customize a meal with a variety of fresh ingredients, and for more places to provide the option of scheduled pickup (in addition to delivery) to suit their busy and unpredictable lifestyles.
The goal: To design a food pickup and delivery app for Good Sandwich Co., a sandwich shop that provides fast, flexible options to its customers, but doesn’t compromise on the quality of its ingredients or service.
Discover
Researching user pain points: I conducted interviews and created empathy maps to gain insight into user needs and identify four key user pain points.
Time: Working adults are often too busy to cook meals.
Limited options: Competing restaurants don’t include the ability to completely build a sandwich from scratch or customize ingredients in a featured sandwich.
Unhealthy options: The inability to completely customize sandwiches sometimes leads to less healthy options.
Flexibility: While many want the ease of delivery, people (particularly locals) want the option of picking up their order to enjoy in a nearby park or in the car.
During my research, I identified working adults with busy, often unpredictable schedules as a primary user group. This target user group prefers a quick and simple restaurant ordering experience but would still like the option of a healthy meal.
I also learned that these users want the option to customize almost anything on the menu and to order pickup online and by phone. The solution was clear: an app that balances simplicity and efficiency with a large variety of menu options.
Market research: To construct a solid foundation for Good Sandwich Co., I ventured out to see what three competitors (Sweetgreen, Mason’s Famous Lobster Rolls, and Capriotti’s Sandwich Shop) were already doing and what user goals they weren’t meeting. I evaluated features I deemed important based on user feedback and identified which ones Good Sandwich Co. could capitalize on to have the advantage over other applications.
Although the majority of the features between competitors were very similar, the main differences that I noticed were:
Complete vs limited customization options
Easily vs hardly accessible
Simplified interactions vs too many screens and complex user flow
Minimalistic and welcoming vs distracting and disconnected interface
Define
User personas: To intimately understand the needs and goals of my target audience and to help prioritize content decisions, I synthesized my data and created user personas. Denise is a busy working adult who needs a fast and simple way to order healthy meals because they’re often on the go but want to maintain a healthy lifestyle.
Mapping Denise’s user journey revealed how helpful it would be for users to have access to a custom app from Good Sandwich Co.
Ideate
Crazy Eights: I did a quick ideation exercise to come up with ideas for addressing gaps and opportunities I identified in the competitive analysis. I focused on ways to engage the user, simplify the ordering process, and foster customer loyalty.
Prototype
Wireframes: I drafted several iterations of each app’s screen on paper to ensure that elements I included in the digital wireframes were well suited to address user pain points. For the home screen, I prioritized useful information that would inform a user about ordering and wait time upfront and spotlighted a clear path to the ordering process.
As the initial design phase continued, I confirmed that screen designs were based on feedback and insights from the user research I conducted.
Order queue and estimated wait time are highlighted and elevated on the page.
Tabs provide clear, easy options for users to browse the daily menu or to make their own sandwich.
Order method (pick up or delivery) is quick and easy to modify based on user preferences.
Users can opt-in to receive push notifications if there are delays or changes in their order time.
Lo-fi prototype: The low-fidelity prototype connected the primary user flow of building and ordering a custom sandwich so I could test the prototype in a usability study.
Test
Usability studies: I conducted two rounds of moderated usability studies that helped guide and refine the designs. The first usability study revealed confusion with the two menu tabs and UI for each item’s customization. To streamline the ordering flow, I consolidated ”Today’s menu” and “Build your own” to a single “Full menu” (1).
I also designed a consistent UI pattern (2) for ingredient customization of all sandwiches.
Feedback from the second usability study included the need for a reminder of the order details once it was placed. I redesigned the confirmation screen to include a message recalling the user’s pickup/delivery time (3).
Final product
The final high-fidelity prototype presented polished user flows for ordering a sandwich from Good Sandwich Co., either from the user’s selection of specialty sandwiches or customizing from scratch. It also met user needs for confirming order details and customizing push notifications about their order.
High-fidelity prototype (app)
Final screens (app)
Accessibility considerations
Provided access to users who may be vision impaired through the implementation of a high-contrast color palette (meets WCAG AAA standards).
Included a progress indicator for checkout so users are always aware of which step they are on.
Created detailed illustrations and used detailed descriptions for sandwiches and toppings to help all users better understand the designs.
Takeaways and next steps
The design life cycle of the Good Sandwich Co. app taught me that initial ideas and impressions are only the beginning of the process. User research, interviews, and usability studies provide invaluable feedback that influences and drives each iteration of an app’s design.
“It’s not often you see a fast casual restaurant put such a heavy focus on health. GSC really hits the mark! I love how I can build a sandwich with fresh, local ingredients, and it’s ready when I need it.”
As an Annapolis foodie who was always looking to support my local restaurant community, designing and building Good Sandwich Co. was an inspired idea that came to life. The app makes users feel like Good Sandwich Co. really considers their needs, motivations, and preferences, and thinks about how to meet them at the table.