#Overview

This Copenhagen-based startup is developing a tool to help businesses improve their Google search rankings. While I can’t disclose the company name due to confidentiality, I was brought in to establish a comprehensive design system that could scale with the product’s rapid growth. The system not only defined the product’s visual identity but also accelerated the development team’s ability to ship new features with consistency and quality.

#Project Goals

Create a unified design system that works across product and marketing
Enable fast iteration with reusable, production-ready components
Build scalable foundations (tokens, variables, documentation)
Ensure accessibility and usability for diverse users

#The Challenge

Zero foundation: No design guidelines beyond a logo
High complexity: Dashboards + marketing websites
Rapid delivery: Launch MVP while scaling
Cross-team alignment: One system for design, dev, and marketing

#My Role

I led the design system effort end-to-end, covering strategic vision, execution, and adoption.

#Foundations & Tokens

Established color, typography, spacing, radius, and elevation tokens with semantic naming
Built light/dark mode variables with automatic WCAG AA validation
Defined responsive grids and typography scales

#Component Architecture

Designed a library of modular components using Figma variants, auto layout, and interaction states
Structured components across atoms → molecules → organisms → templates → pages
Integrated hover, focus, error, success, and loading states

#Application UI Patterns

Dashboards, audit reports, and SEO keyword tracking tables
Backlink analysis visualizations and competitor comparison charts
Documented edge cases and empty states

#Marketing & Brand System

Website design system: landing pages, pricing, blog, careers, FAQs
Marketing collateral: campaign modules, testimonials, icons
Enabled marketing to spin up pages in hours with modular sections

#Documentation & Governance

Created a living design system hub with usage guidelines and do/don’t patterns
Partnered with engineering to map tokens into Tailwind CSS + TypeScript
Defined governance workflows for versioning and contributions

#Project Management & Organization

The project was delivered in five structured sprints:

Foundations: tokens, type system, grids, accessibility standards
Core Components: buttons, forms, inputs, navigation, modals, icons
Application UI: dashboards, audit reports, keyword tables
Marketing System: modular website templates
Documentation & Rollout: guidelines, Figma libraries, governance
Weekly syncs with stakeholders for transparency
Prioritization driven by developer dependencies
Sprint reviews with live demos ensured adoption

#Design Process & Key Contributions

#Foundations: Tokens & Variables

Problem: Inconsistent branding with no dark mode support
Solution: Semantic tokens for color, type, spacing, shadows
Outcome: Scalable foundation with accessibility and dark/light parity

#Component Library

Problem: Developers recreated components, causing inconsistency
Solution: Multi-level component system with full variant states
Outcome: Reduced dev build time by 40%

#Application UI

Problem: SEO data was intimidating for non-technical users
Solution: Dashboards and reports with modular layouts, states
Outcome: Improved clarity, reduced cognitive load, built trust

#Marketing System

Problem: One-off design effort for every campaign
Solution: Reusable page modules matching product design language
Outcome: Campaign launch cycles cut from weeks to days

#Collaboration & Handoff

Developers: Tokens mapped directly into Tailwind CSS + TypeScript
PM: Co-prioritized rollout with roadmap milestones
Marketing: Empowered with modular system for campaigns
QA: Supported accessibility audits (ARIA, keyboard, screen reader)

#Final Outcome

Centralized Figma library unifying product + marketing
Scalable tokenized foundations with accessibility + dark mode
Production-ready component library mapped into codebase
Documentation hub for onboarding, governance, and adoption

#Results & Impact

40% faster development cycles via reusable components
Consistent brand expression across product + marketing
WCAG AA accessibility compliance
Positioned startup for scalability and rapid iteration

#Reflection & Lessons Learned

What worked: Building foundations first reduced rework
What I’d improve: Run usability testing earlier on data-heavy modules
Key takeaway: A design system is more than components — it’s the operational backbone that drives velocity, consistency, and confidence

Building a Scalable Design System for an SEO SaaS Platform.

Company

Role

Team

Duration