UI and ARt Direction Showcase
Discovery Phrase
Identify the target audience and brand archetype, including the analysis of the interfaces and a competitor analysis.
Developing Wireframes
Create a consistent grid and layout to remove clutter and simplify navigation. Refine key features and highlight them.
Design and Development
Art Direction
Utilizing 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.
View the Moodboard and Design Principles that established the look.
Design and Development
UI Design
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.
Design and Development
Updated Feature
With the updated “Skin Analysis Quiz,” users will be recommended products unique to them and their skin concerns, all available at YesStyle.
Design and Development
Design System
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 and Development
Typography
On Figma, variables and text styles were utilized to maintain consistency and improve efficiency.
Design and Development
Dark Mode
Maintain the (expressive) brightness and boldness of the original design and color palette, while meeting accessibility standards — (AA) Contrast Checker.
The 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 number of returning customers and, lastly, track customer sentiment of the redesign on social media. “How likely are users to recommend YesStyle?”
Takeaways
Responsive Design, Efficiency, and Designing Systems
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.