BEYOND Skincare
Redefining Skincare E-commerce for the Modern Consumer
My Role
UX/UI Designer & Web Developer
Team
Capstone | Solo Project
Duration
4 Months
Skills
Overview
BEYOND Skincare needed a clean, modern digital presence to reflect their wellness-first, science-backed product line. The client had no branding, no structure, and no clear content hierarchy.
They wanted a site that could scale with their product line, communicate trust, and look professional enough to compete with other direct-to-consumer skincare brands.
Constraints:
-
No brand guidelines
-
Deadline (16 weeks)
-
Responsive build for desktop + mobile
The Goal
-
Establish a strong digital presence with a visual identity
-
Design a scalable system that could expand with new content and product offerings
-
Build a user-centered site focused on clarity, simplicity, and conversion
Hypothesis
By creating a reusable, consistent design system and intuitive page structure, we could build brand trust, boost engagement, and increase product interest across mobile and desktop platforms.
User Research
-
Users preferred minimal, clean skincare interfaces
-
Product trust was often tied to branding consistency
-
Navigation needed to be simple and product discovery quick
Competitor Analysis
-
Glossier: Minimal, airy layout but lacked structure at deeper levels
-
The Ordinary: Great product hierarchy, but too clinical for our target audience
-
Herbivore: Visually beautiful but less dev-scalable
What we learned: simplicity + emotion = trust
How Might We...
-
Create a design system that's easy for developers to implement and scale
-
Make the product discovery journey intuitive across devices
-
Establish trust through thoughtful content layout and clean visuals
Designs
-
Design System: Colors, typography, components, spacing units, and grid system built directly in Figma
-
Page Templates: Homepage, About, Product Page, Contact
-
Mobile Responsive Views for every layout
-
Dev Notes included on Figma components for easy handoff
Handoff included:
-
Structured file naming
-
Responsive breakpoints
-
Component documentation
-
GitHub reference examples from previous dev builds
Results
-
Client reported an increase in product sign-up interest after launch
-
Developer was able to implement the front end using my Figma system without additional documentation
-
Mobile performance scored over 90% on Lighthouse after implementation
Learnings
-
Developers appreciate structured files and notes
-
A consistent grid system makes mobile responsiveness much easier to translate
-
Design systems save hours when content grows
