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