SkinCarisma
Redesign of an existing website, tackling the overload of information.
SkinCarisma is a website that helps analyze the ingredients in skincare products and to discover the right products for you. This project is a redesign of the website that helps with the overload of information.
ROLE
UX Designer and researcher
RESEARCH TOOLS
Competitive analysis
Interviews
Usability tests
THE PROBLEM
SkinCarisma offers a large amount of complex information. The overload of information makes users confused and disoriented.
THE SOLUTION
Clearing out some of the information, making the information accessible, and helping users choose the right skincare products.
THE PROCESS
MARKET RESEARCH
I've started with short business analysis to understand the market and the competition better.
SkinCarisma provides a breakdown of the ingredients. It displays the information visually using graphs and icons and helps users make informed decisions about skincare products.
ORIGINAL SCREENS:
WEBSITE STATISTICS:
* The information was taken from SimilarWeb
SkinCarisma is most popular in the US, and users find the information in it valuable. Users spend over six minutes on the website and visit more than six different pages.
COMPETITIVE ANALYSIS:
* The information was taken from SimilarWeb
Comparing to its competitors, SkinCarisma is not the most popular website, but it is engaging. Users interact with it more than some of the competitors.
PERCEPTUAL MAPS:
To understand where SkinCarisma stands among its competitors, I created perceptual maps. Each axis represents a key attribute as a basis, and each product is positioned compared to its competitors.
SUMMERY
SkinCarisma is not a popular website, but its users find it valuable. Users spend over six min in each visit, see over six pages, and its bounce rate is low. The website is easy to use, informative and gets the user involved.
RESEARCH - INTERVIEWS AND USABILITY TESTING
I’ve started with research that integrates interviews and usability testing. Interviews will help me understand user’s skincare habits which will guide my work. Usability testing will show me how users interact with the website and how I can improve the experience.
RESEARCH GOAL
I wanted to understand how people choose and buy their skincare products. What are their habits, and what are the most important things to them?
I also wanted to examine how people interact with the website - what do they find delightful, and what are their pain points.
RESEARCH QUESTIONS
How do people choose skincare products? What are the most important features for them?
How and where do people buy their skincare products?
Are people able to find skincare products using SkinCarisma?
What are the pain points when searching for products on SkinCarisma?
METHODOLOGY
The research method contains two parts - interviews and usability testing.
I started with 15-20 min interviews about participants’ skincare routines, and how they choose and buy products. During the second part, I asked participants to perform two searches on the website - one for a new moisturizer that fits their skin concerns and a second search for the moisturizer they are currently using and purchase it. In the end, I asked some wrap-up questions.
Example of an interview question - can you tell me about your current skincare routine (morning and evening)?
FINDINGS
MAIN FINDINGS
Information Overload (Usability Testing)
While participants value the type of information the website provides, the amount of information was overwhelming and confusing.
Icons help to Understand (Usability Testing)
The icons and graphs were the favorite things about the website, but some were still confusing. Participants tend to look at the visuals instead of reading the long text.
Nav Tabs are not Visible (Usability Testing)
Most users didn't navigate through the tabs and couldn't find the information they were looking for. Users said they didn't notice the tabs, therefore, didn't click on them.
Reviews from People like You (Interviews)
Reviews are extremely important. Participants feel it’s safer to buy products with a high volume of reviews from real people, preferably with the same skin concerns as them.
Buying Brands you Know (Interviews)
Participants prefer to buy well-known brands or products they experienced with (like samples). When purchasing a new product, they want to get information about the notable effects, brand, and ingredients.
Advice from Friends and Experts (Interviews)
Participants said they buy new products following recommendations from friends with the same skin type and experts.
CONCLUSIONS
SkinCarisma provides interesting and valuable information. The favorite part of the experience is the icons and graphs (although some were unclear). The main pain point was the overload of information which was overwhelming to users.
INITIAL CONCEPT
Based on the conclusions from the research, I designed low-fi screens. I didn’t change the UI design since my focus was the UX design.
*Scroll up for a larger screenshot
<— ORIGINAL SCREEN
NEW DESIGN —>
Product description contains information about the company and the notable effects.
Call for action for buying and sharing with friends.
I divided the overview tab into two: ‘Overview’ and ‘Ingredient List’ to keep the tabs lean. The overview tab is the first tab, and it contains the information users love the most - icons and graphs.
Instead of a long list of recommended products, I suggest up to 6 products in two different categories: products from the same brand and products from the same category.
Hovering on the numbers under ‘skin type’ will show the name of the ingredients.
Users weren't sure what is the ‘EWG Safety Rating’, clicking on it will provide a simple explanation.
I didn’t change the colors since users mentioned they're intuitive.
I’ve changed the copy:
a. The name of the ingredient will be first.
b. I removed the CIR rating since two different scales are confusing, and the EWG is more popular.
c. I rephrased the function part to sentences that people could read and understand.
Instead of presenting a long (and intimidating) list of ingredients, I’m presenting the top four, and users can click on ‘read more’ to see the full list.
RESEARCH - USABILITY TESTING
I wanted to test the screens I designed and see how people interact with them. I used InVision to create a prototype and used the usability testing methodology.
RESEARCH GOALS
The main goal of this research is to test the new design. To examine whether it's easy to find and comprehend the information and to reveal any unfulfilled needs.
RESEARCH QUESTIONS
Are users able to navigate, find and understand the information on the website?
Are users able to evaluate skincare products and purchase them? Is there any information they find missing?
RESEARCH METHODOLOGY
I used InVision to create a prototype and did usability testing. The research focused on the product description page, and I asked users to search for a product, evaluate it according to their personal preferences and buy the product.
In the end, I’ve asked the users some wrap-up questions.
Example of a question: What was your favorite part about the website?
MAIN FINDINGS
What's the difference between the reviews?
There were two types of reviews - reviews from SkinCarisma and reviews from other online sources (because SkinCarisma has a low volume of reviews). Users didn't understand the difference between the two.
Easy Interaction with Reviews
Users wanted to be able to sort reviews by best and worst reviews, and recently added.
The 'Skin Twin' Feature is not Visible
Users didn't notice the 'Skin Twin' features. When they were asked about it, they said it's a valuable feature, but they didn't see it.
Confusing 'Buy Now' Button
Users weren't sure what's the difference between the main 'Buy Now' button and the buttons under the tab 'Where to Buy'.
Tabs were Visible
All users used the tabs to navigate and found all the information they needed.
Users Loved the 'How to Use' Addition
Most of the users loved the 'how to use' tab and said that the icons simplify the content. Some users said they don't usually read this part.
CONCLUSIONS
Overall, users loved the website and found the information they were looking for. Two main UX challenges were found in the usability testing and needed to be improved - reviews and how to buy.
FINAL UX DESIGN
With a focus on the finding from the usability testing, I designed my final version of the website.
REVIEWS
New ‘Skin Twin’ feature - Interviews indicated that users want to read reviews from people with the same skin type and concerns. Users can create a personal profile, update information about themselves and browse through reviews from their ‘Skin Twin’, meaning people around the same age as them, with the same skin type and concerns.
Upon feedback from the usability testing, I added easy filters and sorting options of the reviews.
There’re two types of reviews: from SkinCarisma and other sources. Interviews indicated the importance of a high volume of reviews, and since SkinCarisma doesn't have many reviews, I added reviews from other sources. When the volume of reviews increases, I'll remove the reviews from other sources.
A large call for action to prompt reviews.
HOW TO USE
This information was not a part of the original website, but users said they would like to know how to use a product before buying it.
Icons help users digest the information more easily.
WHERE TO BUY
Users said they usually compare prices when buying a new product. In this tab, they can see price comparisons.
In the initial design, there was a ‘BUY NOW’ button in the product description area. Users found it confusing and didn’t understand the difference or anticipate what will happen after clicking it, therefore, I removed it and left only the buttons in this tab.
NEXT STEPS
The search flow was also very confusing for users. Since it’s a popular flow, I’d start with implementing the finding from the first usability testing to create an initial concept and test the design again using usability testing.
I would also want to develop the ‘Skin Twin’ feature more since I believe this feature can lead to high engagement with the website. I’d do a combination of usability testing and interviews to check the current visibility of this feature and its value for users.