Crew App: Design System

Role

Senior Visual / Product Designer

 

TEAM

Design Team

 

Deliverables

Product Style Guide, Component Library  

 

WHAT IS CREW? Crew is a new work app for teams that includes Messaging, Scheduling, Tasks and Recognition; making schedules, shifts and announcements available on everyone's phones at all times. Crew is for hard-working, organized leaders who want to ensure that everyone on their team has a successful day at work.

Creating a component library 

As the foundational design team of Crew, we knew we couldn't get faster and better at building products if we didn't first change the way we built them. We invested time upfront in building out our internal design language and product toolset for both ourselves and future designers. The component library allows us to work smarter and faster - dedicating more time to strategic thinking and problem solving versus spending time setting up files. The library also ensures that we are creating a consistent experience for our users throughout the entire app.

 Sample of style guide components 

Sample of style guide components 

 

Building the style guide

A product style guide should constantly evolve and grow, and we created the guide as a starting point for the team to build upon. Anytime we test a new style and it performs well, we are responsible for adding it to the style guide so that the new design becomes a permanent part of app.

The guide includes the following: 

  • Grid Systems: Spacers
  • Visual: Logos, Typography, Color Palette, Iconography & Illustration, Avatars, and the Crew Icon Font
  • Navigation
  • Core components: Rows, Controls, Modals, Features

We moved to a simplified color palette and font; converting to system fonts for both iOS and Android. The more colors you use, the more complicated the design becomes; more messages and feelings are conveyed which results in sending mixed messages to the user. We applied these colors and fonts to create unity and simplicity throughout our products.

 Sample of main product color palette. 

Sample of main product color palette. 

 Sample of style guide font styles

Sample of style guide font styles

 
 Sample pages from the guide 

Sample pages from the guide 

 

Defining repeat experiences

An example of the components in action are how we design our dismissible banners. Dismissible banners throughout the app are used as an opportunity to educate users on the value of various new features. With our new style guide in place, we are able to quickly create new banners by dropping in the copy and illustrations according to the guide.  

 I created a set of icons and in-app illustrations for our team to pull from.

I created a set of icons and in-app illustrations for our team to pull from.

To learn more about the visual and brand identity work done, view the project: 'building a brand' here.

To view the components in action, visit the project 'recognition' here.