UX Case Study: The Taco Stand | E-Commerce Website
Discover
The problem
The Taco Stand is a local restaurant with locations in California and Florida. The restaurant is known for its authentic Mexican flavored tacos and inviting customer experience. However, their e-commerce website lacks ontology and taxonomy.
Placing an order on the Taco Stand website lacks user flow, due to its menu layout, broken features, and structure.
My role
- Josh and I conducted secondary and primary research to identify the market gap as well as discovering the user’s pain points, gains, and jobs.
- We brainstormed and researched ideas that would meet the needs of both the users and the business’ outcomes.
- We designed and conducted usability testing on our low-fi prototype and moved-forward to mid-fi wireframes.
The stakeholders’ business outcome
Although my teammate and I were unable to reach our stakeholder, one of the Taco Stand’s managers was kind enough to share with us that their highest level of expectations for the restaurant is for customers to keep coming in and enjoy what they have to offer and for the restaurant to grow to a larger market in south Florida.
Amid unpredictable situations such as COVID-19, the manager also requested recommendations and solutions for service speed, for days the restaurant receives large orders.
Project Timeline: 1 Week Sprint
Secondary Research
- The Manager informed us that there were no specials during the COVID-19 pandemic, aside from the usual Tuesday Taco special.
- The customers have increased since the pandemic and speed of service has decreased.
- The Taco Stand’s customers ordered their foods from walk-ins, the website, Doordash, and Grubhub.
Business Analysis
Josh and I were determined to add value to the Taco Stand Website. We first identified what design features were expected in the market by conducting a competitive feature comparison of our direct and indirect competitors.
Main design opportunities:
- Responsive Web Design
- COVID-19 Response Banner
- UI Cards for Menu Items
We were able to identify the Taco Stand’s position in the blue ocean. When building our market positioning chart, we agreed that The Taco Stand needed help with their news updates along with optimizing service convenience.
We then moved forward with performing a heuristic analysis to identify usability errors on the Taco Stand’s current website.
Main Insights:
- Navigation menu does not work
- Cluttered/Overcrowded menu- unable to differentiate items
- Pickup time is not clear
User Research
We needed to learn more about the users and their needs, so we created a survey that we shared on Reddit and Facebook.
Out of 55 responders, we discovered that 72% used their mobile phone to place food orders, 70% were unsatisfied with the wait time when placing their order, and 55% do not feel safe ordering food during COVID-19.
We also gathered some rich data from 5 interviewees who shared their thoughts on ordering food from restaurants. We learned that most were concerned about cost during COVID-19, they also used third party delivery services, some found the pick-up instructions from restaurants are unclear. Additionally, all 5 of our responders enjoy the Taco Stand but dislike their wait time.
“I don’t want to download more apps, if I don’t need to”
“I don’t entirely feel safe during pick-up, but more so delivery”
“After work, I hadn’t eaten anything and I started having a headache, I was working all day so I ordered food”
Define
After discovering the market gap, and gathering both quantitative and qualitative data, we were able to start defining our users’ pains, gains, and jobs to be done. While sorting our discoveries into our affinity map, we identified similarities in our survey and interview responder’s pains and gains. We then added those insights into our value proposition canvas, where we highlighted and understood the user’s problems, needs, and wants when placing a food order.
Based on our users’ group behaviors and mental model we were able to create a persona that represented our target audience.
According to the Tacos Stand manager, the customers are professional workers, locals, and tourists. Our data indicated that our users are between the age of 25 and 35, who enjoy dining with friends at restaurants.
With our Quinton Quarantino’s (the user) mental model in mind, we performed a task analysis on placing an order of taco using the current Taco Stand Website. We broke down the steps Quinton Quarantino took to place his order.
We then added the emotional scale of Quinton Quarantino on a journey map during each step he took to place his taco order. This helped us identify his three main pain points during his journey and highlight the opportunities for design.
The focused pain points:
- Information on the site is cluttered (cognitive overload)
- Unclear navigation
- Concerned about sanitization measures amidst of COVID-19
Problem Statements
Quinton Quanrantino needs to find a way to select an item on the menu without getting lost because the current menu layout is frustrating.
When checking out, Quinton Quanrantino needs to find a way to easily determine where the pick-up selector is located. He also cannot make any edits to his order without starting over.
Upon arriving at the restaurant, Quinton Quarantino needs to find a way to be sure where to stand for pick up or when to approach the counter because of unclear COVID-19 safety instructions.
Before brainstorming solutions for these statements, Josh and I questioned, How Might We…?
- Streamline and declutter the menu?
- Create clear navigation options during checkout without having to start over?
- Offer clear COVID-19 safety instructions to Quinton upon arriving at the restaurant to avoid confusion?
Now that we understood each problem, we ideated to come up with the most impactful solutions. We came up with several ideas, but we had to differentiate those that would add the most value to The Taco Stand’s website. We used the MOSCOW method to filter and prioritize our main design ideas.
Then we needed to revisit our value proposition canvas to understand what our users and stakeholders mainly valued in the restaurant. We had to find the best way to make The Taco Stand fit in our blue ocean, by identifying the solutions that would become gain creators and pain relievers, and fit the jobs to be done.
The Jobs to Be Done framework help us detect the key distinguishing feature that would solve for the main job. Our value proposition canvas helps us determine both job and feature stories. Our users needed clarity, efficiency, and safety when placing in order from the Taco Stand for them to feel confident about their purchase.
Job Story: When I’m navigating the menu, I want to easily and quickly identify the items so that I can order my desired dish without making mistakes, which will make me feel confident.
Feature Story: “When ordering my food, I want to be able to access the add-to-bag feature to customize my pick-up time and get instructions regarding my order.”
Our Minimum Viable Product
After filtering our ideas and going back to our value proposition canvas, we agreed that the best way to enhance our users’ experience on the Taco Stand was to bring a straightforward and seamless ordering experience to its customers.
The website will offer users a shopping cart and bag icon to help them keep track of their orders. This navigation process will promote a continuous flow that minimizes blockers.
When ordering food from the website, customers will receive specific updates about pick-up or delivery instructions. Given the COVID-19 crisis, these simple yet effective feature updates will amplify the customer experience.
Design
We had to create the interaction design that would help us plan for the prototypes.
We first planned for our users’ navigation experience, so my teammate and I created a user flow chart based on our users’ mental model and the business’ outcome. This information architecture would be the ideal happy path our user would take when placing in order from the Taco Stand’s website. This tool helped us identified the quickest route for our user to accomplish their goal on the website.
As you can see from the photo below, we added an easy-access button to the menu, an add-to-bag feature, and pick-up instructions.
Our user flow chart helped us identify and determine the ontology and taxonomy of the web to show the relationships between the pages. We were able to create a hierarchy structure and give purpose to each page.
Deliver
As you’ll see on our low fidelity sketches below, my teammate and I, agreed it would be best to add labels indicating the navigation of the user needs to take to place an order, we added defined CTAs, UI menu cards to distinguish items, and pick-up instructions at checkout, including COVID19 banners.
After creating our low-fi prototype, we conducted a usability test using Maze to ensure that the stakeholder would offer their customers a website that delivered usability, feasibility, and viability.
While our users tested our products, we observed their actions and listen to their thoughts throughout each step. Along with the heat-mapping feature from the Maze tool, these were the three main issues we needed to fix before moving forward with the mid-fi prototype.
- We needed to emphasize our Call to Action buttons
- Their selection needed to appear in the bag before checkout
- The COVID-19 banner on the review page was too big
Mid-Fi Prototype
Homepage
As you can see from the homepage screen, the user can click the “Oder Now” button to start his order. Below you also will see the COVID19 Instructions Banner clearly stating the measure that needs to be taken during this time.
Locations
After clicking on “Order Now”, the user will land on locations page were the restaurant spots would be listed with options for pick-up or delivery.
Menu
The user will then land on the menu page based on the location they’ve selected. There they will see cards listing items on the menu. They will select the item of their choice.
Customize
After selecting their desired dish, they will land on the customization page. There, the user can add or substitute the ingredients in their dish. At the bottom, they will find a CTA titled “Add to Bag”
Bag
In the Bag screen, you will see an option to add, remove, or duplicate the order. Below you will see an option to complete your order with other dishes. At the bottom of the page will be the total and checkout button, including tax and service fees.
Payment
Once the user clicks to check out, they will land on the payment page where they’ll review their order and select the time they would like to pick-up their order. Below we added a smaller COVID19 banner, as requested by our users. The bottom of the page will have the payment method and the submit button.
Confirmation
At the confirmation page, the user will see the total they’ve paid for their order, including the time of pickup, and the COVID19 instructions.
Success and Failure Metrics
We believe our website will be successful if:
- The stakeholder receives five-star reviews on Google and Yelp
- Customers feel safe ordering amidst COVID-19 concerns
- There’s an increase of traffic to the website due to ease of ordering
We believe our website will be a failure if:
- We receive as low as a 3-star (and below) reviews on Google and Yelp
- There’s an increased of bounce rates
- There’s a decrease of traffic on the website leading to restaurant closure
Takeaways
After completing this project and showing this prototype to people, these were our biggest takeaways:
- People are mobile-first consumers who need efficiency and expectations from their interactions if they are to become regular customers.
- To feel safe ordering food amidst the COVID-19 climate, customers need clear instructions.
- You are not your user. Interview, survey and observe your users, to build a solution of VALUE to them.
Want to learn more?
If you’d like to become an expert in UX Design, Design Thinking, UI Design, or another related design topic, then consider to take an online UX course from the Interaction Design Foundation. For example, Design Thinking, Become a UX Designer from Scratch, Conducting Usability Testing or User Research — Methods and Best Practices. Good luck on your learning journey!
Thank You
Thank you for taking the time to read my case study. I would appreciate any feedback. Let’s connect on Linkedin
