How might we build the design language of a company from ground up?
What is Farms2face?
Farms2Face is an online retail store that provides personalised skincare by identifying the uniqueness of one’s skin and matching it with natural and organic ingredients.
What was the challenge?
The founders had a very simple brief: Design a brand identity and visual language for the skincare industry disruptor and design an effective UI for their website, which will be their primary touch point.
My Role
I was part of a team of four, which included the two founders and an engineer. Since I was the only one with any design background, I worked on all the creative aspects of the start-up. I designed the brand, the web product, the packaging and even did the photography. I planned all the research and collected data with the help of the founders. I tested prototypes with the help of Rajiv Ravi, the engineer.
Impact
As a young start-up, Farms2Face has made a lot of progress since its launch in 2017. Since it is a new venture we didn’t have any benchmarks to work with. So, we decided to judge the success of the product by the engagement generated by the questionnaire. The website has a 16% bounce rate with most users going directly to the questionnaire. 81% of the users who started the questionnaire, completed it. 12% of the users that saw their skincare results converted into customers.
Image on Cover:
The visualized website using the new visual language
TEAM Rupashri Bhat, Sudharani Bhat, Rajiv Ravi, Shantanu Salgaonkar
I joined Farms2Face as their 3rd team member (The two founders included) in December of 2016. All we had at the time was an idea: To provide consumers with customized skin care products tailored to their unique skin.
Growing up, Rupa and Sudha worked with their mother, who has a lifetime of experience as a naturopathic skin care aesthetician. There, they saw, helped and learnt that every skin type is unique. While the rest of the competition was using a one-size-fits-all approach, the sisters went back to their roots and started making their own skin care products. They started using this knowledge to create face-masks for their friends by interviewing them and then matching the natural ingredients that would be right for their skin. This idea grew into Farms2Face in 2016.
User interviews
I decided the best plan was to first figure out who we were designing for. So I created a testing plan for us to have video calls with potential users and spoke with roughly 30 people about their daily skincare routine.
Insight
User personas
The interviews helped me define three types of users:
Extreme User 1
Least likely to use the product
Average User
Most likely to use the product
Extreme User 2
Likely to use the product for uses that haven’t been marketed or intended.
Apart from creating the User Personas, the scrappy research program that I put together, helped me come up with problem statements, that helped me define the problem space for our project.
“I don’t trust these big brands to be chemical free”
“How do I find the right ingredients for my face mask?”
Problem 1
Problem 2
How might we
Create a brand that is relatable to our user.
How might we
help people find the right face mask for their skin.
Problem 1
How might we
Create a brand that is relatable to our user.
Creating these personas helped us define our gamut of users and gave us an overview of how the brand would be perceived by them.
What followed was a 3 week long immersion with the founders, understanding their story and their vision. We conducted brand exercises and more interviews (interviews conducted with prospective users that fit our brand persona) over the period of time and built our brand prism which helped us understand the positioning of our brand.
Once we had locked down the brand strategy, it was time to start with the design process. Starting with designing the brand identity.
Left: The prism that organized our learning from the discovery sessions. Unfortunately our learning is confidential and I'm limited to only showing our brand essence.
The discovery exercises helped shape the brand, not just for me, but the founders as well. It gave us a visual idea of what the brand should look like which was discussed over various moodboard iterations that focused on larger discussion like, “what should the brand feel like”. The brand was distilled into three visuals that represented the company’s three core values: unique, fresh and natural.
For about a week, I sketched ideas for the logo keeping in mind that it had to be a culmination of the values that Farms2Face stood for. I set certain practical applications like, ability to be screen printed and legibility in small sizes as constraints to test my ideas against.
The final identity has visual cues that a prospective user could relate to. The mark is a well balanced symbol that carries the idea of a unique and fresh personality rooted in nature.
The earthy color palette and the rough edges treatment to containers, rooted the identity as a natural product that embraced imperfections as uniqueness and shunned anything that was artificial.
The beautiful irregular shapes and brush lettered characteristics of the display typeface (Selima) projected a visual language that’s friendly, approachable and rooted.
Farms2Face only uses organic and natural ingredients in it’s handmade creations. This point needed to be reinforced in it’s visual language.
We wanted the users to see the actual ingredients Farms2Face would be using in the products. We wanted to have that transparency with our consumers and it could not be achieved with stock photographs. To build trust in our brand I decided it was prudent to have a photography program of our own.
A borrowed tripod, a table and couple of chairs couples with some work-around solutions in a garage. That’s all I needed to build a makeshift white box on a very tight budget. I shot every ingredient with care and made sure they were in the state they would be used in the products.
Left: The founders and I in our makeshift photography studio in the garage.
A total of 197 ingredients were shot in the garage over a period of 5 days
I had a bit of a throwback moment to college when I took portraits to give a human connection to the brand.
Left: Shots of the model that were tied together to create a sequence that was used in the website.
Problem 2
How might we
help people find the right face mask for their skin.
To create the right face mask for your skin, it’s is important to first understand your skin.
The founders’ mother, who has a lifetime of experience as a naturopathic skin care aesthetician, would ask her clients with a set of questions which would help her understand the skin type and the right ingredients to be used for it. This process was translated into a decision-tree that could be programmed to find the right ingredients based on the user’s responses.
Left: A screenshot of the decision-tree chart that was devised to help find the right face mask. I haven't reveled the whole flowchart since it is propriety information
After we had decided on the flowchart and the corresponding wireframe that reflected the questions and the sequence in which they would appear, I started exploring UI ideas.
Prototyping
To build a good user experience for the the questionnaire, it was important to understand the user’s behavior. To do that, the programmer and I created a basic prototype and tested it with actual users. We observed how users interacted with it and I took that understanding to inform my design decisions.
Insight
We realized that users wanted to go back and change previous answers a most number of times.
To solve for this problem, I designed an interaction, that we called progressive disclosure.
It revealed one question, and upon selecting an answer would automatically scroll down to reveal the next question. If the user wants to change the previous answer all they have to do is scroll back up and select whatever answer they want. This prototype was received favorably in our testing and gave us the desired response from our users.
This prototype was built on principle. I used this tool to communicate with Rajiv, our engineer, how the interaction would work.
The visual design for the website needed to follow the brand pillars we had defined during the discovery session: unique, fresh and natural.
We took this approach seriously. So I decided it was important for our homepage to feel exactly like that and deliver that promise to the user. I decided to make that impact by physically crafting the header image. A well drawn type on the face delivered that promise of uniqueness while giving the visual cues of a face mask.
Conclusion
This project was an incredible learning experience in working on an end-to-end solution, owning every aspect of the design process. At Farms2Face I had the opportunity of working with an eclectic team. Being the only designer on a nimble startup of four, I got the opportunity to build the company's design philosophy from ground up – a jack of all, right from branding and packaging of the product to web-design and photography in the garage turned studio. I used the freedom to test prototypes with real users and collect data through behavioral observation. My decisions were based on data, and watching the data-driven design succeed was an eye-opening experience. I adapted and started using tools such as Principle to design custom interfaces.
It was wonderful to see our dream and vision visualized in the form of a brand. The visual language hits all the right notes with our audience and the website UI is truly a very smooth experience. I feel confident about our launch knowing we have a strong design backing our product.
Rupashri Bhat
Co-Founder
Farms2Face
+ INTERACTION DESIGN
+ BRANDING
+ PHOTOGRAPHY
Next Project
Previous Project
Palo Alto
© Shantanu Salgaonkar 2019
Background
Research
Branding
Photography
Progressive disclosure
Farms2Face
What did the client say?
Problem space
Solution
Solution
Interface design
Visual design