Take7 Music

Take7: Rebrand

In mid-2015, Take7 secured a round of seed funding. Our user interface was in a prototype state, and while that was enough to secure initial funding, it needed an update to attract additional investment. The challenge was to coordinate three external teams across multiple time-zones to update our brand identity, website, and app interface. As the Project Manager, I sourced and coordinated external suppliers, and as the Creative Director, I provided direction to unify the design.

Role

Creative Direction

Platform

MacOS, iOS, Windows, Web

Tools

Sketch

Overview

In 2015, Take7 secured a round of seed funding with a prototype interface. We had 3 months of funding and our brand was in need of an update to attract users and additional investment.

Take7 title screen before rebrand

The Challenge

Our biggest challenge was in coordinating external teams across different time-zones. We only had a handful of engineers at that time, so we needed to outsource design and back-end work across Shanghai, Berlin, and Stockholm.

Take7’s team structure in 2015

Approach

Our approach was to centralize design direction in Berlin and distribute it to our external suppliers. First, we defined our brand attributes: our culture, our voice, and our purpose. Next, we used those keywords to explore our brand direction with mood boards and developed a style-guide. Finally, after we had direction in place, we kicked off the visual update of our website and application in Stockholm and Shanghai, which we managed from Berlin.

Alignment & Direction

Project Pillars

We defined 4 “project pillars” before starting any work. This helped manage expectations, not only with our external suppliers, but with our internal teams.

  • Align Early. Make sure everybody knows our vision and direction from day one.
  • Simple Design. Focus on a simple, modern, and functional design, and come back for improvements later.
  • Clear Scope. Define a clear scope to avoid designing an interface that we cannot build in time.
  • Check in Often. Daily stand-up meetings to check in on progress, identify roadblocks, and course-correct.

Initial Materials

We assembled necessary information about our brand and to align our internal and external teams behind a single vision. I put together a package for our suppliers which included:

  • Elevator Pitch. A short, tweetable description of our product.
  • Product Vision. Where we wanted to be in 5 years.
  • Customer. Descriptions of our customers and their needs.

From there, we held a workshop with our suppliers where we encouraged questions. In many cases, their questions exposed holes in our direction, which we revised before continuing.

Brand Exploration

We kicked off rebranding efforts with a workshop to define our brand attributes — Single-word adjectives that describe who we are, our tone of voice, and how we want our brand to feel to our customers. From there, we picked the most promising keywords and created mood boards for each.

Mood boards exploring a variety of brand directions.

Music as a Lifestyle

Our goal for Take7 was to create a music education platform that is simple, modern, fun, and accessible. The world is continually changing, and we wanted our brand to thrive in that changing world. For us, this meant looking forward and leaving some of the more traditional approaches, like Classical and Educational, behind. High-Tech and Revolutionary felt unapproachable. Our final direction: Music as a Lifestyle.

Brand direction: Music as a lifestyle

With a general direction in place, we promptly assembled a style guide which we would use for both web and app UI design. We distributed materials to our external suppliers to align them behind a single vision.

Sample pages from the Take7 style guide

Redesign

Kick-Off

With our brand identity in place, we started the design phase. Due to time constraints, we needed to update both the web and app interface in parallel. With separate suppliers for app and web, our challenge was to make sure the final designs appeared as a single cohesive brand while still allowing our external suppliers the freedom to explore solutions. To facilitate this need, we created guidelines and constraints:

Guidelines. We settled on a few guidelines to unify the design between the website and the app: Flat design, a focus on lifestyle images, button and icon styles and gave our suppliers the freedom to work from there.

Constraints. On the app side, our development tool only supported primitive UI components (buttons, sliders, and checkboxes). In addition to basic guidelines, we outlined constraints so we wouldn’t lose time designing fancy UI elements that we couldn’t implement.

Wireframes

Using the guidelines and constraints, our web and app designers started working on wire-frames. Under our principal of “align often”, I organized regular calls to identify and resolve inconsistencies.

Sample image of an early web wire frame.
Sample image of an early app wire frame. Buttons and style didn’t match, and were revised.

Hand-Off

Under normal circumstances, hand-off from designers to developers can be tricky business. With teams from different time zones and cultures, we needed to be extra careful. We weren’t worried about our website because we had a single supplier for design and development. For the app, we had a designer in Sweden and engineers in Shanghai, so hand-off was critical. To facilitate this handoff, we developed a set of guidelines for our final sketch renders, including information on how to assemble various assets in Sketch so our developers could easily understand the designers intent. 

Sample image of sketch guidelines for our UI artist.

 

Final Product

With guidelines in place, both the web designers and app designers were able to produce a unified and consistent design.