UX Case Study: Local E-Commerce
Implemented by Ironhack Miami
In this case study I will showcase my groups research, insights, and ideation of optimizing a locally owned restaurants website.
Project contributors: Robert Zamora & Stephanie Abanto
Introduction
Local shops often suffer a decrease in their annual sales due to increase in online purchases through online options like Amazon or eBay. This can affect local economies and the families of those local businesses.
We want to help local shops improve their online presence to be more competitive in the market.
Brief
In this project, we were given the prompt to design a website for a local business; focusing our efforts on delivering a great shopping experience for our users.
Deliverables:
- Target Device: Desktop
- Sitemap
- Competitive Analysis
- Use case
- Card Sorting Experiment
- Annotated User Flow (Happy Path)
- Interactive Prototype
- Mid-fi Wireframes
- Test Results
- Wireframes Iterations
Client
Coyo Taco is an established fast casual Mexican Street food restaurant, that first made it presence known 6 years ago in Miami’s Wynwood Arts District. Though Coyo may be a household name to some, upon our research we discovered they need some improvements to their website.
We hope the solutions we have created will cause a boost in profit and brand recognition to this unique Miami staple.
Problem
Coyo already has a website that was created when the restaurant first opened, but it seems to have barely been touched since then.
We liked the overall feeling of the website, such as the promotional photos and color palette that remained consistent throughout. As we dug deeper, we noticed poorly planned information architecture throughout different screens. Oversized images crowded the screen, while the information you’d be looking for is pushed to the side.
The website didn’t match the level of success that Coyo had achieved in the past 6 years.
Research
Though we assessed some problems ourselves with the website, we still needed to go deeper in order discover problems that we couldn’t find just by looking at their page.
Stakeholder Interviews
We interviewed stakeholders to find out what their opinions on the website were and what changes they would like to see. Making sure to gain some insight from both the front and back of the house, we spoke to Katrina, Coyo’s Operations System Manager, and Dylan, a former Floor supervisor.
Takeaways:
- Currently they use third party apps for pick up and delivery features, and they wanted to move to an in-house POS. This has cause grievances in terms of service, and food quality upon delivery.
- Greater need for delivery and pick-up options due current health concerns.
- Large lines deter possible patrons.
- Recently a catering manager has been hired in order to refine the catering end of the business,
User Interviews & Market Research
Coyo’s user base is relatively young, due in part to their successful bar and late night hours.
Interviewing 3 customers of Coyo, they explained that the food is on the more expensive side, but they are willing to pay more since the quality is so good. Additionally, some customers have been discouraged in the past, by the long lines that are common at each location.
Market research showed similar experiences:
Persona
Taking factors from the stakeholder, user, and market research, we created a primary user persona.
Hungry Hannah is our ideal user. She enjoys eating, going out with friends, and has connections for possible events. Hannah is very busy due to her work at a local startup, so managing her time is very important to her; especially when it comes to eating.
User Journey
We also constructed a future user journey in which she would be utilizing Coyo’s order and delivery system, as well as showcasing possible opportunities to explore other aspects of the website.
Business & Competitor Analysis
With Stakeholder and User research obtained, we began an analysis of the business itself. Breaking down Coyo on a SWOT analysis gave us direction in to where Coyo stands for it’s stakeholders and users.
There are 3 direct competitors with Coyo Taco: Taquiza, Bodega, and The Taco Stand. Each restaurant offers a fast casual, street taco dining experience.
In order to differentiate Coyo against their competition we organized both a Feature and Brand Comparison charts.
Based on the above business and competitor analysis, projected where Coyo Taco stood in the market and where it wanted to go.
We currently see Coyo as a combination of Trendy and Modern restaurant. And looking at our research we believe that Coyo is moving in to a more Modern and Casual positioning in the market. Though it still wants to maintain some semblance of “Trendy” with its bar and late night hours.
We believe if we optimize the delivery/ pick up system, and provide a good platform to back their catering venture. We’ll be able to achieve this positioning and make them stand out more amongst their competitors.
Card Sorting
With the data we obtained, we began to establish the content and the information architecture of the website.
Taking into consideration what the website already has and the additions that we discussed with the stakeholders; we came up with 26 items to be used in a card sort.
We obtained data from 20 participants, and with it we developed the site map you see here.
Use Case
In this Use Case we have Hannah ordering lunch with her co workers. In the ideal flow, she visits the Coyo Taco webpage, browses the online menu, select her food items based on her findings, tracks the foods progress, and goes to pick up her food based the tracking feature.
Alternative flows to take into account were for forgetting to order something and selecting the wrong restaurant location.
Task Analysis & User Flow
From the scenario in the use case, we constructed two task analysis that Hannah will be going through when using the website.
We then streamlined the two tasks in to this user flow. Illustrating Hannah’s progress through the website; with the points of action and decision making.
Ideation
Going in to ideation, we analysis all that we gathered and broke pieces down using the Moscow Method.
We sketched out a couple of screens to start visualizing what Hannah would be experiencing as she navigates the website. Pulling from the information we already had from the research and drawing inspiration based on functions for currently existing products.
WireFrames
Lo-Fidelity
For the Lo-fidelity wireframes, we focused on making sure information made sense on each screen, and if pages are easy to navigate.
With a prototype created in Invision, interviewed 5 participants and instructed them several tasks to test the flow and information architecture.
Takeaways:
- Issues locating merchandise options
- 3 out of the 5 interviewees did not recognize a home button on several screens
- Button locations and button names on the catering page were missed which caused longer than expected timeframes.
- Shopping cart function felt “vague”
Mid-Fidelity
With the data from the low-fidelity tests and interviews we applied them to the Mid-Fidelity wireframes.
We created another prototype using the mid- fidelity wireframes in Invision.
Insights
Taking in to account the modifications we learned from the lo-fi tests, we conducted another round of testing with the mid-fidelity tests and gain positive results.
80- 85% of participants accomplished tasks of order and delivery; with the same percentage accomplishing the catering request task. However, we still received feedback in regards to the information architecture on items such as social media and merchandise options.
Next Steps
For next steps we’ll make modifications by placing social media buttons on the footers of each screen, and move the social media feed to the main home page. We’ll also plan to incorporate an interactive menu for the catering business and even add a newsletter feature to send emails for upcoming Coyo Taco events!
From there we’ll move on High-Fidelity testing and mock ups of across other platforms.
Final Thoughts
Both I and Stephanie agreed that this was a challenging second project to take on, but we feel that we’ve met and even exceeded expectations. Working with an actual client provided great perspective on what actually occurs on the business end, and how it integrates with the UX/ UI design process.
We’re both looking forward to whats next to come!
