The Shell design team was split into 5 different sub-teams, each taking ownership for a part of the app. To make sure all our designs were consistent we were designing with a help of pattern library, that included color & typography styles and different UI components. Nevertheless, this does not mean that the development team followed our way of working, which resulted in several inconsistencies and different implementations of the same component.
With Shell app starting from scratch with new re-strategy, it was a perfect moment to fix this problem and implement a fully functioning design system. We decided to start building our own design system on top of Google’s Material design foundation.
The core of the design system requires focusing on native iOS and Android components.
With Material theming, introduced on Google’s I/O 2018, you can build and customize your own design system, based on pre-determined guidelines and principles. We decided to build upon Material design and also customize it for our needs. This way we could save some time and effort by quickly customizing and using some of the already pre-built components. We were also building upon some of the design and motion principles.
There is no “I” in the team and the beauty of the design system is getting everyone involved. Everybody should be able to contribute to the design system to help it evolve and grow to fit with different needs and scenarios.
BUT with having a lot of different people involved, the situation can quite quickly become messy - so it’s important to assign ownership and determine processes.
There are tons of different tools for creating, managing and maintaining the design system. It was crucial to select the tools that fit our needs and requirements.
Most of the documentation and tools focus on the web and react design systems - as our app was built natively for iOS and Android, the selection was a bit harder.
It is important to choose tools that integrate well with your workflow and everyone is familiar with. We decided to use Sketch as our design tool, backed up with Abstract for version control. As we are using Atlassian’s suite it was only obvious to use JIRA as an issue and project tracking tool, Bitbucket as our code repository and Confluence as a documentation tool.
Having a suitable workflow enabled everyone to contribute efficiently and ensured transparency to all team members. In collaboration with the engineering team and project management, we have concluded a workflow for creating new, as well as for updating old design system items.
With a lot of moving parts (new and updated components), we also needed a strong and clear versioning system. We decided to adopt Semantic Versioning.
Finally having a design system, was a big step forward for our team, but we were always searching for ways to improve, so we examined on how to better structure our components in Sketch and how to ensure that spacings will be consistent across all our designs.
Design system cannot survive without good collaboration and involvement of everyone in the team. Having clear roles and assignments ensures consistent output.
