Take7 Music

Take7 Rebranding

Project Manager, Creative Director

In mid-2015, Take7 secured a round of seed funding. At that time, the application interface was in a prototype state, and while the prototype interface was enough to secure funding, it was in need of an update before public launch. Our goal was to use some of the new funding to update our brand identity, website, and application interface so we could secure additional investment and before launching Take7 to a broader audience.

Challenges

Our biggest challenge by far was our team structure. Our internal staff consisted entirely of client-side engineers, and we were outsourcing all of our design and back-end work. In total, we had three external suppliers and teams in Berlin, Shanghai, and Stockholm. The budget was also a concern. We had enough budget to continue for another few months, but after that, we needed a functional design so we could secure additional funding. 

Approach

Align Early. Make sure all parties know our product vision and direction from day one to avoid wasted effort.

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, reveal roadblocks, and course-correct.

Alignment & Direction

Our first step was to assemble some necessary information about our brand and to align our internal and external teams behind a single vision. We put together a package for our suppliers which included:

  • Elevator Pitch
  • Product Vision
  • Target Market
  • Customer Needs
  • Business Goals

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 our rebranding efforts by brainstorming a variety of keywords related to our product and vision. From there we picked the most exciting ones and created mood boards.

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 behind. Our final direction: Music as a Lifestyle. We promptly assembled a style guide which we would use for both web and app UI design.

Brand direction: Music as a lifestyle
Sample pages from the Take7 style guide

Redesign Kick-off

With our brand identity in place, we started the design phase. 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.

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.

Sample image of an early web wire frame.

Design 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