UX/UI Case Study
To create a cooking tutorial responsive website & mobile
Embedded Files
Role
UX researcher
Visual designer
Interaction designer
Client
Google UX/UI design Certificate
Tools
Adobe XD
Time
12 weeks
Project Overview
Challenge: To help busy and active professionals who do not want to spend too much time preparing meals and looking up recipes online.
Solution: Create a responsive website to users that needs precise search filters to find and learn specific recipes as well as how to be a better, knowledgable cook and baker overall.
Understanding the User
PAIN POINTS
The end user are busy, active professionals who do not want to spend too much on a website to search and learn meals to cook themselves and others. In any cooking tutorial websites, users do not want lengthy explanations of how to approach a recipe. Research show that having better search filters and quickly navigating the website is very important to the users and their time.
Visuals
The ability to showcase what a user is looking for that is apparent and intuitive.
Time
Busy, active professionals who want to improve their cooking without too much effort.
Navigation
Precise search filters that only takes no more than 3 clicks to find solutions within the website.
IA
Improved and well-organized information for the user to find intuitively.
PERSONAS
EMPATHY MAP
JOURNEY MAP
Starting the Design
Site Map
The IA for Nosh Nosh’s website is a simple hierarchy format that can be expanded into a matrix hierarchy one.
Paper Wireframes
This is the final of several draft iterations of the responsive website Nosh Nosh, a cooking tutorial website. These artboards are an initial phase to address user pain points from the home page to finding the right recipe.
Paper wireframe screen size variation (mobile)
Here are the final draft iterations of the responsive mobile website of Nosh Nosh. These artboards address user pain points from the home page to the log out.
Digital wireframe
From the initial design phase, I made sure to have designs that do address issues from user feedback and user research. Participants wanted a clearer indication for the search filters.
Digital wireframe size variation (mobile)
For the responsive mobile, I made sure to have designs that address issues from user feedback and user research from the initial design phase. The layout of the features needed to more white space and clearer directions.
Low fidelity prototype
This lo-fi prototype’s user flow starts the navigation by logging in on the home page and the usage of search filters further on from a usability study.
AFFINITY MAP
USABILITY STUDY FINDINGS
Refining the Design
MOCKUPS
High fidelity prototype
The final high fidelity prototype showcases a smooth user flow of the search filter for better user experience.
Rockwell 72 pt
PT serif 60 pt
Proxima Nova 45 pt
Roboto 32pt
Calibri 20pt
ACCESSIBILITY CONSIDERATIONS
Going Forward
One quote from a participant:
“I found that it makes sense to find results (search filter drop-down menu) underneath as a list.”
Impact: The Nosh Nosh meets the needs of users with search filters and consideration of logging in with an account or creating a profile.
Personal Understanding: I have learned that peer and participant feedback are essential to enhance the user experience while improving Nosh Nosh’s responsive website. Through correcting any problems to reach any desired goals within the website is by thoughtful iterations and future considerations.
Page updated
Google Sites
Report abuse