CLIENT: Natural Vitality Calm
ABOUT: Natural Vitality Calm is international wellness brand that sells magnesium supplements to promote sleep, manage stress and overall live a healthy lifestyle.
CHALLENGE: Natural Vitality had a strong brand identity, but its digital presence felt fragmented. The site and its different platforms had inconsistent visuals, varying user experiences, and lacked a unified design approach. It was tough to find the most important info and the auto-delivery clicks were pretty low. Our challenge was to create a cohesive design system that ensured brand consistency, ease of use, and a seamless experience across all digital touchpoints so customers could easily find the products they wanted.
My Approach: Building a Scalable Design System
We started by conducting a brand audit, analyzing every digital asset to identify inconsistencies. Through cross-functional collaboration with marketing, development, and content teams, we defined a set of design principles that would guide the new system.
The solution? A comprehensive design system that included reusable components, typography guidelines, color schemes, and interaction patterns. This system allowed for scalability, ensuring any future updates or new features would stay on-brand without reinventing the wheel..
user RESEARCH
Pain Points
-What are the benefits?
-Important information below the fold
-Less clicks for Auto Delivery
Competitive Analysis
Best Practices
- All delivery options are displayed right away without having to click
- Image thumbnails under main image to make use of horizontal and vertical spacing
- Benefits information displayed above the fold with icons
- Price is at the top of the product listing
Prototyping & Iteration
With a clear roadmap, I developed high-fidelity wireframes and interactive prototypes, testing them across different platforms. Iterative feedback loops helped refine each component, ensuring both usability and brand alignment.
Challenges & Solutions
One of the biggest hurdles was ensuring flexibility while maintaining consistency. The brand needed to evolve across different campaigns without losing its identity. We solved this by creating modular components that allowed creative freedom while staying true to the brand’s core elements.
Before
after
The Impact
- Unified brand presence across all digital platforms.
- Faster development cycles, as teams could leverage reusable components.
- Improved user experience, with a more intuitive and visually consistent interface.
What I Learned & What’s Next
This project underscored the power of systematic design thinking. A well-crafted design system not only enhances brand consistency but also boosts efficiency and collaboration across teams.
Looking ahead, these learnings continue to inform how I approach scalable, user-friendly design solutions, ensuring that every digital experience feels effortless, cohesive, and engaging.