SkinWay
An E-Commerce App for Skincare Experience
I created SkinWay to address individual skin needs and preferences via an online platform. I emphasize the online consultation process, community platforms, and a chatbot to enhance your experience. In the future, I plan to implement machine learning in the chatbot, allowing users to find products through simple chatting. My goal is to support users by guiding them in online settings.
SUMMARY
My role
My role as the UX designer involved leading the Skinway skincare product website design. My tasks included conducting interviews, creating paper and digital wireframes, developing low and high-fidelity prototypes, conducting usability studies, ensuring accessibility, iterating on designs, and implementing responsive design. Using tools such as pen & paper, Sketch, and Adobe XD, I worked on this project from December 2022 to January 2023.
🎯 The challenge
The complexity in skincare products makes it difficult for skincare websites to provide a user-friendly experience. Users may face difficulties in finding the products they need and making decisions. The personalization challenges and mobile optimization needs of websites can disappoint customers.
🏆 The solution
Design a website for Skinway that enables users to easily make decisions and purchase skincare products. Create guidance and social platforms to assist users in the product decision-making process.
Here are some of the animated screens.
01. Online Consultation
From interviews, I've learned that many skincare enthusiasts face challenges in understanding their needs at the beginning. To offer a personalized skincare approach, I've designed an online consultation feature, fostering a connection between users and Skinway brand. My goal is to support users with their questions, simultaneously increasing awareness about the Skinway brand and driving conversions.
02. Let's Chat
I've implemented a Skinway chatbot to provide support throughout the user journey. My main objective is to integrate machine learning for personalized advice. Whether users seek tips or skincare expertise, the online chat aims to enhance the experience, ensuring it is user-friendly and supportive.
03. Nurturing connections
I prioritize community platforms that facilitate shared learning, especially for emerging brands like skincare. I created a community platform from the start to empower like-minded individuals to share their experiences on the skincare website. While I acknowledge it's a long-term journey, it's free, supporting both brands and enabling users to learn from each other.
Understanding the user
Research
To better understand the needs of our target users, I conducted user interviews and created empathy maps. The participants were people who prioritize skin health and are willing to try new products. Through this research, I found that many users prefer to search for skincare products based on their specific concerns, rather than just the ingredients. However, I also discovered that the navigation of many shopping websites can be confusing, which often leads to disappointment among our target users. This can transform what should be an enjoyable experience into a challenging one for them.
The interview script can be viewed here.
Pain points
1
Navigation
The busy designs of skincare product websites lead to confusing navigation for users.
2
Information
The complexity of skincare products makes it challenging for users to understand. Users heavily rely on reviews to make purchasing decisions, and the absence of reviews diminishes their confidence in the product.
3
Personalization
Many users face difficulties in finding skincare products that cater to their specific needs and preferences, such as addressing particular skin concerns, including preferred or avoided ingredients, and desired product types or formulations.
Meet the user
Age: 34
Education: University
Hometown: Overschie
Family: Spouse
Occupation: Architect
Doga, skincare enthusiast
The skincare industry feels overcrowded, making it challenging to find suitable products. I used to search for the best products, but now there are too many options and I feel overwhelmed.
Problem statement
Doga is a busy working architect who needs intuitive navigation on the website and efficient search filters because they don't want to spend too much time researching skin care products individually.
Goals
-
Experimenting with a new skincare product every month or so can help keep your routine fresh.
-
Feel assured or confident about their purchase decision.
-
Minimize the amount of time spent researching products of interest.
-
Seek validation or confirmation of their product choice by reading reviews or feedback from other individuals.
-
To find products at better prices/deals.
Frustrations
-
Being required to devote a significant amount of time to product research.
-
Confusing product range.
-
Sometimes, they spend hours browsing through websites because they are not sure which product to choose.
-
Having most of the products they try not live up to their expectations.
-
Losing both time and money when a product doesn't meet their needs.
Bio
Doğa, a 34-year-old architect working in a corporate company, is now living in the Netherlands with her spouse. They are very careful with their skincare and aim to buy effective products at a reasonable price. They set aside a monthly budget for skincare products and are interested in trying new and trendy ones.They visit different beauty websites to compare products, but doubt their effectiveness on their skin. They don't conduct extensive research, but read customer reviews, products ingredients, examine before-and-after photos, and check out the most recommended products on the website.
They are tired of mobile websites' online shopping experiences due to complicated navigation, pop-up boxes, and lack of information. They sometimes feel let down by customer service representatives on websites. Also, they prefer third-party payment options for added security.
Age: 27
Education: Master
Hometown: Rotterdam
Family: Single
Occupation: Event planner
Mike, newcomer
I have just started a regular skincare routine.
I have a fast-paced and busy lifestyle. I am excited to explore and try new products that won't exhaust me.
Problem statement
Mike works as a event planner who needs to have quick and easy access to information about skincare products because they don't have enough time to conduct in-depth research and understand technical terms they are not familiar with.
Goals
-
Being able to decide on products quickly and easily and place an order is desired.
-
Sustaining a youthful appearance through a healthy lifestyle
-
Discover skincare-related information that is relevant to their routine
-
Seek out products that are tailored to their skin's needs
Frustrations
-
Feels that they are too busy to research technical words that are too complex.
-
Unsure if other people's success with certain products will translate to success for them.
-
Feels overwhelmed and cannot find the desired information, they may choose not to select any product at all.
Bio
After graduating from university, Mike moved to the city and works as an event planner at a media company. They lead a dynamic and busy life both socially and professionally. They are eager to learn and discover new skincare products and routines, and prefer to try new beauty products. However, they often feel disappointed with the products they purchase, and believe that they should probably do more research. But due to their lifestyle, they cannot dedicate more time to in-depth research. At home, they research skincare products on their phones while watching TV. Once they decide on a product, they connect to websites on their computers and enjoy online shopping.
User journey
I created a user journey map of Doga’s experience using the site to help identify possible pain points and improvement opportunities.
Goal: Finding and buying the skincare products that are suitable for their skin.
(Click on the image below to enlarge.)
Ideation
Competitive audit
An audit of a few competitor’s products provided direction on gaps and opportunities to address with the Skinway product.
Click to view the full competitive audit and audit report.
Problem statement
Based on the results of the interviews and competitive analysis, I identified several challenges associated with skincare shopping experience. I then selected the most significant problem statements for more in-depth exploration.
Statement 1:
How might we create an engaging and interactive 'skincare forum' that encourages customer participation and supports knowledge sharing?
Statement 2:
How might we develop 'virtual consultations' to understand and address customers' unique skin concerns and preferences?
Statement 3:
How might we enhance 'skincare education resources' to offer personalized content?
Statement 4:
How might we create 'platforms' that enable users to discover products effectively?
I quickly generated ideas to address the gaps found in the competitive analysis. My main goal was to enhance the shopping satisfaction of users by combining online shopping and in-store experience. The features I emphasized are 'virtual services' and 'social platforms'.
Starting the design
Sitemap
Users were lacking the comfort of navigating through the website. To address this feedback, I created a site map. My goal was to improve the overall navigation of the website by making easy-to-understand information architecture decisions. I selected a structure that would allow users to easily find the products they needed.
Paper wireframes
Next, I sketched out paper wireframes for each screen in my website, keeping the user pain points about navigation, browsing, information, and personalization in mind.
The home screen paper wireframe variations to the right focus on optimizing the browsing experience for users.
Shopping design experience elements 'homepage'
shop, consultation, about, blog, watch, search, chat, help
Option 1
Option 2
Option 3
Refined paper wireframe
Stars were used to mark the elements of each sketch that would be used in the initial digital wireframes.
Screen size variations
Because Skinways’ customers access the site on a variety of different devices, I started to work on designs for additional screen sizes to make sure the site would be fully responsive.
Tablet
Mobile
Digital wireframes
Moving from paper to digital wireframes made it easy to understand how the redesign could help address user pain points and improve the user experience.
Prioritizing useful button locations and visual element placement on the home page was a key part of my strategy.
1-Easy access to shop products
2-Homepage is optimized for easy browsing through the carousel of images and nav menu options
1
2
Screen size variations
Tablet
Mobile
Low-fidelity prototype
To prepare for usability testing, I created an initial version of the product design using a low-fidelity prototype. This involved connecting all the screens involved in the main user journey, which includes 'filtering products', 'adding items to the cart', and 'completing the payment process'.
Skinway's low-fidelity prototype can be viewed here.
(Click on the image below to enlarge.)
Usability study
#Parameters
Study type
Unmoderated usability study
Location
The Netherlands, remote
Participants
5 participants
Duration
20-40 minutes
#Findings
These were the main findings uncovered by the usability study:
1
Navigation
The top navigation bar with crowded buttons did not effectively guide users.
2
Search
Users faced difficulties while entering keywords in the website's search bar.
3
Checkout
Users encountered errors while entering their addresses in the required format during the payment process.
Mockups
Click on the images below to enlarge.
01.
After analyzing the results of the usability study, I discovered that a simple top navigation bar would greatly benefit users. In line with this, I emphasized the 'Shop' and 'Learn' buttons in the top navigation bar. I carefully organized the remaining buttons into clear subcategories, providing users with more control and reducing confusion.
Before usability study
After usability study
02.
I improved the website's search experience by adding 'chips' to the search bar based on usability analysis. These chips provide personalized options, making it easier for users to filter and navigate through products, services, and best-sellers. This enhancement has streamlined data input and actions, resulting in a more seamless and efficient shopping experience.
Before usability study
After usability study
03.
Based on the insights gained from usability studies, I added an 'address finder' feature to the payment process. With this addition, my aim was to enhance the efficiency of the payment process by enabling users to quickly and accurately select their addresses.
Before usability study
After usability study
Original screen size
I started by creating a user-friendly interface that would make it easy for users to browse products, add items to their cart, and complete their shopping effortlessly. I optimized the user journey by including features such as continuing the payment process 'as a guest' and 'quick payment methods'.
As a solution to inform users about skincare and help them determine the right routine for their skin, I have added a series of 'video webinars'. This way, I have provided informative content on product usage and helped users discover the perfect skincare routine. Users can easily explore the webinar archive on the website or attend live webinars.
Screen size variations
In my designs, I accounted for various screen sizes based on my earlier wireframes. Understanding that users shop on a variety of devices, I acknowledged the significance of optimizing the design to cater to them. I aimed to provide the best possible user experience for all users by adapting the browsing experience to suit screen sizes like mobile and tablet devices, ensuring a seamless and enjoyable experience.
High-fidelity prototype
The high-fidelity prototype followed the same user flow as the low-fidelity prototype, including design changes made after the usability study.
The Skinway's high-fidelity prototype can be viewed here.
(Click on the image below to enlarge.)
Accessibility considerations
1
To make it easier for visually impaired users to read the content, I used sufficient contrast between text and background colors.
2
I used appropriate headings to structure the content and make it easier for screen reader users to navigate the website.
3
To help users with cognitive disabilities or those using screen readers to easily find what they are looking for, I used clear and consistent navigation.
Style Guide
While using nude tones for the colors of nature, I aimed to emphasize the natural content of each product and to make the user feel refreshed. When highlighting Skinway's identity, I aimed to emphasize renewal and radiance reflected from simplicity and naturalness. To provide an ideal reading experience in various screen sizes and avoid eye strain, I chose the 'Roboto' and 'Poppins' fonts.
Colours
Typology
Going forward
Takeaways
Next steps
Impact:
Our target users shared that our design is effortlessly navigable, with a clear visual hierarchy that makes it
easy to find what they're looking for.
As one user aptly put it,
"I love how easy it is to find what I'm looking for on this website. The navigation is straightforward and intuitive. I can quickly jump between different sections without any hassle. It makes my browsing experience so much more enjoyable and efficient."
What I learned:
I learned that even a small design change can have a huge impact on the user experience. The most important takeaway for me is to always focus on the real needs of the user when coming up with design ideas and solutions.
1
Conduct follow-up usability testing on the new website.
2
Identify any additional areas of need and ideate on new features.
3
To host online events and webinars, creating a strong community of skincare enthusiasts who are passionate about skincare and are aware of the latest trends and events in the industry.