Yodi Naturals
Client
Yodi Naturals is a website on which Black women find DIY hair care recipes created by other women with similar hair types. Yodi Naturals was created to take the trial and error out of DIY hair care.
Goal
Yodi Naturals was interested in broadening their audience and creating a “beginner-friendly” website for DIYers and creators alike.
Category
Website
UX Team
Eli Dagostino
Felix Flecha
Noelle Phan
Duration
Three weeks
Survey to establish women’s interest and enthusiasm for hair care products and treatments: 38 responses
Have you ever thought about making your own hair products?
Would you feel comfortable making your own hair products?
Do you look at the ingredients in your hair products?
Have you ever had a chemical hair treatment done at a salon?
How would you describe your hair type?
What of the following would you be comfortable putting in your hair as a part of a DIY treatment?
Which of the following do you have in your home now?
Interviews: seven users
Key interview findings:
• Women considering DIY hair care are concerned about the time it will take.
• Women check the ingredients in their hair products. Ingredients are important.
• Hair concerns and details between hair types came up constantly.
• Women trust their stylists and close friends to tell them what to do with their hair. They need assurance that a hair treatment will “work.”
Affinity mapping
Addressing an important user group with preexisting data:
Our Stakeholder came to us with survey data from Recipe Creators. We had interviewed Recipe DIYers, but she told us that the Creator user group was one we needed to include features for. We combined her data with our assumptions to build personas for Recipe Creators in addition to the Recipe DIYers.
Problems
The DIYer is struggling to manage and maintain their unpredictable hair because there is no reliable single resource that caters to all different types of hair. The DIYer has little time to spend going through trial and error with store bought and homemade hair products to no avail.
The creator needs a place to share their homemade hair care recipes so that they can help people who are dissatisfied with their hair.
Solutions
To help the busy DIYer who’s tired of trying products and recipes get control over their unpredictable hair, we will create a website that aggregates hair care recipes that benefit all different hair types from trusted creators, saving them the trouble of endless trial and error.
The creator will get a website where they can share their homemade hair care recipes and connect with and help DIYers.
User flows
Sketching
A collaborative process, my team and I each sketched each screen and then came together to synthesize. Click to enlarge.
Sketch to Low-Fi
Click to enlarge.
Home
Recipe
Usability testing: four users
Key Usability Test Findings:
No home menu item.
Users want to see reviews before clicking on individual recipe
“Upload Recipe” wasn’t signal enough for the function - not the correct UX copy
Hesitation with needing to sign up to upload a recipe
Went to click “reviews” in description on single recipe page
Little to no interest in knowing who the top creators are
Implementations:
Add home menu item
Add star rating/review to recipes on recipe page
Change UX copy from “Upload Recipe” to “Share a Recipe”
Add action words to sign in/sign up page indicating requirement
Link reviews down to reviews section on single recipe page
Remove badges on creators — not enough interest in the credibility. Reviews are enough
We provided our stakeholder with three color palettes, and she chose the one below which I designed:
Beginner-front-end-engineer ready:
Our stakeholder is a backend engineer by trade and was going to code our site herself. I was sure to keep the UI simple so it would be beginner friendly for her first big front-end development project. See a redlined wireframe below (click to enlarge):
Landing page
All our client had live online was a landing page. We had extra time at the end of our sprint, so I designed a new landing page for her so she could have a landing page which tied into the design of her website live while the new website was being built.
The new landing page adopts features from the new website,
all designed in the same style of the new website:
Same home banner
Text pulled from the new about page
Sample recipe + ingredient cards
A woman’s story (a nod to the community page)
Existing
New
Next steps
DESIREABILITY TEST:
Our stakeholder had expressed excitement for the neutral earthy color palette which mimicked the ingredients in DIY hair care recipes, but upon delivery, we found that users were more attracted to the existing landing page’s bright color palette.
A big next step would be to conduct desirability tests on the two landing pages to decide on a final palette.
COMMUNITY:
Recommend content to the stakeholder which she could push on social media to begin building community naturally. I believe this would be the first step in the community building process.
Get ready to track analytics both from the website and from social media to understand the best content which builds meaningful connections
Users provided a ton of valuable data surrounding their natural hair journeys. Do further research into the possibilities for the community page knowing this information (see below):
Click to enlarge
FINALLY, I WOULD:
Validate our Stakeholder’s research and further develop the Recipe Creator persona
Integrate “where to buy” feature so people know where to buy ingredients
Create graphics for shelf life and storage specifications for recipe pages
Create screens for the sign up and newsletter flows
Usability test the new landing page
ONE BIG TAKEAWAY:
I learned the importance of balancing a stakeholder’s wants and needs and the desires, frustrations, goals and requirements of the users.
I really enjoyed this job. Our client was wonderful to work with, and building out her new brand’s web presence was exciting. I greatly look forward to my next opportunity to help a new brand shine!