Challenge one
Establishing our design system and demonstrating value
I joined Hopin in late 2020 to create and develop our design system—a role influencing every design decision across the business.
Our goal was building tools and guidelines enabling teams to build products at speed while maintaining exceptional usability, accessibility and design quality. For successful adoption, myself and a UX engineer established the set of core principles:
Centralised - A core team maintaining all experience standards
Contribution - Everyone is expected to contribute through shared ownership
Collaboration - Product teams rely on DS to help develop components
Continuous - The system evolves with business needs through submissions
Re-developing the Planetary library
An initial Component library existed, organised into Collections and Kits, but teams struggled with implementation, limited variations and confusing categorisation. I developed a more scalable Staging library with necessary elements for product features.
After six months, teams were using Staging as their source of truth rather than its intended purpose, creating inconsistencies with our live React components in Storybook. As other teams grew rapidly, Planetary had to match that pace.
Building the team
We filled 3 DS designer positions quickly—2 new hires and one product team member. Engineering expanded similarly, growing us from 2 to 8, enabling us to maintain pace and build holistically.
Challenge two
Creating scalable libraries focused on team requirements
Learning from Staging's usage, we separated elements into individual libraries for better foundations, faster scalability and improved accessibility:
Foundations - Visual elements like colour, typography and spacing
Components - Building blocks of product UI for consistent experiences
Patterns - Complex components made from system elements
Icons - Informative iconography adding meaning
Collaboration
We couldn't predict which features teams would build, so contribution was vital. We created an Extended library for collaboration and product-specific components outside our core library.
Workstreams opened with product teams and a dedicated Planetary member, ensuring our principles and accessibility criteria were met. This shared responsibility engaged teams and deepened understanding of our ethos.
The growth of the core Components library is a shared responsibility amongst all
Challenge three
Tokenisation using Figma Tokens
Design tokens are visual atoms used instead of hard-coded values to maintain scalability. Using the Figma Token plugin, we create themes (like light/dark mode) and generate tokens from Foundations—colour, type, spacing, radii, elevation. A JSON file generates for code integration.
I introduced shared tokens across multiple components: action components like Button, Tab, Tag and Badge share commonality for easier use. Other categories include Form and Select components.
Challenge four
Providing documentation as our source of truth
Components are added to our Storybook repository—the source of truth for application. Zeroheight provided deeper documentation for purpose, behaviours and usage, syncing between Figma, Storybook and Zeroheight.
I documented thoroughly regardless of component size. All components deserve proper documentation to avoid ambiguity, guiding consumers from anatomy through to application.
Challenge five
Customising components for flexibility and reduced engineering effort
Design tokens reduced detachments while providing rigidity with multi-use containers. A card component provides the base container for designers to add elements. This container uses the slot method—flexibility with fixed attributes— which is reusable for larger patterns like Modals, Navigation bars and Menus.
Becoming a multi-brand system
With a fuller token range, we pushed into Hopin's acquired brands—StreamYard, Session and Boomset—creating a multi-brand design system. New token themes apply to components retaining brand identity while using the same crafted components—only type, colour and foundational tokens differ.
Common components are used universally across products for shared design language, therefore reducing the need to engineer new modals or forms—just apply the brand theme.
My learnings
Planetary's goal was bringing consistency as the business grew rapidly. It's become much more, teaching me the importance and complexity of a usable design system—an ongoing project growing with business requirements.
Next steps include:
Growing the component library with more complex components
Adding sections on brand, illustrations and animation
Finalising documentation to keep libraries synced
Raising awareness and promoting adoption
Building processes for testing compliance with accessibility standards
Credits
©2017—2026 Selected works / Jon Atkins