SquadStack Design System
As part of the mobile application revamp process, I created a shared library of our design principles and components that helped us establish a common visual language between stakeholders and improved our communication and collaboration processes.
Overview
I set up the atoms, components, patterns which together compose an ever evolving design system that enables the team to have a shared understanding of the principles that we apply to build our product with to the execution level details that help us ship and test high fidelity experiences even faster.
The foundational principles of the SquadStack Design System
Start with the problem
Everything we design for should be rooted in a validated customer pain point.
Keep it Simple
Prioritise solutions that require low cognitive load for the user to accomplish their goals.
Buy over build
Everything we design for should be rooted in a validated customer pain point.
System vs Bespoke
Prioritise capabilities that can be reused for creating new experiences.
Establish Trust & Reliability
Wherever necessary, we should instill a sense of security and privacy for all stakeholders.
Phase Execution
We identify the full life cycle and complexity of a problem but execute in stepped stages.
The Design System
Starting with the visual foundations
We defined a 8 pt. spatial system that was utilised throughout for defining the spacing and grids. We also defined the various colours and shades that would be utilised throughout for brand consistency
We create a typography system and an icon library
Creating the atoms
Different button sizes and states were defined. Additional controls were also created for scenarios where necessary
Different input fields for different use cases with labels, icons and message options with different states were created and linked accordingly.
The calendar component and its various interaction states were created from ground-up
Creating the modules and components
The different atoms that were created were combined together to create system wide components throughout
Impact
We shipped the high fidelity designs and design system to the engineering team for development and we also continued to test beta builds of the app with our users. We gathered some good overall feedback and got the indicator that we were headed in the right direction.
Key learnings & takeaways
Documentation is super important even for the smallest of projects. This is absolutely critical for a company to scale and grow
Working with a remote team can be challenging especially if everyone on the team is new but it provides creative freedom.
Pushbacks in timeline while unpleasant can be a game changer. It is important for teams to realise this than push for deadlines.
Thank you for reading