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.


Project Overview 

PROJECT GOAL Improve customer satisfaction & activation rate by implementing a uniform design system which aims to build trust, add moments of delight while also solving discoverability issues thru IA improvements.

IMPACT Build trust via consistent patterns. Improve usability of app via IA updates  

 The app before the new design system was created.

The app before the new design system was created.


 Brainstorming! The style guide and component library work kicked-off after we had done a larger brand & product audit. Brand workshop (left) and off-site IA product vision workshop (top right).

Brainstorming! The style guide and component library work kicked-off after we had done a larger brand & product audit. Brand workshop (left) and off-site IA product vision workshop (top right).


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. Most importantly it allows engineers to be empowered by design rather than slowed down by it.

 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.

 
Style Guide Shot 5
 Sample of main product color palette & system font guide.

Sample of main product color palette & system font 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 and add to over time.

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


 Dismissible educational banners: New components & illustrations in action

Dismissible educational banners: New components & illustrations in action


 'After' shots

'After' shots

This was a great effort that spanned across multiple product teams. Big shout out to teammates Suchit Dubey, Nate Hajian, and our talented engineers!

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 'Employee Recognition' here.