Problem
overwhelmed users & Little guidance
Many users feel lost when starting their skincare journey, and the website’s cluttered layout and repetitive content fail to guide users through this. Its minimal design fails to convey the brand’s personality and creates a disconnection.
Solution
A Personalized Shopping Experience
Guides users with clarity and confidence. Simplified tabbed navigation with refreshed visuals and a design system that reflects the brand’s Magician archetype to inspire transformation and trust.
CAse study Video
See The Transformation
Process
How did we get here?
Art Direction
unlock the potential for change
The rebrand utilized YesStyle's Brand Archetype, The Magician, to determine the visual look. It encompasses transformation and empowers customers to explore their style to realize their unique selves and beauty.
UI Design
Contrast and Transformation
Playful and image-driven with livelier greens to create a friendlier look. Rounded shapes and expandable tabs to reduce clutter and develop an overall cleaner experience.
Personalization
Tailored to the user
With the updated “Skin Analysis Quiz,” users will be recommended products unique to them and their skin concerns, all available at YesStyle.
Design System
Be flashy and bold with YesStyle
Bold color and custom gradients bring energy and capture the transformative YesStyle experience, while a disciplined grid and clear typography maintain clarity and structure.
Design System
How the typography was dealt with?
On Figma, variables and text styles were utilized to maintain consistency and improve efficiency.
Design System
Don’t forget About Dark Mode
Maintain the (expressive) brightness and boldness of the original design and color palette, while meeting accessibility standards — (AA) Contrast Checker.
KPIs
Conversion Metrics, Engagement, and Customer Satisfaction
Consider the percentage (%) of visitors who make a purchase, the amount of time spent per transaction, and the checkout completion rate.
Track how our users interact with the redesigned interface through bounce rate, the average time on site, pages through session, and click-through rate (CTR).
Assess the amount of returning customers and, lastly, track customer sentiment of the redesign on social media. “How likely are users to recommend YesStyle?”
Takeaways
Leverage Research, Importance of Language, and room for improvement
Design isn’t limited to one device or breakpoint; it’s important to consider other devices and how items will reorganize when used on various platforms.
Reusable components with built-in auto-layout made it easier to update content and allowed for responsive design (variants and different states).
Variables are the key to maintaining a cohesive design system and management.
Next Project
Heinz, We're Killing It!
Integrated Campaign
Motion
UI Design
