Bluedot
component library
October 2020 – July 2021
Design discovery, component and token audit and design, design documentation, governance
Over the last year of the COVID-19 pandemic Bluedot has experienced exponential growth in all aspects of the company. With a small design team of 5 working on multiple product features, different applications and a cumbersome design library, I set out to define, document and scale our design practice into a future facing component library.
Setting the foundation
The styles currently reference a global structure from the brand guide which limits changes for a particular instance or theming. We set out to define semantic tokens using SASS variables which mapped to specific patterns.
2x faster
As a small team during COVID, we were able to create consistent designs at scale
AA compliant
our library and product now have AA compliant attributes built into the tokens and components
Defining content semantics
When we established a formative sample of components, a card sorting exercise was performed with the design team to identify and categorize how different attributes of a component should be ordered.
Ensuring scalability
Each token, atom, molecule and organism are documented on a separate component page to show their associated tokens, use cases, properties, behaviour and nested components.
