Crew App: Design System
Senior Visual / Product Designer
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.
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
- 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.
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.