Tressure
The app for finding products and caring for 4C hair.
Role
End-to-end UX/UI Designer
Product
Mobile App
Duration
August to October 2023
Tools
Figma & Maze
overview
The Tressure app is an innovative solution for black women with 4c hair. It was born out of a clear need in the market.
As the sole designer and researcher, I took on the challenge of creating an end-to-end application. Tressure provides a one-stop solution for black women, offering tailored advice on hair care, product recommendations, and the convenience of purchasing those products directly through the platform.
By focusing on this underserved market, I not only aimed to make a difference but also recognized the immense potential within the black hair care market. Tressure is not just an app; it's a game-changer, empowering black women to embrace their natural beauty with confidence and ease.
THE PROBLEM
Women with 4c hair face significant challenges in accessing comprehensive and relevant hair styling information within the current app marketplace.
Black women with 4c hair face the frustrating challenge of finding the right hair care products and routines for their unique texture. Existing apps fell short in serving this specific demographic, leaving users to rely on trial and error or social media for guidance. Businesses miss out on catering to the needs of a key demographic.
COMPETITIVE ANALYSIS
Personalized hair care recommendations for women with 4C hair are unique to Tressure.
In a competitive analysis of four key hair care app competitors – Think Dirty, CrownChronicles, HairDays, and MYAVANA – I assessed their unique approaches to offering hair advice, such as product safety ratings, user journey tracking, brand connections, and personalized hair analysis. This analysis revealed that while product sales and hair care journals were prevalent features, I identified an opportunity to differentiate by delivering more personalized recommendations and addressing the specific needs of black women with 4c hair, enhancing the overall user experience in the hair care app market.
Key Takeaways
-
Tressure needs to have personalization to stand apart.
-
Easy rating scale makes it understandable.
-
UI has to be on point with trends
-
Insights have to be helpful and informative
-
If using AI, then it needs to serve a purpose
-
If marketing towards black women, then need to offer products for their hair.
-
Need purposeful AI.
-
Scientific backing is important.
Summary
Almost every app offered a hair journal or products for sale. While some did employ AI technology, they were not as helpful as intended. In order to make this app stand out it needs to deliver on one of the following features: personalization, powerful AI, or data driven insights.
user interviews
Users didn't see a void that the market wasn't filling as far as availability of products, however knowing which ones to use proved to be challenging.
I conducted interviews with 5 women with 4c hair to gain insights into their hair care practices and product discovery methods, with specific objectives in mind. These objectives aimed to understand the challenges of 4c hair care, how women sourced their current hair products, where black women typically found hair care items, and the specific needs of women with 4c hair. Notably, the interviews revealed that these women possessed considerable knowledge about hair care but struggled with the process of researching advice and products. They often relied on friends, stylists, and social media influencers for guidance. This research, facilitated by more open-ended questions and storytelling in the interviews, helped me achieve my goals and highlighted the importance of pre-research in future endeavors to present as a subject matter expert.
EMPATHY MAPS
Users' pain points helped elucidate what the core features of the app should be.
I compiled the responses from the interviews and started to parse them out. I decided on an empathy map as opposed to an affinity map this time because I noticed that responses easily fell into the categories “says, thinks, does, and feels”. Two distinct patterns in the responses started to emerge, so I made two empathy maps.
The empathy maps helped me to understand the perspective of the users and capture insights during my research. In particular, I found the pain and gain sections to be the most interesting to create. These sections heavily influenced the direction of my project. If I could redo the exercise, I would probably like to have my users create their own empathy maps as we conduct the interview. I feel like this would be a way to engage them and directly gather their thoughts.
USER NEED
& HMW
The user need statement and how might we question informed decision making when it came to choosing which direction to take the project in.
I made user need statements in order to define what I wanted to solve before generating potential solutions. They helped me imagine different users and their specific needs. I also made “how might we” questions in order to set up my designs to solve the right problems. I landed upon the user need statement “Sophia, a simplicity seeker, needs straightforward moisturizing hair care products to maintain her uncomplicated hair routine.” I came up with the question “How might we provide effective solutions for users seeking to achieve their desired hairstyles?”
The user need statement was very specific, but it highlighted the importance of finding the right products for one’s hair. The HMW gave me several directions I could go for solving the user’s problem. I struggled with choosing the right statement during this process, but ultimately, I learned that I needed to take a quality over quantity approach when coming up with these statements and questions. I had over 10 statements, but only ended up selecting one of them.
IDEATION
While a flight of ideas is inspiring, feasibility becomes key when designing a minimum viable product.
I brainstormed several ideas in response to my HMW so that I could go through them and find the one that seemed feasible and most helpful for users. I chose product recommendations as my idea. While this is quite simple, it would involve developing a personalized recommendation system that considers a user’s hair type, length, and concerns so that users can input their hair details and the app will suggest products tailored to their needs. One idea I took away from this process was that feasibility is crucial to the design. I was so locked into creating an AR/VR hair app from the start of this process, however because of time and knowledge constraints I decided against it. Maybe that could be a future direction for this product, but I’m glad I learned this lesson early on so that I could create the best possible version of the product at this phase.
personas
Even when building with different personas in mind, it is okay to have some natural overlap in desires, pain points, and goals.
I made one persona for someone that is more experienced with taking care of 4c hair and one for someone that is still experimenting with their hair. I noticed that most of the people I interviewed could be separated into these two categories and that for a design to be effective it would need to serve both personas. I used this method because I believe having someone in mind that you are designing for helps with making realistic, effective decisions. The result was “Naturalista Nina” and “Effortless Elle”. Nina has been natural for several years and knows what works for her hair, but she mainly wants to make her routine easier. Elle wants healthy hair and is willing to try different products to achieve her desired result. I think I initially struggled a bit with creating these two personas, because I didn’t want there to be any overlap between them. However, I learned that there can be some common ground between different types of users and that they don’t have to be entirely distinct.
feature roadmap
It is important to prioritize the features that should come first in an MVP.
I developed a roadmap of all the features I wanted the product to have. I highlighted the must haves, nice to haves, and things that could come further down the line. I decided that the must-haves were personalized product recommendation, user profile creation, user reviews and ratings, purchase integration, and product details. I used this method so that I could organize my thoughts about what I wanted the product to offer in this first version. As a result, I was able to get more focused on the key elements. Next time, I think I would change the “can come later” section to make it more relevant. Even though these were ideas I would not get to in my first prototype, I think including things like “offline access” is not necessary as that is more of a developer task.
user flows
Strategically designing for the optimal user experience first helps when coming up with user flows.
Initially I had 3 user flows: one for creating a profile, one for personalized recommendations, and one for purchasing a product. I was able to condense them into two user flows: sign in and product recommendation. The user flows helped me figure out what screens I would need to design so that users could accomplish their goals. The result was that I was able to conceive of all the possible decisions users would need to make to get through to purchase. I learned that it is best to design the “happy path” first before considering any alternates. Approaching each path separately helped simplify things for me.
branding
Staying true to one’s brand is important when making any product.
I created a brand guideline presentation for my product so that I could have some direction when making stylistic choices. I made choices about everything from the logo, to the imagery, and the typography before I started designing. Originally, I wanted to include more animations and make it more cartoon like. I ended up going with a more natural approach so that real 4c hair would be depicted more. Just as products evolve over time, so does their branding, but I feel like I stayed true to the essence of what I wanted my brand to be.
wireframes
A methodical approach to wireframing improves the end result.
I made low fidelity and mid fidelity wireframes for my app. These really helped me nail down the structure and format of the app. Although I usually don’t invest the time in doing mid fi wireframes, I felt like it was really helpful this time because there was so much content that needed to go into the app. Being able to place images and then get into copy was a bit easier for me. This was also the first time I used a wireframe kit to make digital low fi wireframes. Usually, I would just do them by hand with pencil and paper. I didn’t quite like the way those would turn out visually when I was trying to add them to my portfolio, and I didn’t feel like they would have the level of detail required this time. I learned that going straight into digital format takes a lot longer because you start to agonize over small details too early, but I think it paid off.
ui kit
UI Kits enable a streamlined process when it comes to putting together elements to create a prototype.
I made a user interface kit for this project. The purpose of the UI kit was to streamline the design process. I needed to know what my basic hues and shades would be, and what icons, cards, and buttons would look like ahead of time. The result was one of my most visually appealing projects so far. I think having this organization really helped because I could basically just drag and drop elements when it came to making the transition between low and mid fidelity. One thing I will do differently in the future is make sure I keep frame size, and the content that has to fit, in mind more. This came up with things like product details. I had to modify that element a few times to make sure all the information I wanted to include would fit.
prototype
Variants and overlays improved the functionality of my prototype.
After adding in all the UI elements, content, and drawing connections I finished my high-fidelity prototype. I wanted to make the prototype fully clickable so that I could have users test it. I learned more about using variants this time. They really simplified the process of making the prototype because I could set it to change to a certain variant upon click. This is how I had users complete the hair assessment. This was also my first time working with overlays. I used this technique so that I could have the product detail sheet come up when users clicked on the product they wanted to purchase.
user testing & revisions
Remote, unmoderated testing can be great for obtaining quantitative results, however if possible it should be supplemented with moderated testing.
I employed a mixed-methods approach to user testing, utilizing both unmoderated remote testing and in-person usability testing, as well as a remote moderated test with Maze for the first time. This combination provided valuable insights from different angles. The Maze tool proved excellent for quantitative results, revealing that 100% of users navigated the first flow successfully, while only 25% achieved direct success with the second flow, with a concerning 28.7% mis-click rate. The in-person test enhanced my understanding of facial expressions and user reactions, while the remote test, my familiar format, delved deeper into user preferences. Challenges arose with Maze's settings, which flagged user exploration as errors, prompting me to simplify my prototypes. Consequently, I revised my designs by adding inactive states, adjusting button colors, simplifying prototypes, reorganizing content, and introducing an accordion menu for improved user navigation.
The Solution
Personalized product recommendation based on an initial hair assessment. Women with 4c hair can tell the app what their hair pattern combination is, how long their hair is, and what their primary concerns are in order to get a detailed hair plan and product recommendations.
Results
Through the unmoderated testing I was able to see the time on each task, the error rates, and even have a short system usability scale at the end of the user testing. In this way I could take users’ perceptions of the app and quantify them.
If I were to develop this product I would want to look at how many products are signing up for the app, getting through the assessments, and eventually purchasing products. Product purchasing is a key function of the app and part of revenue generation, so that would be a large focus. I would regularly check on customer satisfaction by asking users for surveys as well. This could be when the product is first introduced and any time a new feature is rolled out.
It brought attention to an underserved market. A couple users personally reached out to me to say how excited they were about the product and the fact that it was focusing on black hair. Hair is so important in our community, and it felt great to create a product that highlights the beauty and complexities of our hair.
Lessons
I learned that there is so much information available on black hair, but there are aren’t many apps invested in teaching us how to take care of our hair or even find out what products to purchase to do so. A lot of the knowledge is held in different sources, i.e. what has been taught by family, what you found on social media, what you’ve read, etc. There are always new hairstyling tools coming out, but there isn’t much mobile technology being dedicated to black hair so it could be a really good idea to explore further.
I also think that this project helped me grow in my UI skills. As much as we are taught to have a growth mindset, I still struggled with the idea of whether my UI skills would ever level up. I think I was looking at design as art—a skill we often think of as being innate. You either have it or you don’t. But a lot of it is about recognizing patterns. I think this project showed me that I can recognize what looks good and emulate it in my designs to improve.
