OVERVIEW
UI rebrand of the YesStyle e-commerce site to enhance brand consistency and improve user navigation. Introducing a new design system and emphasizing a personalized “skin analysis quiz” feature.
Role
UI Design and Motion Graphics
Team
Thalia Merino
Duration
8 Weeks
Tools
Figma and After Effects
PROBLEM
Many users feel lost when starting their skincare journey. The website’s cluttered layout and repetitive content make navigation difficult, while its minimal design fails to convey the brand’s personality.
SOLUTION
A personalized shopping experience that guides users with clarity and confidence. Simplified tabbed navigation with refreshed visuals that reflect the brand’s Magician archetype to inspire transformation and trust.
PROCESS
The 4-step process includes Discover, Wireframe, Design and Development
ART DIRECTION
The rebrand utilized YesStyle's Brand Archetype, The Magician, to determine the visual look. It encompasses transformation and unlocks the potential for change, empowering customers to explore their style to realize their unique selves and beauty.
UI DESIGN
Playful, image-driven, and livelier greens create a friendlier look, while rounded shapes and expandable tabs reduce clutter for a cleaner experience.
PERSONALIZATION: SKIN ANALYSIS
Recommend products tailored to the user and their skin concerns, all available at YesStyle.
DESIGN SYSTEM
Flashy and bold, beaming with contrasting visuals to capture the transformative experience of shopping at YesStyle.
DESIGN SYSTEM TYPOGRAPHY
Using Variables and Text Styles to maintain consistency and improve efficiency.
DARK MODE
Maintain the brightness and boldness of the original design and color palette while meeting accessibility standards — (AA) Contrast Checker.
KPIs
How can we determine the success of the UI redesign?
Conversion and Sales Metrics
The percentage of visitors who make a purchase, the amount of time spent per transaction, and the checkout completion rate.
Engagement and User Behavior
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).
Customer Satisfaction
How likely are users to recommend YesStyle? The amount of returning customers and, lastly, track customer sentiment of the redesign on social media.
TAKEAWAYS
An overall reflection of the project and the next steps.
Responsive Design
UI 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.
Adaptability and Consistency
Using reusable components with built-in auto-layout made it easier to adjust when updating content, and allows for responsive design (variants and different states).
Design System
Variables are the key to maintaining a cohesive design system and management.
Next Project
