Redefining how our design team worked by introducing an atomic-based system that boosted consistency, reduced detailed design cycle time, and changed how we prototype.
the brief problem.
Transforming our atom based DS into larger organism components that helped define a source of truth for UI consistency.
micro summary.
Role: Co-creator, DS architect and PO.
Timeline: 2024
Platforms: Mobile and Des-ops
outcomes.
- Maintained buy-in for our DS in a time where there was no design leadership
- Increased metrics for efficiency, consistency, and adoption of DS
THE PROBLEM
Designers were wasting time rebuilding UI patterns from scratch, and no one had a reliable source of truth.
THE SOLUTION
A modular ecosystem of components organised through Atomic design. We transformed our design library into an elegant, intelligent system where molecules became organisms, and organisms became species.
So how does this all work?
Our atoms
Our basic DS Lego bricks
Our molecules
Multiple DS elements added together.
Our organisms
Our Stencil components that house patterns, as well as surrounding context and actions.
Our templates
Our Stencil library categorises our white label templates as well as context examples.
Our pages
The Stencil library feeds into ‘Satellite’ libraries that house all specific organisms and pages for the Product area.
Our prototype
Our Product area Libraries feed into our centralised prototype - allowing it to constantly update and give one overview of our entire app experience.
THE OUTCOME
A helping hand in keeping design buy-in amongst a large org transformation
[Where this worked]
Stencil came at a time where there was no design leadership across the business - meaning consistency, efficiency and appreciation for design was at an all time low. Stencil helped keep designs voice heard in this time. This was through extensive demos, presentations and building relationships with the senior leadership team to ensure sponsorship.
Through training, coaching, and drop-in sessions - I ensured that all designers in our team were adopting and advocating for Stencil. This facilitated the larger adoption of our Design System, as our app experience at the time was split between our current DS and 2 other deprecated ones that designers were still working with. With Stencils help and executive sponsorship, we paved the way for a more consistent experience.
Besides how Stencil acted in a business context, the tool still stood for itself - we extensively designed a web of libraries that allowed us to have one constantly updated view of our current prototype experience.
We gained direct recognition from Figma’s ‘design advocates’. This relationship helped validate our approach, and helped us learn from other companies who had similar DS models (Spotify).
[What could’ve gone better]
Because there was no design leadership for most of Stencils existence, this meant that our design team was not mature enough to effectively adopt all of Stencils features. Additionally, our existing Designs System was too convoluted and restricted to allow Stencil to fully flourish.
I learnt a lot of valuable soft and technical skills within leading Stencil, but my junior position restricted the level to which Stencils voice was heard. Still, I fought tooth and nail to gain sponsorship across the business - and learnt how integral relationships and stakeholder management are to success.
[What happened next?]
Through new design leadership that has empowered our experiences, Stencil is now a recognised tool that compliments our new design system - allowing us to increase the benchmark for UI quality and consistency.
But this was only the tip of the iceberg..
Want to chat about this some more? I’d be more than happy to:
DM me on LinkedIn
See other projects