Crew App 

Building a brand FOUNDATION

Role: Lead Visual Designer

Deliverables: Brand Book, Marketing & Sales Materials, New Illustration Styles, Product Style Guide, Vision Work

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

Many work products on the market today target desk workers and tech-minded individuals. Crew specifically targets workers that are on their feet for most of their day. These people work in a variety of industries including restaurants, hospitals, non-profits and construction, to name a few. 

When I joined Crew, I was given a blank canvas. Being the first of three design hires, there were no established brand parameters from which to design. I was given an opportunity to start building the brand from the ground up. To date, I've focused on building out both brand guidelines and a product style guide, to ensure that we are building a cohesive set of products that provides value to and solves real problems for our customers.

Here is a look at the process of building the (ever-evolving!) Crew brand.


STEP 1: Where to begin? By listening to and better understanding the Crew customer

When we tell others that we listen to our customer at Crew, we really mean it. We are constantly seeking to better understand our customers in a variety of ways; by sending out customer surveys, by conducting in-person interviews, by visiting real teams on-site and by reviewing a 24/7 company-wide accessible customer support channel. This has been a joint effort by our co-founders, marketing, sales and design teams.

Our surveys have focused around the following questions:

• What is your job?

• What is Crew (to you)?

• What do you believe is the true benefit of Crew?

• How has Crew contributed to the success of your job? 

As a result of these survey responses, I was better able to understand who our customers are and what motivates them at work. From there, we worked with a business positioning consultant to establish our high expectation customer. (Our HXC is a secret, but they're pretty awesome!)

Key takeaways: Our customers mostly identified as "leaders" even if they did not necessarily hold a leadership position. Our managers loved Crew because it kept their employees on task and didn't encourage distracting chatter (ie: sending gifs or animations that could distract from the job). Customers also valued how simple and easy it was for them to use. We kept hearing that Crew helped them "keep everyone on the same page" which is exactly why this has become one of our main marketing tag-lines. 


STEP 2: Leading a Brand Experience Workshop

After spending time getting to know the Crew customer better, I decided it would be beneficial to hold a brand workshop to kick things off. At this stage, we knew who our customer was but we hadn't figured out what the ideal Crew experience would look like for them. Sure, everyone held opinions on what they believed the Crew experience should be, but these words and ideas needed to be translated into actual designs and real experiences.

Overall Objective of the Workshop:

To give everyone tools to describe a visual and subjective customer experience. The workshop focused on visual strategy and helped strengthen the alignment around our brand moving forward. 

What was the purpose of the workshop?

  • Provided a rationale that helped non-designers and designers understand the purpose behind visual design choices.
  • Empowered designers to be on the same page!
  • Determined what our product ideally needed to look like in order to align with the brand vision

Who was involved?

Our CEO, CTO and co-founder, CMO, Head of Product, and a representative from the Sales, Design, and Business Development teams.*

The Process:

I had prepared ahead of time by placing specific images on the wall. Images ranged from competitor products, colors, ads, cars, and household objects. I gave each person three colors of dots representing "Yes" "Maybe" and "No." The answers meaning that something (color, copy, style) within the image does, might, or does not reflect how we want our Crew Experience to look or feel like. After the exercise, we started grouping the images according to overlapping answers and started to notice trends.

    Boards: Includes key images from the workshop plus a few new images collected that embody the attribute (color, texture, etc.). Board categories are yes, maybe, and no.

    Boards: Includes key images from the workshop plus a few new images collected that embody the attribute (color, texture, etc.). Board categories are yes, maybe, and no.

    Strong Yes: Grouping of the key words that were written on the stickies the most amount of times. Results: Crew must be useful, provide a sense of empowerment, be simple and easy to use and feel inclusive.

    Strong Yes: Grouping of the key words that were written on the stickies the most amount of times. Results: Crew must be useful, provide a sense of empowerment, be simple and easy to use and feel inclusive.


    STEP 3: The Crew Experience

    From here, I was able to pull our top words that we felt defined the Crew Experience and tweak them slightly to align with our vision. We kept the words "empowering" and "inclusive" from the workshop, but "useful" became "organized" and "simple" became "smart." Brand experience statements were also created to describe the ideal experience for our customers and connect back to our High Expectation Customer. 


    STEP 4: Building out the brand guidelines

    With our brand workshop results, our HXC and core values work completed, we were ready to create our external-facing brand guidelines. The external-facing guidelines contains information about Crew that should be constant; these key principles and values really shouldn't change much, if at all, over time (in comparison to a product style guide - which is constantly evolving!). These guidelines are divided into three key chapters; Beginnings: the Crew founding story and early days, Who is Crew: Our mission, vision, cultural values, and The Crew Brand: voice & tone, crew customer, logo guides. Below are a few digital snaps of the guide:

    Sample digital pages
    Sample pages from the manual

    Sample pages from the manual

    Translating words into visuals: Early sketches and initial explorations of visual language; typography, colors, patterns, shapes. Matching our ideal experience and translating that information into colors, moods, shapes, etc.

    Translating words into visuals: Early sketches and initial explorations of visual language; typography, colors, patterns, shapes. Matching our ideal experience and translating that information into colors, moods, shapes, etc.


    STEP 5: CREATING A Product Style Guide

    Now that we knew what experience we wanted to create for our customers and how our product should feel, we needed to create a working product style guide to bring it all together.

    Crew is a small company and we don't have the luxury of rolling out a full product re-design overnight. We decided that the best way to accomplish a product re-design would be to divide the work up into sections and test new designs in the product by category; ie: test new typography, color, illustration styles, etc. 

    Sometimes the hardest part of any project is to simply get started. This guide was created as a starting point for the design team to use and build upon. The beauty of a product style guide is that once you start one, it should continue to constantly evolve and grow. The initial guide included the following: 

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

    The design team uses this guide as a reference for their work. Anytime we test a new style and it performs well, we are all responsible for adding it to the style guide so that the new design becomes a permanent part of the app. We then connect with our engineers to agree on a timeline for updating it in the app and to weigh the costs/benefits of implementing the new styles.   

    Sample pages from the guide, which lives in a sketch file. 

    Sample pages from the guide, which lives in a sketch file. 

    Style guide in action: Our Engagement team wanted to create empty states throughout the app to be used as an opportunity to educate users on the value of various features. By creating illustrations in the new style and dropping them into the mocks according to the style guide specs, this ensures visual consistency throughout the app. Double win!

    Style guide in action: Our Engagement team wanted to create empty states throughout the app to be used as an opportunity to educate users on the value of various features. By creating illustrations in the new style and dropping them into the mocks according to the style guide specs, this ensures visual consistency throughout the app. Double win!

    Testing out new illustration styles

    Building out a new illustration style that is unique to Crew. Illustrations shown below in Help Center example.

    Building out a new illustration style that is unique to Crew. Illustrations shown below in Help Center example.

    In-progress help center re-design with the new illustration style.

    In-progress help center re-design with the new illustration style.


    STEP 6: TESTING 1-2-3. Design should be constantly evolving! 

    At Crew, we don't roll out a new illustration, new color palette, or new pattern without first aggressively testing the designs with our actual users. We have an incredibly talented data expert who gives us real customer data on a daily basis. In example, the above "Files" illustration screen would be tested as part of a series; testing a couple of variables against the previous design: illustration & copy vs. copy only vs illustration only. We can ask: Does illustration encourage the customer to read the copy? Does copy help them understand the value and therefore upload a new file? These are all sample questions we might ask when testing out a new UI, message or visual.

    Crew believes that every employee should produce work that a craftsman would be proud of while following the process of a scientist. The steps within the scientific method can be used when approaching any design: Question > Hypothesis > Experiment > Analysis > Conclusion.

     

    New App Store Video for Crew. This was a joint effort with myself and our CMO. My role was to provide the illustrations, storyboards, and voiceover. Our CMO provided the copy and together we worked with our CEO to finalize the screenshots. We worked with an outside agency to help us animate the full video and optimize it for the app store.  We are seeing a boost in page views from providing a video in our listing.

    ANIMATED Videos

    We were very happy with the results of our new app store video and continued to work with an agency to produce a library of animated short videos. My role was to provide the illustrations and storyboards, while the agency produced the animation. We found this collaboration to be the fastest way to produce a high volume of ads.


    STEP 7: Design should be constantly evolving! 

    An empathetic and strong brand should be constantly evolving. Below are some samples of work created for Product, Marketing and Sales as a result of this brand work.  

    Future Ideas... 

    Concept for the future marketing website.

    Concept for the future marketing website.

    Concepts for advertising and case studies; focusing on real customer stories and real customer photos. Placeholder stock used in the above.

    Concepts for advertising and case studies; focusing on real customer stories and real customer photos. Placeholder stock used in the above.