Sliide - Reduced Design System components from 256 to just under 100 components
Mobile, Design Systems, News
2025
61%
Reduction in Components
based on usage & alignment
🔋 Improving Performance
👥 Increasing Active Users
📈 Generating more Revenue
The problem
Sliide's lock-screen news application serves millions of users world-wide with majority of users on low-end Android devices. Working in a fast-paced startup environment, design tends to be over-constrained and working fast to produce necessary assets where their design system was not serving them but instead was a hindrance in their process due to:
The previous Design System was not designed for adaptability & customisation
Detached instances cause a ripple effect of misalignment errors & manual fixes
Less time is spent on revenue generating projects due to constant manual changes
Proposed solution
We need to create a Design System that is sustainable for the long-term and can be scalable for future changes with minor and major updates that works well with our current product workflow across Design & Development.
Less time spent on manual changes and more time spent on impactful work! With a system that works for you, we can increase productivity, impact & revenue across the workforce!
Methodology - Atomic Design
Brad Frost's Atomic Design allows us to create a Design System built from the ground up with solid foundations, forming a system that utilises components that can be built upon each other with flexible customisation throughout.
The diagram below showcases the stages of development for the Atomic Design System where it starts with sub-atomic particles that then form the building blocks for atoms, and atoms form the building blocks for molecules etc. to help establish a functional design system that we can utilise in our experience.
Process - Experience Auditing, Alignment & Refinement
Our process was simple, audit the current user experience & remove excess components that were no longer used. Align different components using similar properties to reduce the no. of components & form a lean design system
At the sub-atomic level, it is important to establish the foundations of this Design System properly utilising Design Tokens & Variables with primitive & semantic aliasing to allow for the correct use of colour, spacing etc. to be consistently incorporated into every component designed going forward with easy customisation & seamless integration with code syntax for developers
In regards to primitive, semantic & component-specific aliasing, the images below showcases the importance of aliasing & how it helps with seamless integration with code directly from our design system, allowing for hundreds of components to be updated with ease!
Variants & Optimisation
With the introduction of Component Sets, Nested Instances & Variants, we eliminated the need to break components for customisation - a major flaw with the old design system. Designers are now able to customise without the need for detaching instances, allowing for a more sustainable & scalable design system that promotes consistency & reduces errors - supporting the team, not hindering it.
Manual Changes - Old System
Constantly breaking components to be able to customise them - more prone to errors & slows down progress with major updates
New components use variants to allow for easy changes and no detachment allowing for seamless updates & quick edits
The end product
After constant alignment & refinement we have achieved a lean design system that is scalable & sustainable to where instances no longer need to be broken to access, allowing us to make quick changes at scale across all components in our system & user experience.
