Kandesn Lip Colors
Quick adding a feature to an ecommerce website.
My Role: UI/UX Designer
Project Type: Adding a Feature
Toolbox: Figma
Timeline: February 2024 - March 2024
Overview
Background
Sunrider International is a marketing company based in the United States that specializes in manufacturing and distributing a wide range of health and wellness products. In 2023, Sunrider’s Kandesn Lip Color won the prestigious Allure Best of Beauty Award. This achievement was a significant victory for Sunrider, resulting in a surge of visitors to Sunrider International's website. Therefore, enhancing the user experience became a top priority. I was given the task of developing a simplified lip color selector feature to make it easier for users to explore our products.
Problem
It is difficult to view, compare, and select the various Kandesn Lip Color options. The current UX design is simply a drop down menu that only shows the name of the color in text.
Solution
Create a lip color swatch design to display the different color options so that it is easier for users to view, compare, and select a color when shopping.
Research
I began my research by reviewing the current Sunrider website. The Kandesn Lip Colors line has 9 different colors for customers to choose from. With the current color selector design, users view the different color options with a drop down menu that displays the different color names in simple text.
This design is ineffective because it causes the user to question how the different shades compare to one another and wonder what name is which color.
Next, I analyzed how popular makeup e-commerce sites display different color choices of their lipstick products on desktop and mobile and was able to identify the following:
Different shades are displayed with a color swatch
texture - solid color, 3D, actual product
shape - circle, square, product swatch
when selected, swatch is outlined or underlined with a black stroke
Desktop
Mobile
Desktop
Mobile