Recipe For Success Website Redesign
Embedded Files
Project Overview
Create a place for activities for parents to use with their kids to teach them about nutrition and get them involved in a local organization
Role & Responsibilities
Role & Responsibilities
UX/UI designer redesigning the website from conception to delivery
Team
Team
Bingbing Yang
Cataryna Galan
Elizabeth Wood
Tools
Tools
Miro Board, Figma Workbook, FigJam Workbook, Final Prototype , Google Drive
Project Duration
Project Duration
Part-time 3 weeks
January 2021-February 2022
Goals
Improve the overall site navigation and provide users with activities they could do with their children.
Problem Statement
Problem Statement
Anna Reeves, teacher and mother of two young kids, needs help looking for interactive activities for her and her children to do together so that they can learn how to make healthy choices as a family.
User Centered Design Process
User Centered Design Process
Empathize Define Ideate Prototype Test
Empathize / Research
Heuristic Evaluation
Heuristic Evaluation
In our research process, we started with a heuristic evaluation and user interviews to guide our concept. We wanted to see where people seek nutrition information and discover how they teach their children about healthy eating habits.
Card Sorting
Card Sorting
We ran remote card sorting to understand more about how users will interact with the original website.
Click here to view the card sorts
User Interviews Data
User Interviews Data
In our initial review, we thought the problem might be their navigation and how they presented content
However, from our interviews we discovered each person found it important to involve their kids in their family food routines - but needed ideas on how to do that.
“I want to provide my son with all of the nutritious food and nourishment he needs”
“I want to provide my son with all of the nutritious food and nourishment he needs”
“I want to teach my kids the things I wish someone taught me about healthy eating”
“I want to teach my kids the things I wish someone taught me about healthy eating”
“I want my kids to try new things and have a diverse palate”
“I want my kids to try new things and have a diverse palate”
Define
Persona
Persona
We created a user persona based on the research findings to better understand the needs and motivations of users.
Journey Map
Journey Map
To visually represent the website's user flow. We developed the user journey map.
Ideate
We concluded that our website should have a thriving activities page with a lot of information for parents wishing to involve their children in healthy eating habits based on our affinity map and prioritizing matrix. The user flow was then created based on the thoughts.
Design / Prototype
LO-FI Wireframe
LO-FI Wireframe
To get the bets result, we each created two versions of each screen based on the user flow.
Then we voted on which parts would be used in the Mid-Fi wireframe.
Mid-FI Wireframe
Mid-FI Wireframe
Homepage
Blog Page
Our Partner Page
Programs Page
Activities Page
Play A Part Page
About Us Page
Donation Page
HI-FI Wireframe
HI-FI Wireframe
Through our iteration process we improved our UI elements by finalizing a color palette, adding less rounded corners for a more modern look, and updating the filter sections. We also updated our UX throughout the iterations by focusing the homepage more and more on activities to solve our users' problem.
Homepage
About Us Page
Activities Page
Blog Page
Contact Us Page
Partner Page
Programs Page
Donation Page
Test
User Testing Data
User Testing Data
We asked users to find details on Recipe For Success partners
All users were able to find the Activities page
User Testing Highlights
User Testing Highlights
Card consistency, update corner roundness and its position
Information Architecture in header nav
Search bar / simpler filter
Top menu background color to anchor it
Refocus on activities vs donation
Remove text shadows To improve readability
Wave banners creates squiggle space
Iterations
Iterations
Home Page
About Us Page
Activities Page
Blog Page
Contact Us Page
Our Partners Page
Programs Page
Donation Page
Style Guide
Style Guide
We created a style guide to ensure design consistency and for future use.
Summary
Keep your user at the forefront, and make sure your iterations will actually serve their needs, not just the design
Testing after each iteration to refine design elements and usability, and check the prototype after each iteration
We got really stuck on the color palate and making it both nice to look at and Accessibility compliant - A/B testing was crucial to figure that out
Future Roadmap
Future Roadmap
We've discussed what we might be able to do in the future to increase user engagement on the site.
Thank You!
Thank You!
Your Feedback is Welcome
Let’s Connect
EmaiL: bingbingy955@gmail.com
LinkedIn: linkedin.com/in/bingbing-yang-28a618232
Page updated
Google Sites
Report abuse