Coppell Deli
Enabling online sales channels
Overview
The Coppell Deli humbly began as a small grocer and deli in Coppell, TX in 1944. After an ownership change in 1989, it transformed into a diner-type eatery, serving old fashioned burgers and breakfast sandwiches. The Deli grabbed national attention when Dallas Cowboys football players began frequenting the Deli to fuel-up between training sessions during their winning streak in the 1990’s.
The Challenge
Given the global pandemic, the Coppell Deli is looking to drive online sales by making its website responsive and allowing users to directly access food pick-up and delivery options from its website.
Objectives: (01) Redesign Coppell Deli’s website to make it responsive; and (02) Extend coherent branding that aligns with the Deli’s current and/or desired clientele and customer experience.
Role: UX Researcher, UX/UI Designer, Interaction Designer
Duration: 3 weeks
Tools: Pencil + paper, Figma, Invision, Illustrator, Airtable, Trello, 850 Post-its + a Sharpie
This project and its content are used for educational purposes only.
Design Process
01
Empathize
02
Define
03
Ideate
04
Prototype
05
Test
06
UI Design
01
Empathize
I needed to learn more about the food and beverage (F&B) industry and its competitive environment, especially during the pandemic, to understand the user’s needs, motivations, frustrations, and goals regarding F&B consumption.
PROCESS: 01 Plan research | 02 Conduct research | 03 Synthesize findings
01 Plan research
RESEARCH PLAN
To guide my research efforts, I created a Research Plan.
Research goals
Determine the customer’s goals, needs, motivations and frustrations for food delivery
Determine the customer’s goals, needs, motivations and frustrations for food pick-up
Determine the characteristics of customers who dine-in vs ordering take-away vs using delivery
Methodologies
Secondary: Market research, Competitive analysis, Provisional personas
Primary: User interviews
02 Conduct research
MARKET RESEARCH
I conducted market research to generally understand the F&B industry, its impact on people, the pandemic’s impact on it, and its current trends.
Industry
TRENDS
Delivery, technology, and healthier options are trending
Eating high-protein snacks, instead of meals
More interest in understanding where the food is sourced from
Resurgence of familiar, classic flavors
Willingness to try more global cuisines
Sustainable innovation to curb climate crisis
Meat alternatives
More mindful spending and awareness of spending habits
Popularity of spicy food
Increasing interest in experiences
Interest in fat-filled foods that align with Keto diet
STATISTICS
63% - Would rather spend on an experience than on an item from a store
58% - More likely to incorporate restaurant-prepared items into their home-prepared meals than 2 years ago
52% - Agree purchasing takeout or delivery is essential to lifestyle
58% - More likely to order delivery than 2 years ago
56% - Likely to order alcoholic beverages if offered as part of a restaurant food delivery order
61% - More likely to pick up takeout food for dinner on the way home from work than 2 years ago
76% - More likely to visit a restaurant offering locally sourced food
68% - Would be likely to use house account if offered by a restaurant in their community
48% - Choose one restaurant over another based on availability of dining discounts on less busy week days
49% - Choose restaurant based on how much restaurant supports charitable activities and the local community
PANDEMIC IMPACT
2 out of 3 restaurant employees have lost their jobs
8+ million restaurant employees have been laid off or furloughed since the beginning of the pandemic outbreak in the US
The restaurant and foodservice industry lost +$80 billion in sales at the end of April 2020
The industry will sustain $240 billion in losses by the end of 2020
61% of operators say existing Federal relief won’t prevent more restaurant layoffs
4 in 10 restaurants are closed as of Mid-April 2020
The restaurant industry is typically the nation’s second largest creator of seasonal jobs during the summer months – ranking only behind the construction industry
Demographics
FAST FOOD
36.6% of adults consumed fast food on a given day
Adult consumed less fast food with age: 44.9% aged 20–39, 37.7% aged 40–59, and 24.1% aged 60 & over
Higher percentage of adult men (37.9%) than women (35.4%) consumed fast food
Fast food consumption was higher among non-Hispanic black adults (42.4%) compared with non-Hispanic white (37.6%), non-Hispanic Asian (30.6%), and Hispanic (35.5%)
Adult fast food consumption increased with increasing family income: 31.7% of lower-income, 36.4% of middle-income, and 42.0% of higher-income
Adults most commonly consumed fast food during lunch (43.7%) and dinner (42.0%), followed by breakfast (22.7%) and snacks (22.6%)
Higher percentage of men (48.3%) than women (39.1%) consumed fast food during lunch, while a higher percentage of women (25.7%) than men (19.5%) consumed fast food as snacks
Fast Food Consumption Demographic Data (U.S., 2013 - 2016)
COPPELL, TX
Population: 41,290
Median age: 38
Education: 71.5% Associates degree or higher
Average home value increase: $12,127
Number of households: 15,212
Median Household Income: $127,934
Median home value: $401,558
Unemployment rate: 3.3%
Gender
Male: 48.8%
Female: 51.2%
Race (largest percentages)
White (Not Hispanic/Latino (NHL)): 55.09%
White (Hispanic/Latino (HL)): 8.11%
Black or African American (NHL): 5.33%
Black or African American (HL): .11%
Asian (NHL): 24.22%
Asian (HL): .03%
Marital status
Never married: 23.8%
Married: 63%
Separated, Divorced, or widowed: 13.2%
Coppell, TX Demographic Data (2019)
COMPETITIVE ANALYSIS
The F&B industry is highly saturated and extremely competitive, so I had to understand the Coppell Deli’s competitors. I selected well-known local, national, and global establishments and/chains serving similar food and consumer bases.
PROVISIONAL PERSONAS
Based on market research and competitor analysis, I crafted provisional personas who may be the Deli’s patrons, which helped me identify participants to further evaluate during user interviews.
The Young Family
Parents ages 30 -45; children ages 6 - 18; active; social; sporty; enjoys trying a variety of experiences; tech-savvy
GOALS
To grab food that is quick
To consume food that all family members can enjoy
To have an easy dining experience
To keep costs low
PAINS
Finding a venue to fit the family
Waiting in lines
Maintaining control of the kids
Be able to search for available venues on the go
The Classic
Ages 50 and above; return customer for many years; nostalgic; has own idea of comfort food
GOALS
To enjoy food nostalgia
To stay healthy
To eat familiar foods
To enjoy the social aspects of returning to an old restaurant
PAINS
Stuck to old habits
Has to watch what he/she consumes
Finding comfortable seating that allows him/her to take their time
USER INTERVIEWS
I conducted remote and in-person 1-on-1 interviews with five participants, who are/were Coppell Deli customers, to ask about their in-person and online food purchasing experiences, generally and with the Coppell Deli.
Participants
Ages: 18 - 50
Gender: 2 Male; 3 Female
Race: 3 Caucasian; 1 African American; 1 Unknown
Occupation: 4 Working professionals; 1 Student
Marital status: 2 Married; 2 Single; 1 “Coupled”
Dependents: 1 - Has 2; 3 - None; 1 - Unsure
Live or lived in Coppell: 3 Yes; 2 No (but live nearby)
Recruitment: Facebook, Yelp reviews, and walking in a Coppell neighborhood
03 Synthesize findings
With all my observations, I needed to organize and analyze them and find a way to effectively communicate my research findings to relevant stakeholders.
EMPATHY MAP
With one observation per sticky note, I sorted (and resorted) similar sticky notes into themes to create an Empathy Map. Then, I selected the largest themes, each from which I distilled an insight and then extracted a need. Below are the most prominent insights and needs.
Insights
Users want good customer service
Users want reasonable pricing
Users tend to decide where to eat based on the type of food that interests them
Users want to be convinced to visit a restaurant for the first time
Needs
Users need to be treated in a friendly manner regularly
Users need to understand the value they receive for the money they pay
Users need to know what type of food the restaurant is known for
Users need to hear recommendations about the restaurant from trusted sources
PERSONA
I extracted user needs, motivations, frustrations, and goals regarding F&B consumption from my Empathy Map and consolidated all my research findings into a persona to help communicate my research, build empathy with relevant stakeholders, and inform my design decisions for the remainder of the process.
The Whitmans
“Anything to entertain kids will help the parents.”
THE YOUNG FAMILY
Ages: 6 - 45
Race: Caucasian
Gender: 2 Female; 2 Male
Location: Coppell, TX
Occupation: Working professionals
Household: Married with 2 children
Goals
To consume food that everyone can enjoy
To have an easy dining experience
To have an affordable meal
To spend quality time with people
Needs
To know what type of food the restaurant is known for
To understand the value they receive for the money they pay
To be treated in a friendly manner regularly
To be convinced to visit a restaurant for the first time
Frustrations
Finding a venue that can comfortably fit a group of people
Keeping the kids entertained
Receiving the wrong order
Finding a venue with a convenient location
Motivations
To satisfy a craving for a certain type of food
To enjoy good food
Don't want to cook at home
Want different variety of food
02
Define
After learning about F&B consumption issues, I needed to frame them in different ways to promote ideation.
PROCESS: 01 Frame from user perspective | 02 Frame for problem solving
01 Frame from user perspective
POV STATEMENTS
I crafted point of view statements (POV) to frame the problem from the user’s perspective by structuring insights and needs from my Empathy Map in the following format: User [need] because [insight].
The user needs to be treated in a friendly manner regularly because the user wants good customer service.
The user needs to understand the value he/she receives for the money he/she pays because the user wants reasonable pricing.
The user needs to know what type of food the restaurant is known for because the user tends to decide where to eat based on the type of food that interests them.
02 Frame for problem solving
HMW QUESTIONS
I fashioned a How Might We (HMW) question for each POV statement to help frame the problem in a question that enables brainstorming for many solutions.
How might we provide customers with a positive experience?
How might we clearly show the value of what is being offered to justify the price?
How might we clearly communicate to users the restaurant’s most well-known menu items?
How might we leverage trusted sources to recommend a restaurant?
03
Ideate
After framing the issues into questions, I could begin thinking of ways the responsive website could provide solutions.
PROCESS: 01 Generate ideas | 02 Strategize | 03 Build information architecture | 04 Design for interaction | 05 Sketch
01 Generate ideas
BRAINSTORMING
I began ideation by brainstorming as many ideas as I could for each HMW question.
Method
I used Mind-mapping for 2 rounds (3 mins/round) for each HMW question
Round 1: Thought of as many complete ideas as possible
Round 2: Add more ideas or build on existing ones
Discoveries
I discovered I was not effectively expanding on ideas since my:
Ideas were too complete
Ideas were already implemented by owner or competitors
Pivot
As a result, I changed my approach by:
Adding single thoughts or incomplete ideas to existing mind maps
Connecting similar ideas to identify strong patterns
The mindmap for HMW question 1 after pivoting my approach
02 Strategize
PRODUCT GOALS VENN DIAGRAM
To define the product goals, I had to identify different stakeholders’ goals, see how they align, and understand their impact on my design decisions. To identify stakeholder goals:
Business goals: I contacted a person, who has close relations to the Deli to help identify their business goals.
User goals: I pulled goals from the Persona.
Technical goals: I thought of goals developers may have for the mobile app.
After plotting all the goals in a Venn Diagram, I could identify the aligned goals (in the middle) that I would use to direct my design decisions going forward in the process.
PRODUCT FEATURE ROADMAP
I created a Product Feature Roadmap to help prioritize product features that best address the project objectives, the HMW questions, and products goals.
The Process
01 Research features competitors have on their websites
02 Identify how features address product goals
03 Determine effort required to implement features
04 Estimate feature’s effectiveness in meeting product goals, project objectives, and/or user motivations, frustrations, and needs
05 Prioritize features to identify which feature(s) to design first
03 Build information architecture
SITEMAP
I created a Sitemap to incorporate features and content prioritized from the Product Road Map into the website’s information architecture. Doing so helped me think through navigation, content grouping, and placement of content, functions, or features.
The Process
01 Compare competitor sitemaps
02 Reference aligned product goals and user needs, motivations, and frustrations
04 Design for interaction
To validate the information architecture, determine content placement, and understand how features might work, I thought about how a user might interact with the website to accomplish major tasks.
UI REQUIREMENTS DOCUMENT
While referring to the Product Feature Roadmap, Sitemap, and Product Goals, I created a UI Requirements Document to document and communicate which pages, content, features, and functions users might interact with: To purchase food on the restaurant’s website for pick-up.
TASK FLOWS
I mapped task flows to determine which pages, content, features and functions users would interact with and how they would interact with them to accomplish the task: To purchase a sandwich on the website for pick-up.
USER FLOWS
To help determine content and feature placement that assists users with decision-making and task completion, I mapped user flows for the Persona and a New Customer after selecting their tasks and noting my assumptions about them.
Persona
Task: Persona is a return customer who wants to order a burger online for pick-up
Assumptions:
Knows exactly what he/she wants to order
Has never ordered online from the restaurant
Originally planned to call-in the order but needed the phone number
Prefers this burger over others in town
New Customer
Task: New customer wants to order a burger for delivery
Assumptions:
Saw restaurant's website in a Google search for best burgers in town
Has heard of the restaurant before
Doesn't know exactly what he/she wants to order
Chooses delivery because he/she has never been there, and the location looks a little out of the way
Wants to try a new place
An excerpt of the beginning of the user flows, where the New Customer has to make more decisions upfront.
05 Sketch
Sketching helped me visualize screen layouts, determine product feature placement, and apply information architecture.
LOW-FIDELITY SKETCHES
Using the UI Requirements Document, Task Flows, and User Flows as guides, I sketched the main webpages involved in major tasks while selecting common layouts and patterns from competitor websites that best meet the product goals or Persona’s needs.
04
Prototype
I prepared a mid-fidelity desktop website prototype to quickly test its usability and validate its information architecture, hoping to gather more accurate and honest testing findings without the distraction of user interface (UI) design.
PROCESS: 01 Create mid-fidelity wireframes | 02 Build prototype
01 Create mid-fidelity wireframes
MID-FIDELITY WIREFRAMES
To evaluate the website’s overall tone and begin building its layout and design, I created mid-fidelity wireframes in Figma.
The Process
01 Identify main pages involved in major tasks on the website
02 Create grayscale elements and components on the Homepage
03 Reference low-fidelity sketches and Sitemap to place elements and components created on the Homepage across other major pages to create a consistent design
Mid-fidelity desktop wireframes for the Homepage, About page, and Menu page
RESPONSIVE WIREFRAMES
To meet the project objective, I took a “mobile-first” and “content-first” design approach and iterated my overall design a few times across all webpages to ensure content responds appropriately to different screen sizes.
Desktop, tablet, and mobile mid-fidelity wireframes for the Homepage
02 Build prototype
MID-FIDELITY PROTOTYPE
First, I identified the main tasks users might want to accomplish on the website to direct which task flows to test. Then, gathering my mid-fidelity wireframes, I built more mid-fidelity wireframes to flesh out these main task flows and added interactions in Invision.
Additional mid-fidelity wireframes and screens I created to complete the prototype
05
Test
Testing the website’s mid-fidelity prototype to evaluate its usability and validate its information architecture would inform improvements before applying UI design.
PROCESS: 01 Decide what to test | 02 Conduct usability tests | 03 Synthesize findings | 04 Revise prototype
01 Decide what to test
USABILITY TEST PLAN
I wrote a Usability Test Plan to guide my usability testing efforts.
Method
Remote Think-Aloud usability testing for Coppell Deli’s mid-fidelity desktop website prototype in Invision
Tasks
Find out what their current operating hours are given the current situation (i.e., COVID-19)
Order a popular item online for pick-up
Subscribe to their email list
02 Conduct usability tests
USABILITY TEST FINDINGS
Using my Usability Test Plan and my mid-fidelity prototype, I conducted usability testing with five participants, who shared their screens while completing the selected tasks.
Participants
Ages: 31 - 45
Gender: 3 Female, 2 Male
Racial Identity: 3 Caucasian, 1 Persian, 1 Asian
Marital status: 3 Married, 2 Single
Dependents: 1 has 3 dependents; 4 None
Occupation: All working professionals in a variety of industries
Location: 4 Dallas, TX; 1 Los Angeles, CA
All lived in Dallas, TX at some point
Traits:
3 Coppell Deli patrons
All previously purchased food online
Average completion time: 6.7 mins
Test metrics
Test Completion Rate: 100% of the users completed all three tasks
Error-free Rate: 94% of the tasks were completed without errors
03 Synthesize findings
AFFINITY MAP
I created an Affinity Map to organize and analyze my testing observations, enabling me to identify the users’ main frustrations and generate and prioritize actionable revisions to improve the website’s usability.
The Process
01 Write one observation per sticky note
02 Group (and regroup) sticky notes into themes
03 Draw insights from largest themes that focus on user frustrations
04 Think of specific, actionable improvement for each insight
05 Prioritize revisions based on the effort required to make the revision and the impact the revision would have on the website’s usability
Below are the insights and correlating revisions in order of priority.
PRIORITY
High
Insight: Users would rather not sign in to complete the purchasing process
Improvement: Make the Guest Checkout CTA more visible on all screen resolutions
Medium
Insight: Users want to click on images of food on the Menu page
Improvement: Allow users to add an item to their cart by clicking on the image in the Menu page
Low
Insight: Users do not know where to begin when signing up for email subscriptions
Improvement: Create a pop-up window when users enter the website to prompt users to subscribe without looking for it
04 Revise prototype
I revised the mid-fidelity wireframes based on the effort and impact of the revision.
HIGH-PRIORITY REVISIONS
I only revised the prototype for the high-priority revision because it had the largest impact in terms of improving the website’s usability and required low effort to update.
06
UI Design
To meet product goals and project objectives, I had to redesign the Coppell Deli’s branding concept and the website’s user interface.
PROCESS: 01 Create the brand | 02 Apply UI | 03 Create high-fidelity prototype
01 Create the brand
First, I defined the Coppell Deli’s brand by undergoing the following branding process to identify its brand attributes:
01 Reference the current website
02 Watch videos of the owner to assess his character and personality
03 Spoke with my contact, who has relations with the Coppell Deli, to understand how the community perceives the Coppell Deli
LOGO & STYLE TILE
Through the branding process, I identified the following brand attributes for the Coppell Deli: familiar, exuberant, classic, and enduring.
Using these attributes and referencing competitors, I simplified the Deli’s existing logo to convey its main attraction (i.e., burgers) while ensuring it is scalable, readable, and clear. Then, I selected hues from their current website to create a simplified color palette and decided slab serif typeface headings paired with san serif typeface would ensure legibility.
Logo idea sketches and iterations based on emblem type logos, letter marks, and word marks commonly used by diners
02 Apply UI
After establishing a clear branding concept, I could begin applying consistent design across all webpages.
UI KIT
To ensure consistent designs going forward, I applied the branding concept to repeating elements, components, and templates and consolidated them into a UI Kit.
HIGH-FIDELITY WIREFRAMES
Using my UI Kit, I applied branded elements and components to all mid-fidelity wireframes and refined content and imagery to produce high-fidelity wireframes.
HIGH-FIDELITY RESPONSIVE WIREFRAMES
To meet project objectives, I used branded elements and components from my desktop wireframes to create high-fidelity responsive wireframes, which helped me assess how the design responds across different screen sizes.
High-fidelity desktop, tablet, and mobile wireframes for the Homepage
03 Create high-fidelity prototype
HIGH-FIDELITY PROTOTYPE
To assist stakeholders visualize and experience the website, I built a high-fidelity prototype by creating additional screens to flesh out previously selected tasks and connecting them through interactions in Invision.
Conclusion
After assisting the Coppell Deli with redesigning their website and creating a more cohesive branding concept, here is what I learned:
Prioritizing everything is prioritizing nothing. During ideation, I wanted to include nearly everything every competitor had on their website, but realistically, an MVP would not include everything. I had to choose more wisely (see #2 below).
Always keep the user in mind. This couldn’t be said enough or more often. I had a minor misstep during ideation when I focused too much on design patterns and competitors features. Maintaining a clear understanding of user needs, frustrations, goals, and motivations is the key to useful and helpful design.
Remote recruitment is rough. It was even more difficult for the fact that I had never been to the Coppell Deli. Without personal experience, I scoured the web and hit a few road blocks, but the process stretched the ways I thought about recruiting.
Next steps
Hand-off current revised version of the prototype to developers using Figma’s spec tool
Build wireframes for additional menu sections
Build user account functionality and screens
Create more screens for editing orders within the ordering wizard
Monitor for and adapt to changes in the market and user needs, motivations, goals and frustrations
OTHER CASE STUDIES
Google Aria
Assisting caregivers manage asthma
PayPal
Improving consumers’ financial well-being
Kaus
Boosting insurance sales online