Lantern.io
Organizing a 1000+ component Design System in Figma
Aug 2021 - Feb 2023
Goals
Update the colour palette to follow WCAG guidelines as closely as possible.
Better multi-language display
Brand recognisability
Tools
Figma: Design system
Language support:
Arabic
Russian
Mandarin
Urdu
Bengali
CONTEXT
How we organized our Design System libraries to help maintain 1000+ components
Figma libraries are the invisible backbone of my Product Design delivery.
Lantern didn’t have a dedicated designer for a decade but had a few design enthusiasts in the team who helped create the initial design system by copying material design templates.
Over the last two years, Lantern launched a slew of features so cleaning and organising the system to adapt to different languages and features.
GOALS
1. Building inclusivity with accessible-first design
Lantern’s existing palette used a lot of bluish-green and pink for buttons. Additionally, our desktop app wasn’t accessible using a screen reader. So one of our goals was to update the colour palette to follow WCAG guidelines as closely as possible.
2. Switch from an 8-grid to a 4-grid system
Lantern is available in a multitude of languages. So the grids needed to adapt well to other languages. The 4-grid system was introduced to allow for better typography.
3. Brand recognisability
Lantern VPN has been in service for over a decade and has had 100% organic growth. So we took care to not make any drastic brand changes so that it stays recognisable.
EXISTING
Excess use of pink (System) and green (Brand)
UPDATED
Replaced the pink with orange and green with blue