CASE STUDY
AlgaeCal Design System
Building a design system from scratch.
+25%
Revenue Growth
4x
Faster Process
Summary
Company: AlgaeCal Inc.
Industry: Health, Wellness & Nutrition
Business Model: (D2C) e-commerce
Timeframe: July 2025 – August 2025
Location: USA & Canada
Role: Product Designer, UX/UI Designer & UX Researcher.
Team: Shareholders, marketing, and web development.
Tools: Adobe Creative Suite, Figma, Storybook, Builder AI, HTML/CSS, and Chromatic.
Background
AlgaeCal’s website had been originally built by a contractor directly in Shogun, without a compiled design system. This meant the UX and Dev teams were left without a shared foundation. As the site grew, issues compounded: every page was designed from scratch, styles drifted, and updates became slow and error-prone.
To address this, we built a new design system that was tested and applied immediately to the redesigned website. Within the first release, the new site not only streamlined our internal workflows but also generated 25%+ more revenue compared to the old experience.
Key Metrics Snapshot:
-
+25% revenue growth driven by the design system and higher conversion rates.
Reduced page build time from 7+ weeks to 15 days in other words 4× faster page creation
-
100% brand consistency.
-
Cross-team adoption: UX, dev, marketing, and eComm now working from a single source of truth
Problems
-
Slow development: New pages took over 50 days to design and launch.
-
Brand inconsistency: Typography, iconography, and card styles varied across the site.
-
No source of truth: Styling and content lived in scattered Excel sheets and documents, leading to errors and rework.
Goals
-
Build a scalable, modular design system based on Atomic Design.
-
Speed up page creation and reduce repetitive dev work.
-
Enforce brand consistency across all touchpoints.
-
Establish a single source of truth for design and development.
Research & Methodology
We adopted Brad Frost’s Atomic Design methodology (atoms → molecules → organisms → templates → pages) as the foundation. This approach gave us a shared mental model for breaking down complex interfaces into reusable parts, which helped both designers and developers think systematically about scalability.
-
Audit: We analyzed existing pages and mapped out inconsistencies in typography, icons, and component.
-
Benchmarking: We looked at industry design systems (e.g., Apple UI Kit) to identify best practices.
-
Stakeholder input: We hosted sessions to educate teams on the value of modular design systems.
The System
To bring the system to life, we created components in a structured order — starting from atoms and building up through molecules, organisms, templates, and finally full pages. This progression ensured scalability, reusability, and a consistent foundation across the product.
1. Foundations (Atoms): Typography (Granville, Roboto), colors, spacing, and iconography.
Font structure
Granville and Roboto create a strong responsive system that blends brand character with clarity. Granville gives headlines a distinctive, trustworthy presence, while Roboto delivers clean readability across all screen sizes. Their compatible proportions keep the interface consistent from mobile to desktop, supporting a clear hierarchy and an accessible, user friendly experience.
For iconography, I created a refined style guide to address inconsistent usage across the site. Icons were standardized using a consistent grid, stroke weight, and spacing rules, improving readability across devices.
In collaboration with another UX designer, we integrated these icons directly into the design system so they could scale with other foundations.
I designed a complete icon library of more than 80+ custom icons, each crafted with consistent stroke weight and pixel perfect alignment to ensure clarity at every size. The set supports both mobile and desktop, maintaining visual harmony across the entire AlgaeCal design system.
To streamline handoff and development, every icon follows a structured naming convention such as Ac-Icon-Mobile-Menu, giving developers predictable, scalable identifiers they can integrate directly into their workflows.
2. Molecules (Elements): Buttons, inputs, selection controls — styled with CSS box model + flexbox principles.
3. Organisms: Product cards, lead gen forms, banners, supplement Facts table (centralized and reusable).
4. Templates: Blog posts, product listing pages, product description pages.
Testing & Iteration
I worked closely with the development team throughout the implementation of the design system. We aligned on component structure, naming conventions, accessibility rules, and token integration to ensure the system could be adopted smoothly across all products. At the same time I continuously refined decisions using insight from the marketing team. Their performance metrics, data, and reports helped validate which patterns were performing well and which needed adjustments. We also ran several internal A\B tests that revealed unexpected user behaviours and guided the evolution of layouts, components, and content hierarchy.
Outcomes & Impact
Business Impact:
The new design system powered AlgaeCal’s redesigned website, generating 25%+ more revenue shortly after launch. Page creation also became much faster, allowing the team to respond quickly to marketing and product needs.
Efficiency Gains:
Reusable, pre-built components reduced development time and eliminated repetitive one-off builds. Page creation cycles dropped from over five weeks to just a fraction of that time.
Consistency:
Typography, colors, and components were standardized across the site. Outdated icons and mismatched card treatments were replaced, creating a unified brand experience.
Collaboration:
A shared vocabulary using tokens and BEM conventions improved communication between designers and developers. Cross-team alignment extended to UX, dev, marketing, and eCommerce.
Scalability:
Centralized data sources made the system easier to maintain. The Supplement Facts table, for example, was rebuilt as a single reusable component, reducing errors and simplifying updates.
My Role & Contributions
Led UX and design initiatives—from system creation to page redesigns—focused on consistency, usability, and compliance.
01
Construction & Implementation
Built a fully functional design system in Figma, including tokens, components, states, documentation, and iconography. Contributed reusable patterns for forms, cards, CTA groups, and product modules, ensuring consistency and quality across the system.
04
Iconography Design
Redesigned and standardized a comprehensive icon set for the design system—building a coherent family with consistent grid, stroke weights, hit areas, and accessibility contrast—and documented detailed usage guidelines to ensure clarity and scalability.
Reflection & Learnings
We faced challenges in shifting stakeholders away from a “page-by-page” mindset, investing significant time upfront in building tokens and components before seeing ROI, and managing existing tech debt while rolling out new standards. Along the way, we learned that early education — through video sessions — was critical for adoption, and that the Atomic Design framework provided a clear mental model for both designers and developers.
We also realized governance was essential: maintaining the system through Figma, Storybook, and Shopify integrations ensured consistency over time. Moving forward, we plan to expand documentation and onboarding resources, automate QA with Chromatic to speed up regression testing, and continue evolving components based on usability feedback.
