Inclusive Design For Lack of Representation
By: Markus Hines
Tags: Hair, Black Women, Inclusive Design, UX Design, UX

Team: Alex Goldstein, Markus Hines, Micheline Ziadee, Jodi-Ann Morgan

Project Overview

Over the course of approximately three months, 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. Our outcome was Capillus, a personalized hair-care mobile application that allows a user to input data points about their hair and their identity and receive individualized recommendations for hair products, hair tutorials, and hair styles.

Our Co-Designer

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. However, she 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.

She acted as an equal member of our design team, engaging in brainstorming and sketching exercises, and providing expertise about her lived experiences. She also gave her consent to share her identity as the co-designer for the project.

Problem Statement

For a Black female, a Google search on hair styles returns primarily white women-centered results. Search terms have to be edited with the addition of specific words like “black woman” in order to get relevant results. 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.

Our Solution

We designed a high-fidelity prototype of a mobile application that allows users to search for hair styles, hair tutorials, and hair products while personalizing the search results based on the user’s hair type, length, color, texture, sensitivities, hair routines, race, gender, and the climate in which they live. The prototype also allows users to filter results based on occasion (i.e. athletic, romantic …).

Our Method

We followed a participatory design process where users and designers engage in mutual learning, enabling designers to grasp the realities of users and allowing users to identify the proper technological means through which they can reach their goal [Simonsen, Robertson (eds.), 2021.cite].

Over the course of the project, we conducted a semi-structured interview, a co-design session, and a review session with our co-designer.

User Interview

Our initial interview centered on exploring inclusivity issues that our co-designer faces when dealing with technology. Through the interview, we learned that lack of representation in many contexts, including in media, in search engine results, and in the real world, was one of the main problems that our co-designer wanted to address.

After laying out the main issues brought up by our co-designer and brainstorming possible solutions for each issue, we decided to focus on the lack of representation in search results, as this area both affects her daily life and was something that we felt confident we could design a technology-based solution for. We based our use case on a real-life scenario as presented by our co-designer: searching for hair styles, products, and tutorials.

We concluded the interview by proposing three possible solutions to address the problem of lack of representation in hair-related search results. The solutions were: a mobile application, a web-based platform, and a browser plug-in.

Participatory Design Session

We started this session by reviewing storyboards that were pre-prepared by the three design experts on the team. The storyboards depict the three solutions discussed earlier and show how each solution might help our co-designer achieve her goal.

Initially, the team was leaning towards developing the idea of a browser plugin. However, after discussing the advantages, disadvantages, and feasibility of each solution, we came to the conclusion that designing a mobile application would be a more useful approach.

Next, 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 also relied on our co-designer’s suggestions for the main categories to be included in the app (hair products, tutorials, and styles).

Prototyping Solutions

Based on the ideas generated from the co-design session, our team developed a prototype solution, moving from a user flow, to low-fidelity sketches, mid-fidelity wireframes, and finally, to a high-fidelity, interactive prototype.

User Flow

The three design experts began with a user flow to map out the flow of the prototype and the overarching interactions a user would be able to perform. We based our user flow on the three tasks our co-designer most wanted to accomplish, and the screens we thought would be necessary to communicate the main functionalities of the application.

Low Fidelity Sketches

Referencing the user flow, the three design experts individually created low fidelity sketches that explored possible interfaces and interactions. When we reconvened, we discussed the advantages and disadvantages of each piece of each sketch, and voted on the pieces we thought would be most effective. These votes informed our mid-fidelity wireframes, which we touch on later.

Mid-Fidelity Wireframes

Next, we moved to mid-fidelity wireframes as a way to converge on a final user flow and functionalities, since our sketches were divergent and not comprehensive.

High Fidelity Designs

We created our high-fidelity prototypes in Figma.

Prior to creating a hi-fidelity prototype, we developed the visual style for the app. We decided to use a mesh gradient of blurred tan, purple, and orange colors for the background for a few reasons.

First, the colorful mesh gradient creates an organic feeling that is warm and welcoming. The app was built with inclusion in mind and we want everyone to feel welcomed using it. Secondly, the mesh gradient is reminiscent of colors used in the beauty industry.

Additionally, we used purple as the primary accent color due to its soothing and calming properties in addition to being heavily used in beauty products. Real-life pictures were used throughout the designs for inclusive representation of the user and impact.

The typography consists of the Sunmora and Open Sans fonts. Sunmora is a thick-lettered serif font defined by its smooth curves. It was primarily used to add on to the creative visuals of the app and is used for some of the headings. Open Sans was primarily used throughout due to its legibility.

Explore the prototype here, or watch a video demo of it here.

Onboarding

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.

She then enters additional information that would help refine the results shown in the app, like: sensitivities, tools, products and protective styles used. And she has the option of specifying the ethnicity and gender she identifies with. Based on this, the app will show results that are inclusive of her ethnicity. In addition, access to location allows the app to tailor results and recommendations based on the current weather (this is important to consider when thinking of hair styles and products) and the products available in the user’s area, as well as local regulations (some hair product ingredients may be illegal in certain places).

Searching

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.

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.

Additional features include being able to save results and create folders for organizing saved items. When watching tutorials, a list of the products used in the tutorial is available to the user. Selecting a product allows users to access more details about it by clicking a “View source” button. For example, users might be taken to an Amazon page where they can review and purchase the product.

Participant Feedback

We had a final interview with our co-designer where we went over the prototype and asked our participant to give us feedback. The suggestions given by our co-designer were then implemented by the team. Most of the feedback centered around usability issues, as our co-designer felt that we had found a solution to the design problem.

Critiques

Jodi-Ann pointed out that the middle two coil illustrations looked too similar to each other and that knowing which one to choose could be difficult. She also showed some difficulty moving from the search suggestions page to the results page. As a response, we recolored the Return button on the keyboard blue to indicate a next step. 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. In response, we moved selected filters to the beginning of the filter rows

Overall Feedback

Jodi-Ann said the following of the final prototype:

“I liked the idea of being able to upload a photo so the app can analyze my hair type.” “The images that came up in the suggestions were of women that looked like me.” “The app addressed the problem of lack of representative results in Google Search.”

Reflection

Was the solution successful in addressing the problem?

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 eliminated the need for her to expressly change her search terms and to face the frustrating experience of always getting results that exclude her.

Limitations of the design

In our design, we imagined a feature where a user can upload a picture of themselves which is then used by the application to analyze the user’s hair type. Our co-designer really liked that feature. To our knowledge, there is no such application at present that has such a functionality and we do not know whether or not such an analysis could actually be done in a real-world version of this app.

The main functionality of the app, the personalization of results based on the user’s racial identity, comes at the expense of privacy, since the user is asked to share information about herself. In our case, our co-designer explicitly mentioned during the first interview that she would not mind sharing personal information in exchange for the functionality offered by such an app, but one can imagine that other users may have issues with that.

Since our co-designer’s main problem was the lack of representation she finds in search results as a Black woman, the design of this app was focused on representation. From an inclusive design perspective, there are several other issues that can be taken into consideration. For example, what about Black women who have some form of visual impairment? We can reasonably assume that, just like Jodi-Ann, they would want more representative hair search results. But how would they use our app? We would need to address issues such as contrast and screen-reader compatibility.

Limitations of the study/methods

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.

What could we have done with more time and money?

With more time and money, we could have created additional iterations on the design with consideration for users with disabilities. We would have achieved this using co-design sessions where we could collaborate with users with disabilities. This would enable us to make this app more inclusive.

In addition, we could have conducted usability testing to gather insights about and refine the overall usability of the application.

Who might we be excluding with our design? How could we iterate on the design to make it more inclusive?

Being all inclusive is not a realistic aim for any design. Our design was successful in addressing the problem of representation our co-designer is facing. Still, in our application there are many potential user populations who are excluded. 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.

References

[1] Jesper Simonsen and Toni Robertson (eds.). 2021. Routledge International Handbook of Participatory Design. Routledge, London. https://doi.org/10.4324/9780203108543