My Role
UX Strategist, UX Researcher, Information Architect, UI Designer, Usability Tester
My Role
UX Strategist, UX Researcher, Information Architect, UI Designer, Usability Tester
As a solo UX Designer, I led every step of the design process from concept to final prototype, including:
Defining the problem space and conceiving the project (idea generation & vision)
Conducting all user research: interviews, persona creation, gathering insights
Information architecture: mapping user journeys, structuring content, defining site map & navigation
Wireframing: sketching low-fidelity layouts and converting into interactive prototypes in Figma
UI design & visual design: designing polished screens, UI components, branding & aesthetic details
Writing UX microcopy & interface text: calls-to-action, onboarding flows, tone & voice decisions
Usability testing & user feedback: running multiple testing rounds, measuring emotional responses, adjusting design based on findings
Iteration: refining flows, visuals, navigation based on user feedback & test data
Intro Birth of an idea
The problem
Untangled is a project idea I conceived while reflecting on the dearth of resources to help people assess and care for their hair, especially for those with curly and coily hair types (commonly seen in black and brown communities).
Untangled is a project idea I conceived while reflecting on the dearth of resources to help people assess and care for their hair, especially for those with curly and coily hair types (commonly seen in black and brown communities).
The solution: Untangled
A web app 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.
A web app 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.
What's special about Untangled?
Hair-identification sites like this are not novel, so what made this project special? I wanted to specifically explore the effect of adding a community aspect to users' hair discovery journey. Does connecting users to a community of people with hair like theirs make a difference in their overall experience? Does making community-focused design choices throughout the hair discovery journey help create a more pleasant user experience?
Hair-identification sites like this are not novel, so what made this project special? I wanted to specifically explore the effect of adding a community aspect to users' hair discovery journey. Does connecting users to a community of people with hair like theirs make a difference in their overall experience? Does making community-focused design choices throughout the hair discovery journey help create a more pleasant user experience?
I remember not knowing where to start with my curly hair, so I thought,
"Why not make it easier for others like me?"
I remember not knowing where to start with my curly hair, so I thought, "Why not make it easier for others like me?"
This case study will show how I built "Untangled".
Image of "Untangled" Landing Page
Impact
This project was a way to demystify curly and coily hair care by simplifying users' hair-care journey through personalized recommendations and community support. Creating a platform like this makes hair care guidance more accessible and fosters confidence and representation for an underserved audience.
Analysis Creating an Approach
Quick Recap
The Problem
People have limited access to hair-care knowledge and don’t know where to start when it comes to their hair.
Solution Concept
A web app that personalizes users' hair care journeys by analyzing and identifying their hair type/concerns, providing product recommendations, and connecting them with a community of others with hair like them.
(With a focus on community-building UX Design)
Now that I had a starting point, I needed context to inform my next moves..
I remember not knowing where to start with my curly hair, so I thought, "Why not make it easier for others like me?"
User Interviews Round 1
I conducted a preliminary set of user interviews to better understand audience needs and identify my target users. My goal was to gain insight into the user pool to help set the foundations of my web app.
For the first round, I Interviewed three different people of varying backgrounds and hair types and drew behavioral insights to help direct my design process.
Key Takeaways
Need for hair guidance seemed to be greater for those with hair types 2C and above.
Most participants believed having a community would be helpful in their hair care journey
Users expressed general approval of receiving product recommendations
User Persona Built from findings of Round 1
Now with a clear direction, it was time to get down to business..
I remember not knowing where to start with my curly hair, so I thought, "Why not make it easier for others like me?"
Design Process Let the building begin!
Design Process Let's Build!
The Road Map
Now that I had a direction, I started building the web app structure and deciding on what features to include based on the interviews and user persona I created.
Product Features/Direction Outline
Basic Site Map
One of my goals with this web app was to make users feel more connected to a community. But the question was, how?
I remember not knowing where to start with my curly hair, so I thought, "Why not make it easier for others like me?"
Community-Building Design Research
After conducting some preliminary UX research, I decided to focus on one particular design choice:
To include photos of other community members in the Hair Quiz Results portion of my web app
The effect of seeing faces on the human brain is evident in science. We are intrinsically wired to process faces and create emotional attachments. These are two articles I cited to help make my decision.
In this article, the author cites a study done by an online art shop, which presented paintings from artists on their homepage. "During testing, they swapped out the photos of the paintings with photos of the artists, hoping to increase user engagement. KISSmetrics said, 'Making this small but relevant change sent their conversion rate through the roof' … their site experienced a whopping 95 percent increase in conversions!" Lani Rosales (2018).
This shows that when shown pictures of other human faces, users feel more connected to the site and its content, and this is important in building community as well.
This article about how human faces effect user experience stated that, ”adding human faces means creating an emotional experience for your users, and therefore, engagement. Furthermore, humans are born with a visual preference for faces, over other images, that begins less than an hour after birth... It can take users as little as 50 milliseconds to form an opinion about a website. A face can do this far more quickly than a block of text” Kucheriavi (2020).
Human faces have an astounding effect on the brain’s levels of trust, which is why many companies include photos of their CEOs and organization members. Trust is crucial to building community, which was my overall project goal.
Sketching things out..
After solidifying the features and direction of my web app, I got started sketching out some
low-fidelity wireframes.
After solidifying the features and direction of my web app, I got started sketching out some low-fidelity wireframes.
Some low-fidelity Wireframes
The first prototypes
After creating the low-fidelity wireframes of what I wanted my web app to look like, I worked on creating High-fidelity prototypes in Figma to test with.
I focused on the user journey through the hair type identification questionnaire.
Preliminary prototype
I wanted to test if adding community member photos to the hair quiz results portion of my web app would provide a more pleasant and inclusive user experience.
This would require measuring users' emotions, but how do you do that?
I remember not knowing where to start with my curly hair, so I thought, "Why not make it easier for others like me?"
UX Research & Round 2 of Testing
I was focused on 2 goals throughout this testing process:
1) To see if adding community-focused design choices throughout the hair discovery journey helps to create a more pleasant user experience.
2) To test the functionality and ease of use of the web app.
I asked participants to run through my web application, take the quiz, and get their hair type results. Participants did this twice.
Once with my web app prototype that included the additional “community-building” User Experience design method, and once with the prototype that did not include the UX design method.
I then gathered results using both the Geneva Emotion Wheel (empirical) and User Interviews (logical).
Community-building vs. Normal UX
Geneva Emotion Wheel
The Geneva Emotion wheel is a ”theoretically derived and empirically tested instrument to measure emotional reactions to objects, events, and situations” Affective Sciences (2018). This empirically tested instrument is a common method within UX testing to measure emotional reactions in user testers, based on Scherer's Component Process Model (2015).
It can be used in different ways, depending on your objective. I used it to test how my prototypes induced more positive emotions in participants.
After each prototype run-through, I asked participants to choose the circles of the Geneva Emotion Wheel that best represented their emotional state.
Geneva Emotion Wheel Results Example
Key Findings
When going over the results of the Geneva Emotion Wheel, I found that…
Participants experienced much stronger positive emotions when shown the additional “community building” UX design aspect of including images of other community members with the same hair-type in the post quiz landing page.
Users seemed to express higher levels of satisfaction, interest, and hope during the round where they saw images of other users with the same hair type as them.
When going over the results of the Interviews, I found that…
Participants felt much more immersed into a community when shown the photos of the community members. One user claimed that she felt ”validated after seeing the photos, because it’s not always common to find others in real life who have your type of hair that you can discuss with, and it also assures me that others are actually using the app.”
In general, participants felt much more welcomed and comfortable in the round with the additional “community building” UX design aspect.
After reviewing the Emotion wheel & Interview responses, I came to the conclusion that the majority of the results from my participants were in support of the argument that adding photos of community members to the landing page helps create a sense of community for users.
I also took suggestions for the future of my application. Participants gave several ideas on how to make the process even more community building, immersing, and intuitive for users.
Final Prototypes
Informed by the results of the second round of user testing, I created the final prototypes of my web app as seen below…
Some High-fidelity Wireframes
After finalizing my designs for Untangled, I was able to reflect on the process and everything I had learned…
I remember not knowing where to start with my curly hair, so I thought, "Why not make it easier for others like me?"
Evaluation That's a wrap!
What were my goals?
Design a web app that helps users with their hair journeys and connecting them with a community of others with hair like them.
Determine whether including pictures of community members helped users feel more connected to their hair community.
Success!
I was successful in designing an app that improved the experience of users when embarking on their hair journeys
I successfully led research and determined that the UX design method I proposed worked to help build community and trust in my user base.
I hope to one day develop this project into a working web app to help anyone struggling with their hair journeys.
I remember not knowing where to start with my curly hair, so I thought, "Why not make it easier for others like me?"
Reflection What did I learn?
This case study proved to be a difficult and long process, as I was working alone, but it helped me grow tremendously as a designer.
Power of Representation
Personal struggles with my own hair inspired this project, reinforcing how vital representation is in design.
Wearing many hats
Managing research, testing, and design on my own taught me how to balance various roles in the design process
Emotion in Design
Beyond usability, I saw how design choices can spark feelings of hope, confidence, and belonging for users.
Iteration is key
Rapid prototyping and user feedback cycles highlighted the importance of refining designs continuously.
My Role
UX Strategist, UX Researcher, Information Architect, UI Designer, Usability Tester
As a solo UX Designer, I led every step of the design process from concept to final prototype, including:
Defining the problem space and conceiving the project (idea generation & vision)
Conducting all user research: interviews, persona creation, gathering insights
Information architecture: mapping user journeys, structuring content, defining site map & navigation
Wireframing: sketching low-fidelity layouts and converting into interactive prototypes in Figma
UI design & visual design: designing polished screens, UI components, branding & aesthetic details
Writing UX microcopy & interface text: calls-to-action, onboarding flows, tone & voice decisions
Usability testing & user feedback: running multiple testing rounds, measuring emotional responses, adjusting design based on findings
Iteration: refining flows, visuals, navigation based on user feedback & test data
Intro Birth of an idea
The problem
Untangled is a project idea I conceived while reflecting on the dearth of resources to help people assess and care for their hair, especially for those with curly and coily hair types (commonly seen in black and brown communities).
The solution: Untangled
A web app 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.
What's special about Untangled?
Hair-identification sites like this are not novel, so what made this project special? I wanted to specifically explore the effect of adding a community aspect to users' hair discovery journey. Does connecting users to a community of people with hair like theirs make a difference in their overall experience? Does making community-focused design choices throughout the hair discovery journey help create a more pleasant user experience?
I remember not knowing where to start with my curly hair, so I thought, "Why not make it easier for others like me?"
This case study will show how I built "Untangled".
Image of "Untangled" Landing Page
Impact
This project was a way to demystify curly and coily hair care by simplifying users' hair-care journey through personalized recommendations and community support. Creating a platform like this makes hair care guidance more accessible and fosters confidence and representation for an underserved audience.
Analysis
Creating an Approach
Quick Recap
The Problem
People have limited access to hair-care knowledge and don’t know where to start when it comes to their hair.
Solution Concept
A web app that personalizes users' hair care journeys by analyzing and identifying their hair type/concerns, providing product recommendations, and connecting them with a community of others with hair like them.
(With a focus on community-building UX Design)
Now that I had a starting point, I needed context to inform my next moves..
User Interviews Round 1
I conducted a preliminary set of user interviews to better understand audience needs and identify my target users. My goal was to gain insight into the user pool to help set the foundations of my web app.
For the first round, I Interviewed three different people of varying backgrounds and hair types and drew behavioral insights to help direct my design process.
Key Takeaways
Need for hair guidance seemed to be greater for those with hair types 2C and above.
Most participants believed having a community would be helpful in their hair care journey
Users expressed general approval of receiving product recommendations
User Persona Built from findings of Round 1
Now with a clear direction, it was time to get down to business..
Design Process Let's Build!
The Road Map
Now that I had a direction, I started building the web app structure and deciding on what features to include based on the interviews and user persona I created.
Product Features/Direction Outline
Basic Site Map
One of my goals with this web app was to make users feel more connected to a community. But the question was, how?
Community-Building Design Research
After conducting some preliminary UX research, I decided to focus on one particular design choice:
To include photos of other community members in the Hair Quiz Results portion of my web app
The effect of seeing faces on the human brain is evident in science. We are intrinsically wired to process faces and create emotional attachments. These are two articles I cited to help make my decision.
In this article, the author cites a study done by an online art shop, which presented paintings from artists on their homepage. "During testing, they swapped out the photos of the paintings with photos of the artists, hoping to increase user engagement. KISSmetrics said, 'Making this small but relevant change sent their conversion rate through the roof' … their site experienced a whopping 95 percent increase in conversions!" Lani Rosales (2018).
This shows that when shown pictures of other human faces, users feel more connected to the site and its content, and this is important in building community as well.
This article about how human faces effect user experience stated that, ”adding human faces means creating an emotional experience for your users, and therefore, engagement. Furthermore, humans are born with a visual preference for faces, over other images, that begins less than an hour after birth... It can take users as little as 50 milliseconds to form an opinion about a website. A face can do this far more quickly than a block of text” Kucheriavi (2020).
Human faces have an astounding effect on the brain’s levels of trust, which is why many companies include photos of their CEOs and organization members. Trust is crucial to building community, which was my overall project goal.
Sketching things out..
After solidifying the features and direction of my web app, I got started sketching out some low-fidelity wireframes.
Some low-fidelity Wireframes
The first prototypes
After creating the low-fidelity wireframes of what I wanted my web app to look like, I worked on creating High-fidelity prototypes in Figma to test with.
I focused on the user journey through the hair type identification questionnaire.
Preliminary prototype
At this point, I wanted to test if adding community member photos to the hair quiz results portion of my web app would provide a more pleasant and inclusive user experience.
This would require measuring users' emotions, but how do you do that?
UX Research & Round 2 of Testing
I was focused on 2 goals throughout this testing process:
1) To see if adding community-focused design choices throughout the hair discovery journey helps to create a more pleasant user experience.
2) To test the functionality and ease of use of the web app.
I asked participants to run through my web application, take the quiz, and get their hair type results. Participants did this twice.
Once with my web app prototype that included the additional “community-building” User Experience design method, and once with the prototype that did not include the UX design method.
I then gathered results using both the Geneva Emotion Wheel (empirical) and User Interviews (logical).
Community-building vs. Normal UX
Geneva Emotion Wheel
The Geneva Emotion wheel is a ”theoretically derived and empirically tested instrument to measure emotional reactions to objects, events, and situations” Affective Sciences (2018). This empirically tested instrument is a common method within UX testing to measure emotional reactions in user testers, based on Scherer's Component Process Model (2015).
It can be used in different ways, depending on your objective. I used it to test how my prototypes induced more positive emotions in participants.
After each prototype run-through, I asked participants to choose the circles of the Geneva Emotion Wheel that best represented their emotional state.
Geneva Emotion Wheel Results Example
Key Findings
When going over the results of the Geneva Emotion Wheel, I found that…
Participants experienced much stronger positive emotions when shown the additional “community building” UX design aspect of including images of other community members with the same hair-type in the post quiz landing page.
Users seemed to express higher levels of satisfaction, interest, and hope during the round where they saw images of other users with the same hair type as them.
When going over the results of the Interviews, I found that…
Participants felt much more immersed into a community when shown the photos of the community members. One user claimed that she felt ”validated after seeing the photos, because it’s not always common to find others in real life who have your type of hair that you can discuss with, and it also assures me that others are actually using the app.”
In general, participants felt much more welcomed and comfortable in the round with the additional “community building” UX design aspect.
After reviewing the Emotion wheel & Interview responses, I came to the conclusion that the majority of the results from my participants were in support of the argument that adding photos of community members to the landing page helps create a sense of community for users.
I also took suggestions for the future of my application. Participants gave several ideas on how to make the process even more community building, immersing, and intuitive for users.
Final Prototypes
Informed by the results of the second round of user testing, I created the final prototypes of my web app as seen below…
Some High-fidelity Wireframes
After finalizing my designs for Untangled, I was able to reflect on the process and everything I had learned…
Evaluation That's a wrap!
What were my goals?
Design a web app that helps users with their hair journeys and connecting them with a community of others with hair like them.
Determine whether including pictures of community members helped users feel more connected to their hair community.
Success!
I was successful in designing an app that improved the experience of users when embarking on their hair journeys
I successfully led research and determined that the UX design method I proposed worked to help build community and trust in my user base.
I hope to one day develop this project into a working web app to help anyone struggling with their hair journeys.
Reflection What did I learn?
This case study proved to be a difficult and long process, as I was working alone, but it helped me grow tremendously as a designer.
Power of Representation
Personal struggles with my own hair inspired this project, reinforcing how vital representation is in design.
Wearing many hats
Managing research, testing, and design on my own taught me how to balance various roles in the design process
Emotion in Design
Beyond usability, I saw how design choices can spark feelings of hope, confidence, and belonging for users.
Iteration is key
Rapid prototyping and user feedback cycles highlighted the importance of refining designs continuously.
Role
Solo Project
Tools
Figma, Miro
Time Span
3 months
