TINGE - Website Redesign
Introduction
Problem
TINGE beauty is a clean body brand that needs a highly functional and engaging website to introduce its first product - TINGE body tint, which is launching in a few months. How might we redesign and create a highly engaging, streamlined website (product discovery and shopping) that encourages purchases?
Solution
The solution was to redesign existing workflows from landing page to check out, by promoting and showcasing the product's value, unique features, and main selling points in a clear and engaging way.
The Team
UX/UI designer (me) - I executed all research, design, prototyping, and usability testing in collaboration with the founder & CEO.
Project Length
1 month (November - December 2020)
Research
Discover
Since the brand had an existing website, I started my research by reviewing existing flows with a few target users to uncover the biggest usability problems and determine areas that need the most improvement.
Here are some key quotes from user research:
“Doesn't strike as a body beauty brand from the first sight - looks like a clothing brand.”
— I.Z, Female, 26
“I don’t know how to interpret the shades, how do I choose the right one?”
— I.Z, Female, 26
“How is this product better than all others in the market, why should I buy it?”
— R.G, Female
Next, to understand how user experience can be improved, I analyzed competitors to see some existing examples that might work for this project.
The competitor research helped me to understand how other successful businesses have approached similar challenges - introducing beauty products in a way that encourages visitors to make a purchase.
This analysis also revealed which flows of promoting new product users would already recognize and swiftly navigate.
My Competitor and User Research Revealed Core Features:
Simplify the navigation by using well-recognized e-commerce patterns - present header at all times with the main elements every shopping experience has - shop, about, shopping cart.
Clearly communicate the value of the product, its biggest advantages through pictures/videos, focusing on one benefit at once.
Make it easy for people to make a purchase by including the option to purchase the product right from the landing page.
Promote community engagement and build Instagram followers by integrating the Instagram feed into the landing page.
Allow people to easily get help when needed by having a floating Help/Chat.
Provide all necessary information that is easily discoverable, build client trust by having a well-organized footer in sections with links to all web pages, FAQ, contact information, privacy policy, terms of use, subscribing to a newsletter, social media links.
Simplify the shade selection by displaying available shades with color and its name, organize them into 4 sections (Skin tones).
Make the details section more engaging, by not overfilling with text, focusing on highlighting the product benefits, how it’s different from other similar products.
Design
Define & Ideate
Based on the e-commerce patterns I observed on other similar websites and insights from user research, I determined that in order to greatly improve the user experience, we need to clearly communicate TINGE tint value, unique attributes, selling points throughout the flows and make it easy for the user to make a purchase. After communicating my recommendations and deciding on the features with the client, I quickly moved onto sketching possible ideas that could solve the problem best.
In order to quickly validate chosen solutions, I designed low fidelity wireframes with XD and conducted a series of user tests with a clickable prototype.
The video of the prototype interactions can be seen below:
Validate
Usability Testing
The first round of usability testing revealed some problem areas that need more improvement. The uncovered problems, proposed solutions, and iterated screens can be seen below:
Landing Page / Navigation
Problem
• Find your match feature - not prominent enough on the home page without scrolling to it.
• The “find your match” phrase caused confusion of its meaning to some participants.
• Shop / Shop body buttons brought a little confusion as they redirect to the same product page, but the naming is different.
Solution
• Add find your match link to the header.
• Change “find your match” to a more straightforward phrase that most people are familiar with - “shade guide”.
• Change all the CTA button titles into the same one to keep the consistency and eliminate any confusion in the future.
Landing Page - Product Shade Picker
Problem
• Landing page - the product lineup of 4 shades - “Can I go to the product page from here?”, “Can I see a bigger picture of the selected shade?”
• Since each main skin tone has 3 more undertone shades revealed by hovering, some users weren’t aware of those additional 3 undertones and the option to buy the product from the landing page.
Solution
• Make the picture of the product change to a selected shade picture, link the shade name to the product page.
• Display the undertones under the main shade, so the person is aware that there are more shades to choose from without hovering.
Product Page - Details
Problem
• Product page - “I would like to see more product-specific info - the coverage and the finish.”
• Double scroll on the product page - “I want to see all the ingredients and how to use the product sooner, without scrolling all the way down”.
Solution
• Gather product specific information from the founder and include it on the product page.
• Change the location of all ingredients and how to use the product to make it more accessible and visible - below the product pictures and “add to bag” button.
Product Page - Reviews
Problem
• Reviews - “I would like to see pictures of other people, how the color they bought looks on them.”
Solution
• Add the option to leave pictures with the review.
After iterating my initial screens, I conducted a second round of usability testing to uncover any additional issues preventing users from discovering the new product and making a purchase.
The second round of testing confirmed that the previous issues were resolved, but some new issues were identified, which were mostly regarding the content and copy:
Landing Page - Hero Image
Problem
• Landing picture and text - not clear what product is sold without scrolling down.
Solution
• Since at this stage client didn’t have the product pictures yet, I made a recommendation to replace the hero image with a product picture of all 12 shades lined up.
• Also, add the subtext that explains what product is being sold.
Product Page - Details
Problem
• “I want to see how the product, different shades look on other people.”
• The best bits - “I want to see more of the actual product, practical info about its features. Why should I use this tint?”
Solution
• Replace current pictures with product pictures next to the person of that shade to visualize how the shade looks on the person.
• Add the product use cases and emphasize them, move less important information to less prominent side - left.
Product Page - Reviews
Problem
• Reviews - “I would like to filter them so I could see all the reviews with photos attached.”
Solution
• Add filters and sort by.
Final Interactions
“The reviews are very helpful to see the people with the same skin tone and how it looks with the product on.”
— M.H, Female
“I think it (website) does a really good job making it easy to make a decision (to buy).”
— B.T, Female
After final iterations, I prepared a style guide of the main UI elements with different states, so that the brand could utilize them in the future, in order to keep consistency in design.
Outcomes and Lessons
With this project, I got the chance to work on unique e-commerce challenges: how to create a highly engaging, streamlined website that helps to discover the new product and encourages purchases. I also got a chance to collaborate with the business owner and help to solve their business problem before their new product launch.