The Product
Face is a newly e-commerce beauty company which just launched as a concept and idea. Their vision is to democratise beauty and break down unrealistic beauty standards by offering more clinical skincare products to millennials who have skincare problems such as itchy skin, eczema, acne, etc. They would like their website to reflect who they are and become a ‘safe space’ for people who have skin conditions, being able to collaborate with medical professionals to offer guidance.
The Problem
The main challenge is not having a website which reflects the company's personality, ethos and clear transactional steps to be able to create brand awareness and sell their niche products. As a start-up and not an established brand, they also do not have a big budget allocated to their UX/UI strategy, as their competitors do.
The Goals
-
Create a responsive site to help the company to promote their clinical products as a new player in the market
-
Create a user-friendly and intuitive customer and buyer journey
-
Create the main core pages initially to bring it up to speed and build a digital identity
The Design Process
I've started the design process with the competitor research to understand the market and what others are doing well. Then, based on that, I've conducted interviews with people from the potential target audience (people dealing with skin condition issues). Based on the responses and content audit from the competitors, I’ve sketched and created low-fi wireframes and tested the prototype with the interviewees. The feedback received was positive overall from how the brand looks and feels and the general usability and process. With the challenge of having to create all of the visuals assets from scratch as the business didn't have a brand built / promoted.
Discovery research - user interviews
I have interviewed five users via video calls in order to understand their frustrations and core needs when it comes to finding skincare products based on their skin condition, asking to share some examples of brands they've been using so far and the pros and cons observed while using them.
Below are a few sample questions used during the interviews:
-
Where do you currently look when wanting to purchase skincare products?
-
Do you already have some go-to brands you're using for that?
-
Can you name one brand you particularly use / like?
-
Tell me what you like about this brand in particular (look&feel, user experience, range of products &functionality)
-
What is the biggest pain point related to this brand or any other that you tried and you didn't like?
-
Are you looking for a solution or alternative to your current brand?
-
What are the things you'd like to see that are missing from the current market players?
Takeaways
-
Skincare in terms of dealing with skin conditions is usually neglected by the big players in the market
-
Users would rather trust dermatologically tested products with recommendations from specialists in this area
-
All users feel that there is no bespoke process of finding the right fit for their condition as everything is generic
-
They have found a close process on a similar brand but it's currently missing the personalisation functionality
-
Users would prefer a simple and easy checkout process to follow and be able to ask professionals in the area for advice
User Persona
User Flow: Purchase a skincare product
User Flow: Utilise product matcher
Sketches
Homepage
Product matcher
Blog page
Homepage cont
Product page
Testimonial page
Wireframes
Homepage
Product matcher
Product page
Blog
User Interface
Homepage
Checkout - add to cart
Checkout - payment
Product matcher
Product page
Checkout - product info
Checkout - confirmation
Product matched
Prototype
Usability testing
I have run 5 usability testing sessions moderated remotely using the high fidelity prototype. The users were asked to complete the following tasks:
First task
-
On the homepage (first screen you see) identify the products page and navigate to it
-
From the product page, add a product or multiple to your cart
-
Check what items are in your cart
-
Follow the checkout steps to purchase one of the items you've added to your cart
-
Checkout your order successfully
Second task
-
On the homepage, identify the product matcher page
-
From the matcher page, select from the list the most appropriate condition you have/relate to
-
Once selected, see if you can use the 'find your match' function underneath
-
Based on the suggestions provided, select one recommended product and add to cart
-
Complete the checkout steps from the previous case
After the tasks were completed, I asked each user to provide feedback in terms of their experience in using the prototype. The purpose was to allow me to assess the usability of the prototype. Below are the set of questions asked:
-
What is your overall opinion about the product and site?
-
What did you like most about using the product/site?
-
What did you like least about using the product/site?
-
What do you think can be improved?
-
Did you feel lost/get stuck while doing the tasks?
-
Would you keep using this product moving forward?
Answers:
-
I felt like this was an online apothecary where I can find everything I need and be able to help someone working there if I get stuck or I want to ask someone for help/recommendation
-
I liked that the purchase process it's really straightforward and intuitive, not to mention loved the look and branding - I thought it's really welcoming
-
I really liked the fact that the website felt more authentic and thought the derma chat was brilliant as a functionality. However, I would expect those response times to be reduced to less than a couple of minutes, to be used. The current response time are too long in my opinion
-
I had a good experience conducting the tasks and browsing around. Felt like a virtual pharmacy for me, but fancier. I would've preferred to also have an option to add some products to my favourites and come back to them later on to checkout
-
Thought the product matcher was super helpful and it showed more consideration to the users' challenges. I would've liked to see maybe an option where you can suggest more conditions (in case someone lands on the site and cannot see the option that fits them)
Measuring Success
Below are a few tactics / metrics to look for to measure the success of this product:
1. Monitor the products purchased via the site.
2. Monitor the bounce rate and the overall traffic on the site.
3. Find out where the users get stuck. Use Hotjar and Google analytics to monitor where people are dropping off and abandon the checkout.
4. Monitor the number of recurring customers vs new customers.
Conclusion
Overall the project was a success. The feedback was positive and the users found the buying process simple and frictionless. The look & feel of the brand also helped in establishing a bit more trust in the product, especially that users were able to message a dermatologist directly. However, some recommendations received were around the response time of the derma chat to become instant as to aid the buying process. Also, some of the users would've preferred to have an option to add the products to their favourites (later on checkout option). Another great feedback was around adding a way for users to suggest some new conditions to the list of options currently listed, to continuously keep it relatable to everyone.
