💠 Design System

Starting at

$

80

/hr

About this service

Summary

🚀 Experience Over the past 5 years, I have been building at least one design system at any given time. My experience as a designer who codes puts me in an unique position to save you time and money in terms of design and development time and consistency.
References I have done so for world-class companies such as Celonis, Mercedes-Benz, Zurich Insurance and Beam Suntory.
👩🏼‍💻 Tech stack Technologies used varied from CMS Salesforce, AEM, Sitecore, Magnolia, Magento) to custom built (React).
🏁 Achievements These have been as small as a single brand system all the way to website factories, which are multibrand, themeable design systems used to deploy new experiences in days, not months.

Process

Scope Definition
stakeholder interview
alignment on requirements and definition of done
Discovery
audit of live UI (if any)
audit of design assets (if any)
insights presentation
proposal and alignment on deliverables
Design Pilot
set-up of key tokens (color, typography, spacing)
design of key components (5-7 components)
review and feedback
Design
design of remaining components according to scope
templates according to scope (3-5 key pages)
set-up of remaining tokens
Documentation (optional, but recommended)
guidelines
component documentation
Onboarding
1h onboarding of your design team on how to use the resources
1h onboarding of your engineering team on how to use the resources

What's included

  • Variables and Styles (CSS equivalent)

    💅 Variable sets for colors, spacing and border radii. ✒️ Styles for typography (variable feature coming soon in Figma). 👩🏼‍💻 Upon request, I can set this up in your code repository, if you would like to have this for your engineers.

  • Design System

    💠 Component library in Figma This includes basic UI kit components and can go as far as entire pages and interaction patterns. You can start small and scale it you need.

  • Documentation

    📐 Documentation in the chosen platform(s): Figma, Storybook, Supernova, custom solution.


Skills and tools

Design Systems
Figma
Google Sheets

Work with me