top of page
UX Design | Website
Project Overview
REEL Recipes Responsive Website
CLIENT: REEL Recipes
GOOGLE UX DESIGN PROFESSIONAL CERTIFICATE PROJECT:
Design a responsive website for finding and viewing cooking tutorials.
PROCESS:
Empathize, Define, Ideate. Build Wireframes and Low-Fidelity Prototypes, Conduct UX Research and Test Early Concepts. Create High-Fidelity Designs and Prototypes.
ROLE
TEAM
DURATION
DESIGN TOOL
Lead UX Researcher & Lead UX Designer
Solo project
AdobeXD
5 weeks, June + July 2023
THE TARGET AUDIENCE
Majority female users who are comfortable with technology, already consume cooking tutorial content on social media, and enjoy saving and cooking new recipes. Includes participants with food intolerances to assure the website meets their needs.
THE BACKGROUND
Instagram and Pinterest are popular platforms for recipe-hunting users to view short cooking cooking tutorial videos and access corresponding recipes. The challenge with these platforms is algorithms also show users content they aren't looking for, such as still photos over videos, and videos containing content unrelated to cooking (pets, clothing, home decor, etc.). These platforms also have complicated, hidden, or disorganized "Save" features that make it difficult for users to reference previously-saved videos.
THE CHALLENGE
Design a responsive website that eliminates the above algorithm barriers and allows users to find, save, and catalogue cooking videos and recipes more efficiently.
Initial Pain Points & the
Digital Wireframes That Solve Them
1
Filterability
Users need ability to search by multiple parameters in order to find the exact recipe they are looking for.
EX: Filter via Dietary Preferences (gf, vegan, etc), Dish (pasta, salads, bowls, etc.), and Ingredient (asparagus, onion, turkey) at the same time.
2
Clean-formatted Recipes
Users are annoyed with recipe blogs that ‘tell the blogger’s whole life story’ rather than giving them immediate access
to the recipe.
3
Easy Print Option
Users need an easy way to access printer-friendly versions of recipes in order to print physical copies to save to their personal physical recipe books.
4
Save Recipe Collections
Users typically search for cooking tutorials to find recipes to ‘save now and make later’. They need an easy way to catalogue the recipes they find in real time, and still be able to easily
re-access their saved collections and recipes later on.
Design System
Brand Palette
Select Elements & Components:
HEADER & FOOTER:
DEFAULT STATES:
TOGGLE STATES:
ADDITIONAL FUNCTIONS:
Design Evolutions
Increase accessibility standards on "Recipe" button.
OBSERVATIONS
* 100% of users had trouble finding the "Recipe" button associated with each Reel on the home screen. They expressed the button was too small, and the white font was too small and hard to see.
SOLUTIONS
→ White-on-orange is not accessible per WCAG AA standards, so I chose a more accessible color scheme for the "Recipe" button.
→ Users had also expressed the Creators' recipe titles were often too difficult to read on the Reels themselves, so I added a full recipe title bar across the top of every Reel. Now the buttons serve a dual purpose of clearly stating the recipe title and allowing the user a clear path to the recipe card.
Completely Reconfigure "My Recipe Box".
OBSERVATIONS
* The site's tagline is "REEL Recipes: Your digital recipe box", but this theme was not represented anywhere else on the site. (above)
* Users did not understand they could scroll down the "Collection: Salads" page in order to find more recipe cards to catalogue their recipes. Available recipe cards: "Recipes to Try", "Would Make Again", or "Never Again". (below)
SOLUTIONS
→ To stay consistent with the site's theme, I changed "My Collections" to "My Recipe Box" across the site. (above)
→ I reconfigured the format of each "Recipe Box" to look more like a tangible recipe box's filing system. Changing from horizontally-aligned recipe cards, to vertically-aligned recipe cards. Now everything is 'above the fold' so users are able to immediately see what all of their recipe card cataloguing options are. (below)
→ "Drag & Drop" instructions at the top of the page have been updated for clarity. (below)
"Creator" button is not located in an intuitive place
OBSERVATIONS
* 100% of users intuitively wanted to click the Creator's name embedded at the bottom of the Reel itself, rather than the Creator's button in the top right of the recipe card in order to reach the Creator's Profile page. Clicking anywhere on the Reel triggers the Reel to play.
SOLUTIONS
→ The Creator button was moved from the top right of recipe card to the bottom of the Reel itself. This change more intuitively places access to the Creator's Profile page, and prevents users from inadvertently triggering the Reel to play.
Final Designs (desktop browser)
Final Designs (mobile browser)
RECOMMENDATIONS FOR ADDITIONAL RESEARCH & IMPROVEMENTS
CONSIDERATIONS & RECOMMENDATIONS
ACCESSIBILITY CONSIDERATIONS
1
AUTOPLAY DISABLED
Autoplay can interfere with screen readers, making it difficult for those who use them to navigate the site. Autoplay can also affect those with autism or other sensory disorders. Autoplay on REEL Recipes has been disabled and the user must initiate an click or tap action in order for them to play.
2
FOOD ALLERGENS
For users with food allergies or dietary restrictions, the site offers filtering by dietary needs so it’s easier to find allergy-safe recipes.
3
VISUAL IMPAIRMENT
For users with visual impairment, the REEL Recipes brand color palette has been verified via WCAG accessibility standards.
Confirm the updates made in Phase 3 resolved all pain points. Include a participant that specifically uses assistive technology.
1
Test Phase 3 fixes & Address more Accessibility Options
Many creators in the online cooking / blogging space do not have nutritional information readily available for their recipes. www.verywellfit.com is a website I discovered during my research that allows users to type in their recipes and serving sizes, to get a nutrition panel for their recipes. Integrate this external site to REEL Recipes.
2
Add Nutritional Value module for creators to use when importing their Reel
Ability to drag Recipe Box categories so the “My Recipe Box” page can be organized in the order that’s best for the user. Also add ability to drag Recipes within each Recipe Card catalogue so users’ favorite recipes can be shown first.
3
Add full drag
ability to reorganize
Recipe Cards
& Boxes
Ability for users to “super-favorite” their go-to recipes so they appear both in their chosen “Recipe Box”, as well as an overall “super-favorites” recipe box, for easiest access.
4
Add an internal “favorites” system
CONCLUSIONS & TAKEAWAYS
Positive user feedback on additional features:
SUS Results:
A 10-question System Usability Study was administered after each phase of studies. Users were asked to rate their answers on a 5-point scale. SUS Results show a clear increase in user satisfaction with the Reel Recipes website (+0.52 point average).
Impact:
There was previously a hole in the market when it came to platforms exclusive to cooking tutorial videos with an intuitive way to organize recipes. REEL Recipes skips unwanted 'fluff' and gives recipe-seekers faster access to watch cooking tutorial videos, find and save new recipes, easily access previously-saved recipes, and follow their favorite creators; all in one centralized website.
What I learned
1) I discovered via the WebAIM Contrast Checker that white font on the brand’s orange background was not accessible. 100% of participants complained about the areas of the site with white-on-orange design, and thus accessibility standards were proven in real time. I have a big appreciation for Contrast Checkers that take the guesswork out of contrast accessibility.
2) I learned it is best practice to disable autoplay on videos as they can interfere with screen readers or trigger users with cognitive disabilities.
3) Designing responsive websites for various screen sizes allows you to get creative with layouts and the order of your elements. Overall REEL Recipes can accomplish all the same tasks, no matter the device. But it was fun to see what I could consolidate so only the main functionality was immediately available on the mobile site.
Additional supporting link:
bottom of page