AlgaeCal Design System
Complete UX Journey
CASE STUDY
Building a Design System
​Summary:
​
Company: AlgaeCal Inc.
Industry: Nutraceuticals / D2C bone-health supplements
Timeframe: November 2024 – August 2025
Role: UX/UI Designer & System Builder
Team: Collaborated closely with developers and marketing/eCommerce teams
Tools: Adobe Creative Suite, Figma, Storybook, Chromatic, Adobe XD
​​​
​Key Metrics Snapshot:
​
-
+25% revenue growth on the new website built using the design system
-
Weeks faster page creation, reducing cycles from over 5 weeks to a fraction of that
-
100% unified brand styles across pages
-
Cross-team adoption: UX, dev, marketing, and eComm now working from a single source of truth
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.
Problems
-
Slow development: New pages took over a month 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 / Discovery
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 reuse.
-
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.​
2. Molecules (Elements): Buttons, inputs, selection controls — styled with CSS box model + flexbox principles.
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.
3. Organisms: Product cards, lead gen forms, banners, supplement Facts table (centralized and reusable).
4. Templates: Blog posts, product listing pages, product description pages.
5. Pages: Fully assembled layouts crafted to enhance AlgaeCal's web experiences, providing users with a seamless and engaging journey through our content.
Testing & Iteration
We established a structured QA process using Inspect Mode, dev notes, and visual references to ensure consistency across browsers and devices. Design reviews happened in Figma, followed by discussions with developers and stakeholders before implementation. Iterations were guided by user feedback and internal testing — for example, we adjusted component corner radius after customers showed a preference for more rounded styles, and we redesigned the Supplement Facts table as a single reusable component to eliminate inconsistencies across pages.
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.
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.
My Role & Contributions
DESIGN SYSTEM
​
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.
PRODUCT LISTING PAGES
​
Redesign and Mockup​
​
Co-designed the card architecture along with sorting and filtering interactions, defined empty and loading states, and detailed responsive behaviours. Created annotated rules and design specs for developers to ensure consistency and smooth implementation.
All PRODUCT PAGE​
​
Redesign & UX Research​​
​
Redesigned the page and conducted UX research and usability study to structure the information hierarchy—benefits, clinical proof, ingredients, and FAQs, while creating compliance callouts, disclaimers, and cross-sell modules to boost clarity and conversion.
ICONOGRAPHY​
​
Redesign & Implementation
​
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.
IMPLEMENTATION
Quality Assurance & Compliance​
​
Performed QA on final pages—checking layout, copy, accessibility, interactions, tracking, and design-system adherence. Verified fixes and ensured compliance with disclaimers, readable contrast, semantic structure, and medical/claims language rules.
Interested in learning more? I’d love to walk you through my work in a private session, whether over a call or in person.
