When I first joined Scoop there was no design system. Based off of my previous experience and how young the product was, it was a perfect time to start laying the foundation for one. The initial goal, since there was only 2 of us, was to create a component library so we could more efficiently create designs, which sped up the overall process.
First, I took inventory of all the components that were being used and documented any inconsistencies. Next, I worked with the other Designer to understand the why and how of each component. Finally, using Sketch, I made each component a symbol and updated the current designs with them.
As our team grew from 2 to 4 our design system had to grow as well. It was no longer just meant for Designers, but also for Engineers. We needed a better way to communicate rules, interactions, best practices, etc. to everyone involved in creating new features.
With the help of my co-workers we created a robust, modular, and cohesive design system that allowed for Designers and Engineers to easily create and build features with accuracy and speed. All while making sure it would be platform agnostic, because we had to support both iOS and Android apps and in the future, web apps.
Color, typography, icons, and components are the base of the design system.
The Scoop color palette was updated to represent the brands values: Showing great ingenuity, welcoming, enjoyable, empowering, and trustworthy. They also are accessible per WCAG 2.1 guidelines, when applied correctly.
Scoop's primary font is Gotham. We choose this font because it's legible, versatile, and fits our brand well.
The components are based off of Google's Material Design and are designed to be accessible, e.g. 48pt touch target, contrast ratios, etc. and easy to scan for the most relevant information, e.g. more white space, clearly defined hierarchy, etc.
I took the lead in creating and maintaining the design system in Sketch and Zeplin. Using Sketch's symbols increased the speed of creating implementation ready designs. While using Zeplin's Styleguide allowed Engineers to easily create coded versions of the components. Both ultimately sped up implementation and reduced visual issues found during QA.
The design system was built in a way so the components would work on both iOS and Android platforms, while also taking into consideration, the differences between each platforms specific components, transitions, and navigation. This speeds up the design and implementation process because there's only one set of components to maintain.