"Untangled" Design Process
This is a project idea I conceived while reflecting on the dearth of resources to help people assess and care for their hair, especially those with curly and coily hair types (commonly seen in black and brown communities).
This website is meant to make your hair care journey more straight forward by recommending products and connecting you to a community of people with hair like yours, after a simple quiz. I created the concept, did research, developed the site architecture, and UI design.
Your hair is a large part of your identity, and not knowing how to care for it properly can be frustrating and time-consuming. I remember not knowing where to start with my curly hair,
so I thought, "Why not make it easier for others like me?"
Research
Problem to Address: People have limited access to hair-care knowledge and don’t know where to start when it comes to their hair.
Research Steps:
-
Identify Problem and Create Possible Solution
-
Created website concept and thought of possible features to include
-
-
Interviews
-
Interviewed three different people with a set of questions created to help me gauge the user needs and questions​
-
Drew behavioral insights from interviews to help direct my design process
-
-
User Persona
-
Created a User Persona​ to represent the "average user" of my product
-




Design




​
-
Low-Fidelity Wireframes
-
Created sketches of how I wanted my website to look​
-
Made the landing page and quiz portion as clean and simple as possible, so users would find it easy to navigate.
-
Added a lot of content to Hair community page to show users that there are tons of resources out there for them
-
Videos, blogs, product list, quizzes, etc.​
-
-
-
High-Fidelity Wireframes
-
Created high fidelity versions of wireframes using figma.​
-
Decided colors should be light and airy to add to that playful mood of the site.
-
Design Steps:
-
Identify elements to include in website
-
I used my user persona and takeaways from my interviews to create a roadmap of features my website would include​
-
Decided that website should look clean, fun, and playful to convince users that hair can be easier than they think
-
Prototyping
Prototyping Steps:
-
Take wireframes and bring them to life
-
I used Figma to create a loop a user would take through my website​
-
​




