Overview
You just woke up and need to be out the door in 30 minutes. You only have 10 minutes to prepare something to eat. You go to QuickPrep.com on your phone and look for “To Go” options. A green smoothie jumps out as it can be ready in 8 minutes. You are out the door in 28 minutes beating your previous record of leaving your home. The day started on the right track thanks to Quick Prep.
Objective
Having an easy, fast and healthy meal should be normal but, that is not usually the case for people who are on-the-go and living a fast-paced life. Here is an alternative for those users who want recipes quickly prepped and cooked without compromising their wallet.
Stakeholder
Career Foundry UX/UI Design Course
My Role
UX/UI Designer
Timeline
3 Month Project
The Tools
UX/UI Project Plan
Part 1: Research
Competitive Analysis
User Research
Personas
Part 2: Design
Flow Diagram
Sketches and Prototype
Mid-Fidelity Mockups
Part 3: Evaluation
Usability Testing
Style Guide
High-Fidelity Mockups
Agile Retrospective
Part 1: Research
Competitive Analysis
After taking a deep look into some popular recipe websites, I was able to find some things that worked and others that needed improvement from each website.
Usability
The interface of these sites are very clear and easy to use. When the user is on their phone, they have a hamburger menu and, when on their laptop they will have their menu options laid out on the top bar.
Market Advantage
One of the websites has a movie and best selling book.
Another website is positioned on the top 3 under google search results.
Opportunities
Compatibility issues with iPhone.
Old articles that are not relevant to current user needs.
Limited target audience.
No marketing efforts after website launch.
No flexibility in diet options.
Key Findings
Simple layouts.
Intuitive interface with appealing colors.
Step-by-step recipes in video format.
User Research
Objective
To find a solution for a fast and cost effective meal prep for busy adults.
Opportunity
Busy adults usually only have 2 options. They either meal prep, which is cost effective but time consuming or, purchase from a food delivery service, which is expensive but saves time.
Findings
Users want control over the food they consume but, don’t want to spend too much time cooking.
Users want clear and easy to follow instructions with video option.
Users also want to use their phone as primary device to look for recipes and buy groceries.
Who?
Adults in their 20’s or older, both women and men with busy schedule.
What?
They will get a fast meal prep solution.
When?
During the work week at night or on the weekend.
Where?
At their place of residence.
Why?
The current solutions are either expensive or time consuming.
How?
By Providing a quicker, easier and cost effective process to meal prep.
Personas
Thanks to the User Research I was able to model 3 personas that portray the target audience for Quick Prep.
The goal is to get these 3 representations of busy adults a meal prep solution that can be cost-effective while mitigating prep and cooking time.
Part 2: Design
Flow Diagram
To organize and translate all the research findings into actionable tasks by the user, I created a Flow Diagram that captures 3 JTBD (Jobs To Be Done) that serve as the MVP’s (Minimum Viable Product) for this first iteration.
Track Food Ingredients
Watch Prep Video
Track Prep and Cook Time
Sketches and Prototype
Now that I have considerable insight into the competition and user expectations, I can start working on the interface with Low-Fidelity and Mid-Fidelity mockups.
Since this is a responsive design website, I started my sketches with a mobile-first approach that will eventually evolve into 4 breakpoints: mobile, small tablet, large tablet, and desktop.
One of the most notable changes in my design comes after User Testing. It shows a complete departure from a user data entry of ingredients into a, more modern and user-friendly, database of ingredients already uploaded to the website.
Mid-Fidelity Mockups
Part 3: Evaluation
Usability Testing
Objectives
The potential user should be able to track food ingredients.
The user should be able to find the feature that let them watch a prep video.
The user should be able to find the prep and cook times in the website.
Goal
To observe and assess the interaction of the user with the website to be able to either confirm the features designed are useful and functional or if some, or all, features need further design work.
Findings
The search icon should be usable when the website becomes fully functional.
Input ingredients before the website is live to provide access to ingredients already in-site and users won’t have to input data themselves.
Change the time location to a more suggestive one closer to the video feature.
Change the ingredients screen to a list only.
Include recipe suggestions as a feature when users search for ingredients.
Eliminate extra steps to the ingredients tab from the main menu.
Solutions
Eliminated the feature where users input ingredients.
Users are now able to look for recipe suggestions when searching by ingredients.
The overall design has better usability.
Style Guide
Using the results from the Competitive Analysis as a basis, I created this style guide that looks minimalist yet welcoming.
I went with a sans-serif minimalist typeface (Roboto) that can be easy to read and follow in small and big sizes while also being modern for the type of language I wanted to use.
The color combination was carefully chosen and tested for perfect contrast. This was done to make the font and imagery complement each other.
The focus of the imagery was to have high-quality pictures of inviting food. For that reason, I didn’t want to incorporate any human faces in the illustrations.
Elements and icons were crafted with rounded corners to fulfill the users’ expectations of a market-standard recipe website.
High-Fidelity Mockups
Agile Retrospective
What went well?
How simple and minimalist it looks while being accessible from multiple devices. It’s also easy to read and follow yet modern and vibrant which was exactly the look I wanted to achieve.
What didn’t go well?
The fact that I found an essential feature flaw (data entry) in my usability testing after the user research was an eye-opener. When it comes to user research, I need to be more observant and examine as many features as I can from the user’s perspective to let the design grow and not be scraped to start all over.
What can be improved?
Since I like to do usability testing as soon as possible, the prototype mockups I used were low-fidelity sketches which created some confusion on testers. I learned my lesson and next time I will design a more clear interface for the test to improve the user experience.