FORMULE

OVERVIEW

Formule was founded by a chemist who wanted to cut through the noise of the skincare space by providing bespoke formulas that are simple and easy for customers to understand.

I worked on this project with a fellow product designer. Our client wanted a website design that allowed the user to experience the process of crafting their own skincare routine that would take into consideration their unique skincare needs.

ROLE

One of two Product Designers

Product Strategy, User Research, Interaction, Wireframing, Visual Design, Prototyping & Testing

DURATION

4 weeks

BACKGROUND & RESEARCH

Our client is a skincare expert and chemist. She wanted to create a product that eliminates the noise in the skincare space. Too many consumers are overloaded with information about ingredients and products that promise to fix their skincare complaints. But the problem is that no product is a “one-size-fits-all” cure to universal skin problems. The founder of Formule wanted to educate customers about what ingredients would work best for them and hand-craft a custom formula that would be informed by science to be effective.

As the client would primarily be selling her product online, she wanted us to design a website that would capture the experience of working 1:1 with an expert to craft an effective yet simple skincare solution for its users.

RESEARCH

We started with some secondary research about the skincare industry and evolving trends in skincare. This helped us to discover what seemed to be most important to users purchasing skincare and factors that influence consumers to try new brands.

74%

of consumers are likely to purchase from a store or brand that includes customer reviews throughout their website

62%

like brands who have user-generated content (like photos of real customers using the products)

72%

are motivated by free samples to try products before purchasing

INTERVIEWS + SYNTHESIS

We then interviewed 3 people each (for a total of 6) to discover their current method of purchasing skincare and any challenges or pain points they have. We compiled our findings into an affinity map where we first categorized the main themes. Then we reorganized each theme into specific thought patterns and feelings that would help inform our designs.

*our affinity map organized into main themes/ thought patterns of users*

From these interviews and affinity map we were able to categorize the themes which we would focus on in our ideation. Since this would be an e-comm product, we wanted to focus on the user’s shared motivations on purchasing skincare products. When we designed our solutions, we would hit every one of these motivations through the experience of the site.

Quality

Users cared about how the products were made and the quality sourcing of ingredients. They also were interested in cruelty-free products and certifications that ensure product quality.

Community

Users were seeking out skincare advice and information through platforms like Instagram. They sought out other people who had skin like theirs to see what worked for them.

Effectiveness

Most important to users was that the product works. They had a history of using skincare products that failed to work for them and were frustrated at the “trial-and-error” approach.

Transparency

Users were not interested in trying new products from nameless, faceless organizations. Part of why they liked seeking information on Instagram was because there were real people attached to the accounts.

New purchase incentives

Users were very loyal to brands they had been using for many years. Incentives to try new products included free samples and money back guarantees.

IDEATION

SKETCHES

My partner and I sketched different parts of the process. I started by creating rough user flows and ideas on how we could make the process interactive.

WIREFRAMES

Wireframing is an integral part of the process for me. Laying out the placement of buttons, details and features and testing these things before working on visual design ensures the framework is successful. I created these wireframes using Adobe XD.

DESIGN & VISUAL LANGUAGE

Logo and Logomarks

For the brand, we wanted to create a look and feel based around the client’s vision. She wanted the brand to look different than other beauty brands that use greens and beiges to denote a “natural” vibe. We were inspired by the founder’s own photography for the brand which utilized her favorite color, purple, with accents of dark teal. These were balanced by clean black, white and light nude to convey a sense of minimalism and lightness around the brand.

Logo wordmark and icon alternatives

Typography + Color

The main logo font is modern and suitable for a sophisticated taste. It conveys a high-end product with a luxury feel. This font is also used in headlines throughout. To balance it out, we use Martel Sans for functional text that needs to be easily readable.

Core colors are black, white and light cream with pops of bright purple for buttons and icons. A neutral teal is used to accent and create balance throughout designs.

The Prototype

COMMUNICATING THE MESSAGE

Because the product is new to the user and the concept is unique (the user will get customized formulas), we needed to communicate how the process works to the user right away.

TRANSPARENCY

Each of Formule’s products are handmade specifically for each individual customer. The user becomes a part of this through the use of a questionnaire that uses the user’s input to create the basis for the custom formula.

The user then receives their custom formula. The ingredients are sustainably sourced and cruelty free. Since these factors contribute greatly to customers willingness to purchase, we emphasized them on our screens with an interactive formulation guide.

A huge part of Formule’s story is the story of the founder herself. She created the brand with a mission in mind. Highlighting her mission and values creates additional transparency to the customer. We added an “About” page that gives the user this information.

COMMUNITY

Customers who are considering trying a new brand will look to other real users to validate the effectiveness of the product. We wanted to create several paths where the user can see the results of other users. On the home page, we feature one user’s skin story, which links to a larger page highlighting that customer’s journey.

TESTIMONIALS + REVIEWS

A major determiner of purchasing is the ability for the user to see reviews from other users, particularly those who have similar concerns or skin type as they do. We created a page with user reviews complete with user-generated images and videos. Users are also able to filter by skin type and concern.

BESPOKE SKINCARE

One of the things that makes Formule unique is the 1:1 consultation that the founder will have with her customers. The user will have the ability to schedule a virtual chat with her to address skin concerns and further refine their formula. We created a scheduler flow where the user would select type of consultation, time and date.

TESTING

The next step was for us to test our design. We performed usability tests on 3 users. As a result of this testing, we were able to identify further improvements we could make. Here are a few important changes we made:

BRAND STORY

Many users wanted to understand the story of the founder earlier in the journey. We added the founder’s story to the home page with a link to her about page for more information.

BUTTONS

We found some usability issues with our buttons - our tags appeared to look like buttons and our outline buttons didn’t appear obviously clickable to the user. We added drop shadows to outline buttons and changed tag color to grey to indicate non-usage as buttons.

SCHEDULING

Initially, we chose to put the ability to schedule a 1:1 consultation at the beginning of the checkout process. If the user wants to add on a consultation, they would have to leave the checkout page and log in to schedule and then come back to the checkout flow. A few users felt that it would be too much work and believed they would leave the site at that point and not go through with the checkout.

We decided to revise this and have the consultation automatically added to the shopping cart during checkout since it is free with purchase. We then had the scheduling flow take place as an overlay modal so that the user didn’t perceive themselves as being taken out of the checkout to another additional page.

DESIGN PROCESS

FINAL PROTOTYPE

Overall, we needed to create a site that would be easy to understand and navigate given the novelty of the idea. There aren’t any truly bespoke skincare brands on the market and we needed to communicate the message of the brand while ultimately cultivating a trusting environment for the user. The goal of any e-commerce site is to increase conversions and make their company profitable. Rather than appealing to overt sales strategy, we put the user first by understanding how they felt about buying new products and what they look for when deciding whether a brand makes them feel good and makes them trust the product.

Through the use of displaying real user stories, creating a storytelling opportunity around the company’s founder and validating the transparency of the formulas and ingredients used, we created a site that will increase trust and excitement for the user.

NEXT PROJECT: TINY TALES

A bedtime reading app for busy parents and their children