Everyone doesn't have the same hair, hair type, and hair features. So why do we use a'standardized' shampoo? Function of Beauty is personal beauty care, based on your hair type, hair goals, and you. Its a Function of you, and only you can complete it. The goal of the hair lab was for people to see how each individual ingredient was impacting their specific type of hair and hair goals. The Founder, Zahir, and I went back and forth on designing a unique flow for people to learn not only more about shampoo, but how this shampoo could give them the best personalized health care.
Goal
Clarify product offerings without losing the scientific search that's core to Function's brand.
Early Mocks
‘t first we went with a design with a microscope hinting that this function would be used for'looking into' the bottle of shampoo or conditioner. Some of the issues we found were many people either haven't used a microscope, won't know what parts of the microscope are functional, and it really had nothing to do with hair aside from the fact that the screen represented a'hair lab.'
First Iteration
This first iteration was a bit better than before, only because it was a lot more intuitive, so we thought. It didn't have anything obscure like the microscope in the previous mockup, but it had way too much going on. Where do you even begin? What happens if you click a bottle with green liquid? Pink liquid? What about all those hair strands. What if one of those strands doesn't look like my hair? And do I pick my goals first, then the bottle, then the hair strand? Or is it another one of the 27 series of options I have? Too much. Back to the drawing board.
Second Iteration
Whenever users go through the process of ordering a bottle of shampoo/conditioner, they are required to tell us their hair goals in order to receive the most personalized product for their hair. If we created the hair lab for users to experiment with the lab, then we would automatically know what their goals are. This information would eliminate 23 of the previous 27 options that were available. But it was still too much effort, dabbling between all of the bottles and hair strands that may not even apply to a user's hair. And what if a user wasn't signed up? Using the lab would just add more friction to the entire process.
Final Mockup
When anyone opens a book, its usually read left to right. We decided to reply on this intuition for our hair lab, in addition the the features we added. People can take a look at their hair, and select two out of the four hair profile options instantly(Color treated and type). If they touch their hair, then the other two options become very easy to answer(texture and moisture level). The next chapter is goals. Function's target group are people who either want to improve the quality of their hair or people who want to maintain the things that they love about their hair. The people within this group often know what their goals are, as presented by the multitude of options in the'Hair Goals' section. After the first two options are selected, the specific ingredients in their custom shampoo becomes highlighted, and hovering over the bottle would give a quick description of the role of that ingredient in helping you have healthier hair.
Function of Beauty
Overview
Goal
Early Mocks
First Iteration
Second Iteration
Final Mockup
back to work