Copycats
Case Study
Project Overview
Copycats is a website featuring copycat videos and recipes from top rated restaurants nationwide. Copycats is designed to help foodies recreate their favorite restaurant meals at home to save time and money. The Grocery List feature also helps users stay organized and buy exactly what they need to recreate their meals. Users save time not having to drive to the restaurants and money by cooking themselves.
The Problem:
Health conscious foodies are wanting to save time and money by recreating their favorite restaurant meals at home and have the ability to tailor their meals.
The Goal:
Design a website for Copycats that allows users to easily cook along while watching copycat cooking videos.
My Role:
UX/UI designer and researcher, from conception to final prototype
Responsibilities:
Conducting interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, and iterating on designs.
User Research Summary
I conducted interviews and created empathy maps to understand the users I’m designing for and their needs. A primary user group identified through research was adults eating out four or more days out of the week who were looking to save money.
This user group confirmed initial assumptions about Copycats users, but research also revealed that money was not the only factor contributing to cooking at home. Other user problems included disconnectedness, health concerns, or time that make it difficult to go out to eat at restaurants regularly.
User Pain Points
1
Disconnectedness
Adults feel disconnected from relationships and find it easier to reconnect at home doing hands-on activities together.
2
Health Concerns
Adults are tired of large portion sizes that lead to overeating and want more control over ingredients.
3
Time
Adults don’t want to sit in traffic, be on long waitlists at restaurants, or deal with long delivery times.
Sitemap
Health concerns and business were primary pain points for users, so I used that knowledge to create a sitemap.
My goal here was to show users that they can cook their favorite restaurant meals at home while keeping health in mind and offer a built in grocery list feature for conveniency and organization.
Paper Wireframe
Next, I sketched out paper wireframes for each screen in my app, keeping the user pain points in mind.
The home screen paper wireframe variations focus on optimizing the browsing experience for users.
Digital Wireframe
Prioritizing displaying cooking videos on the main page but keeping the design simple and clean was a key part of my strategy. Making sure the user knows it’s a website for cooking videos. I also decided to add a new grocery list feature that was not a part of my paper wireframe.
Low-Fidelity Prototype
Using the completed set of digital wireframes, I created a low-fidelity prototype. The primary user flow I connected was viewing a cooking video and adding ingredients from the recipe to a user grocery list, so the prototype could be used in a usability study.
Usability Study Findings
1
Purpose
Users were a bit confused about the branding of the website. They wanted a clear statement on the purpose.
2
Navigation Bar
Users felt the navigation bar should be clearly defined instead of blending in with the rest of the page.
3
Design
Users were not satisfied with the dark colors and felt it should be brighter. They also felt the design of the grocery list page was too simple and had too much empty space.
Mockups
Based on the insights from the usability study, I made changes to improve the look of the website and made the colors more vibrant. One of the changes I made was to clearly define the navigation bar. I also added a header to the homepage that describes the purpose of the website.
I also made changes to the grocery list page. Users did not like the overall design of the list and felt it took too long to scroll through. I shortened the list and filled in the extra space by creating a three column, two row list.
My hi-fi prototype followed the same user flow as the lo-fi prototype, and included the design changes made after the usability study.
High-Fidelity Prototype
Usability Considerations
1
I used headings with different sized text for clear visual hierarchy.
2
I used color contrast between text and background color to make website as visually compliant as possible.
3
I kept consistency in design and layout of navigation to help people use the website confidently without unnecessary error.
Impact:
Our target users shared the flow and navigation from one page to the next was straightforward and easy to understand. They also enjoyed the goal of the website and thought the grocery list feature was beneficial.
What I learned:
I learned that even making the smallest design changes can have such an impact on user experience. Changing up the colors and making it brighter felt more welcoming to users and made their experience more enjoyable.
Next
Steps
Conduct follow-up usability testing on the new website
Identify any additional areas of need and ideate on new features
Thank you for reviewing my work on Copycats!
If you’d like to see more, or would like to get in touch, my contact information is provided below:
Email: riazk88@yahoo.com