A design challenge attempting to meet the needs of haircare devotees.

Hera

Project

Info

Role

Product Designer

Timeline

June - July 2022

Tools

Figma

My project was inspired by the growing interest in conscious haircare - advanced haircare practices with the use of natural products - a movement known in Poland as “włosing”. A follower myself, I decided to design an app that would help to organize daily haircare routine and make it more accessible to beginners. I conducted research and designed a high-fidelity prototype.

Overview

Conscious haircare enthusiasts struggle with keeping a steady routine and lack knowledge about haircare products.

A mobile app prototype that helps with keeping daily & weekly routine and teaches how to maintain healthy hair.

Problem

Outcome

End result

A personalized haircare plan is generated based on user's hair type and the results they want to achieve. The plan can be modified at any moment.

Monthly and weekly view show the planned treatments. Each treatment comes with a short guide and predefined products. When completing treatments user can rate their hair condition and add a photo/note - this way user keeps a record of their haircare journey and tracks improvement.

Product scanner can be used on any cosmetics' bar code and it shows key information in the product database. Product can be added to our shelf. Ingredients are marked by color to immediately understand if they are beneficial / neutral / harmful.

Design process

User research

1

desk research, online survey, interviews, persona, empathy mapping

2

Strategy

competitors analysis, feature voting, success metrics

3

Ideation

user flows, wireframes, design iterations, interactive prototype

4

Testing

usability tests with 6 people, design improvements

5

Final design

building a design system and detailed UI, hi-fi prototype

Research

I launched a survey among Facebook haircare groups to learn about:
- the pains and experiences regarding conscious haircare;
- the solutions people use to keep track of their routine and examine products;
- the attitude and expectations towards hair maintenance applications.

Where did I look ?

I analyzed available sources of knowledge about haircare, especially those on the Polish market. Conclusions: people are more and more invested in conscious haircare, to the point where it became a beauty trend. The knowledge and tools are scattered over various websites, apps and books.

Detailed discussions with 4 people actively engaging in conscious haircare helped me better understand the daily struggles, challenges and goals of this group. They even demonstrated some solutions and techniques used to organize all the routines.

Online survey

Desk research

In-depth interviews

Discovery

Why do people need this product?

Time management & negligence

Conscious haircare is too complicated

Tracking progress and products used

Strategy

What do competitors do well?

Product premise

Major conclusions

✦ the perfect solution should combine functionalities of ingredient scanners and haircare planners

✦ the solution should introduce beginners to advanced haircare practices

✦ the solution should be a mobile app so users could scan products at the store, receive reminders and quickly add photos

Ideation

Modeling the design

Having decided on MVP features, I designed basic user scenarios. During modeling stage I developed each of user scenarios into a user flow diagram and wireframe sketches. This helped me to discover new correlations, needs or blind spots that needed correction. Next, a prototype was designed in Figma and presented to users for testing.

Visual design

Styleguide

Icons for treatments

Delivery

Usability testing

App was rated as aesthetic and intuitive, with an interface inviting to dive into more options. Users appreciated the step-by-step haircare guides and possibility to track progress with photos and notes.

Issues

Recommendations

✘ Haircare plan lacked the overview of current week, users had to click each calendar day to see details

✘ Ingredient list was not clear enough, difficult to tell if a component was "good" or "bad"

✘ Users searched for product scanner in Product Shelf area

✘ Before using Product Scanner users had to choose of two options (search or analyze) - they preferred to scan the product first and then decide

✔ Added scrollable list view to My Plan page with more details shown

✔ Added color marking to individual components for quicker eye scanning

✔ Product Scanner added to bottom menu as a separate feature for quick access

✔ Simplified Product Scanner, added action options to post-scanning product details page

Results

01

Project outcomes

In an ideal world, this app would contain all haircare-related tools (planner, product scanner, product library, knowledge, community etc.) however this would lead to occupying more storage space and heavy implementation workload. If this was a commercial project, I would opt for leaving only planner and knowledge in the MVP and gradually adding new features along the roadmap.

02

The finished prototype can be found here. I really enjoyed this project because of the creative freedom and range of functionalities included. I learned how to design planners and include daily and weekly routines. While making the prototype I had the opportunity to learn advanced Figma prototyping options which allowed me for more flexibility and improved testers' experience.