CASE STUDY - REDESIGN(2023)
Tonic15
Tonic15, a UK-based Korean skincare online retailer, offers a diverse selection of Korean skincare brands along with exclusive product launches. Despite the rising popularity of Korean beauty, Tonic15 faces slow growth amid increasing competition. To stand out, the website aims to prioritize user experience by improving navigation for personalized product discovery and creating a seamless purchase, and checkout process.
Role
Re-design
UX research
Wireframing
Prototyping
Tools
Adobe XD
Adobe Photoshop
Team
Koeun Lee
Problems
Contrary to the growing popularity of K-beauty, sales have reduced by 34% of sales and there was a fall in returning customers by 12%.
Goal
Improve customer satisfaction from landing to checkout for higher sales and more returning customers.
Understanding The User
PRIMARY RESEARCH
01
I conducted a user survey with 30 participants ranging from their 20s to 50s, all of whom had experience shopping at Tonic15. The survey comprised 20 questions, covering aspects such as shopping experience and feedback. The objective was to gather quantitative data to gain insights into user behaviour while navigating the Tonic15 website.
Satisfied
40%
Dissatisfied
50%
Neutral
10%
PURCHASING
PROCESS
The purchasing process received approximately 50% negative feedback, contributing to an unsatisfactory buying experience. This dissatisfaction was attributed to issues such as the presence, absence, or location of the CTA(e.g. add to cart) button, as well as some features that were not easily noticeable.
02
SECONDARY RESEARCH
I conducted market research to gather information about the Korean beauty industry in the UK, with a focus on identifying demographics.
Curiosity to new and innovative products
Interest in organic, Vegan products
The surgen in
e-commerce
31.2%
21.2%
31.8%
15.8%
Very popular
Quiet popular
Popular to some enthusiasts
Not really
Consumer research supports our predictions from Reportlinker.com on the popularity of South Korean beauty products. Conducted by Statista in 2019, the research revealed that approximately 52.4% of respondents in the UK stated that K-beauty is popular.
In another survey by Statista in 2021 in the UK, around 28% of respondents stated that the wide variety of product types was a main positive aspect of consumers' impression of Korean beauty products.
Reportlinker.com reported that the global K-beauty products market is expected to grow at a CAGR of 10.07% over the forecasted period of 2022 to 2030. The market growth is facilitated by key drivers such as the rising need for organic products, the surge in e-commerce as well as social media and the curiosity to try new and innovative products.
KEY INSIGHTS
03
The research highlights the substantial popularity of K-beauty in the UK, driven by users' fascination with diverse and innovative products. To capitalize on this trend, websites should prioritize a user-friendly experience, granting easy access to information about products. Streamlining the purchasing process is also crucial to deliver a simple and efficient user experience.
04
PAIN POINTS
1 DIFFICULT TO IDENTIFY PRODUCT KEYWORDS
The disorganized and long product description makes it hard to grasp product characteristics quickly, hindering effective product selection.
2 INEFFECTIVE SEARCH FUNCTIONALITY
Difficulty finding products due to a hidden search bar and an inconspicuous search icon.
3 HIDDEN IDENTITY
Users feel disconnected from TONIC15's unique character on the skincare website due to obscured branding elements.
4 COMPLICATED NAVIGATION
Requiring users to click multiple times in the menu bar, causes frustration and hinders a seamless browsing experience.
Fresh, Soft, Clean
1st Head
2nd Head
Body
Style Guide
I maintained the same color palette and font style as the original design asset that was recently updated. However, upon discovering that users were unable to locate any TONIC15 identity on the website, I redesigned it to effectively showcase the brand's identity and character, ensuring a strong brand representation.
COLOUR PALETTE
FONT: FUTURA
#A2B9AB
#0B2341
#FEF5EF
#F4D1C7
Modern, Clean, Legibility
Medium, 45pt
Medium, 25pt
Regular, 20pt
Design Solutions
To enhance the existing site with a more user-centered design, we implemented updates to facilitate seamless product search and purchase. These changes were informed by the insights gathered from user surveys. Additionally, I helped make the brand look consistent and engaging by keeping the design elements the same across the website.
LANDING PAGE
01
• ADD A CENTER SEARCH BAR:
Streamlining product search for easy purchasing.
• TOP BANNERS FOR OFFER REMINDERS
Displaying offer information for enhanced shopping experience.
• CLEAR ORGANIZATION
Implementing a user-centered design for a well-structured landing page.
FULL VIEW
SEARCH PRODUCTS
02
STREAMLINED DROP-DOWN MENU HIERARCHY
Easily view the entire subcategory menu at a glance, improving users' browsing experience.
SAVE SEARCH TIME WITH SUGGESTION KEYWORDS
Enhance product discovery and save search time.
IMPROVED FILTERS, SORT AND DISPLAY
Expanded all filter options to facilitate a comprehensive view and enhances the user experience by enabling customization based on individual preferences.
FULL VIEW
03
PRODUCT PAGE & ADD TO CART
SEAMLESS NAVIGATION AND QUICK ACCESS
-
Moving the 'ADD TO CART' button from the bottom to the top, just below the product price, for quicker access.
-
Descriptions now feature an accordion for a concise overview, enhancing accessibility.
-
Expanded reviews, moving away from the accordion format, provide users with swift access to valuable information.
ENHANCED SHOPPING EXPERIENCE
Integrating an Eligible Offers Reminder box in Cart Pop-Up Redesign, providing users with a convenient prompt for current promotions and potential savings.
FULL VIEW
Starting The Design
HMW questions
01
To start this re-design project, I created a list of 'How Might We' questions to help me better align users's tasks and goals.
02
I created a sitemap based on user feedback and the common user flow on retailer websites.
SITE MAP
03
DIGITAL WIREFRAME
Final Design
 |  |  |  |  |
|---|---|---|---|---|
 |  |  |  |  |
 |  |
What I learned:
Through this project, I thoroughly enjoyed engaging with customers to understand their perspectives on the skincare retailer website. It was enlightening to streamline the user flow, optimizing efficiency and enabling users to achieve their primary goal of making a purchase more swiftly. This experience enhanced my user-centered design skills, emphasizing the importance of responsive design across various screen sizes. Additionally, I gained valuable insights into the integral connection between website design and its impact on driving sales.
