Scoop Design System

Creating a universal design language to use across platforms

Laying a Foundation

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.

Goals

  • Have a single source of truth that can be accessed by Designers, Engineers, PMs, and more.
  • Speed up both the design and implementation of features while increasing accuracy.
  • Reduce the need for visual QA.

Building Blocks

Color, typography, icons, and components are the base of the design system.

Color

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.

The bright, trusting, and inviting color palette.

Guidelines

  • Green - Use green for progress, confirmed and verified states, selected/on states, and secondary action outline and fill.
  • Dark Green - Use dark green for secondary action text, and primary callouts.
  • Blue - Use blue for primary actions and links.
  • Yellow - Use yellow for delightful actions, like favoriting, and secondary callouts.
  • Red - Use red for destructive actions.
  • Dark - Use dark primarily for text, unselected/off states, text inputs, and sometimes used for tertiary actions.
  • White - Use white for backgrounds, text, and primary and secondary actions when on a colored or textured background.
  • Grey - Use grey for view backgrounds.

Typography

Scoop's primary font is Gotham. We choose this font because it's legible, versatile, and fits our brand well.

Typography styles and line-height rules when pairing sizes.

Icons

I developed an icon set because the icons that were being used weren't cohesive and were not optimized for legibility. I decided to use Material Design Icons as a starting point because it provided everything I needed to quickly create a cohesive and legible icon set.

For the icons to be on brand and easily understood I choose to use the following characteristics:
  • 1pt rounded corners soften the look and feel and make it more approachable.
  • 2pt strokes outside and 1pt strokes when necessary for increased legibility.
  • Filled, with some exceptions where outlined made it easier to recognize and understand.
  • They are actionable.
These are the main icons currently in use.

Base

In order to have consistent and pixel perfect icons I used a 24pt by 24pt grid with keylines created from basic shapes. This standardization ensures that when other designers create icons that they fit the look and feel.
Grid
Keylines

Geometry

Following the keylines helps to unify and systemize the icons placement on the grid.
24pt by 24pt grid.
Guides created from circles, squares, and rectangles.

Platform specific

Since Scoop has both an iOS and Android app, we wanted to make sure we were using the correct icons depending on the platform. This enabled our carpoolers to quickly understand and know how to use an icon because of their familiarity with it.
iOS share icon.
Android share icon.
iOS back and forward icons.
Android back and forward icons.

Components

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.

These are just some of the components used.

Design Guide

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.

These are a handful of pages from the design guide.

Platform Comparison

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.

From left; iOS and Android Sign In view and iOS and Android Cancellation Details view in the bottom sheet.