Capillus
A personalized hair-care mobile application
Our team of three University of Maryland Human Computer Interaction Graduate students engaged in a participatory design process with a Black, female co-designer. As a team, we explored technology-based ways to make hair-related search results more inclusive for Black women.
Visual Design Lead
UI/UX
Interaction Design
User Research
Alex Goldstein
Markus Hines
Micheline Ziade
Figma
Miro
Photoshop
10 weeks
Our co-designer is a 24-year-old female. She is Jamaican American and identifies as a Black woman. She is passionate about hair, and enjoys finding new hairstyles and products to try.
She acted as an equal member of our design team, engaging in brainstorming and sketching exercises, and providing expertise about her lived experiences.
Our co-designer is often reminded that the world was not designed with someone like her in mind. It is a normal occurrence for her to tailor her search results just to find content related to someone of her demographic. To search engines, the default woman is Caucasian.
The onboarding process would provide the application with the necessary data to enable customization of the recommendations shown and the search results.
The onboarding process would provide the application with the necessary data to enable customization of the recommendations shown and the search results.
After creating an account, our user has the option of uploading a photo that would be used to analyze her hair type or entering her hair type directly by choosing from preset categories like, type, coil and texture.
Our user is now able to see recommendations that fit her hair type and her identity: the results shown in the app all represent Black women and the styles, products, tutorials appropriate for our user’s hair type.
Additional features include being able to save results and create folders for organizing saved items.
Additional features include being able to save results and create folders for organizing saved items.
The user can tap the shopping bag icon to see buyable products that were shown in a tutorial
The user can use the search bar to search by keywords in combination with a number of filters that we identified in conversation with our co-designer including sensitivities and occasion.
In addition, the user can filter the results depending on whether she is looking for products, styles or tutorials.
The user can use the search bar to search by keywords in combination with a number of filters that we identified in conversation with our co-designer including sensitivities and occasion.
In addition, the user can filter the results depending on whether she is looking for products, styles or tutorials.
01
Search terms have to be edited with the addition of specific words like “Black woman” in order to get relevant results.
02
This experience is frustrating and exclusionary, and it places more burden on some users, in this case Black women, to take extra steps in order to get the desired results.
Each team member sketched out a design idea for the application. Then, we critiqued each other’s solutions, focusing primarily on feedback from our co-designer
We created a user flow to map out the flow of the prototype and the overarching interactions a user would be able to perform
We created a style guide to help with maintaining consistency throughout the design
We created a moodboard to guide the visual direction of the Capillus app
Most of the feedback centered around usability issues, as our co-designer felt that we had found a solution to the design problem.
01
She thought the middle two coil illustrations looked too similar to each other and that knowing which one to choose could be difficult.
02
She also showed some difficulty moving from the search suggestions page to the results page.
03
Finally, she mentioned that she couldn’t always see selected filters on the screen, so it was hard to tell how the results were filtered.
Based on Jodi-Ann’s feedback, the application we developed successfully addressed the problem of lack of representation of Black women in hair-related search results. She liked that the results that the app returned showed Black women and displayed hairstyles that are appropriate for her hair type.
This co-design project was run remotely. We used Zoom for our meetings and interviews and Miro for a shared work space that our co-designer and us could collaborate in. These tools, although they provide much flexibility especially as we are still in the midst of a pandemic, cannot always replace in-person interaction.
In our case, our co-designer was not familiar with Miro. Additional effort was required on her part to learn enough details about this tool in order for us to work together. We still feel however that a medium that she is more comfortable with would have given her the freedom and ease to share more design ideas.
More effort and time would be needed to develop this design further so that the app is more inclusive of people with disabilities, people in low-resource contexts, and elderly people.
In order to improve the accessibility of our application for a diverse range of users, we would conduct further research in the form of co-design sessions, interviews, usability tests, and prototype evaluations.
