Time keeps on slipping into the future ...
back
Blackfire App Design

Blackfire

Control Your Music World

Blackfire Research provides simultaneous streaming solutions for audio and video across multiple content sources and media devices. In 2015 I was a lead designer on the redesign of Blackfire’s Android music player app, which needed to be updated from a basic prototype version that had poor visual design and UX. The project goals required the following:

  • Redesign the app to create a delightful user experience and compelling visual design
  • Utilize Android (Material Design) best practices for native mobile app design
  • Make it simple to configure and program host wifi network to the device
  • Create and control different music zones (rooms)
  • Design an interface to play native and multiple third-party music sources
  • Differentiate the app from the competition
  • Create a style guide and document how the app works

I worked with a cross functional team on all phases of the project, created a project plan, conducted workshops to solve user flows, explored design concepts, created final visual designs, and produced a style guide for developers to reference.


Blackfire Album View

Define Scope & Adopt Common Patterns

The project began with a kickoff meeting to get a high level understanding of the problems, goals, and target users and was followed by a demo of the existing app. It was clear that the overall design and interaction was lackluster and onboarding wifi/speaker configuration was convoluted and confusing.

In these initial meetings there was an enormous amount of blue sky ideas of what the app could do. The possibilities were endless, but we had to reign in the ideas to fit the budget so part of my role was to define scope of work and get agreement, which we did. At the core of the app there was plenty of basic problems to solve that would make for a compelling redesign and achieve the primary goals while also meeting the client’s budget and timeline.

The client had a vague idea of who the target user was so we did a workshop to flesh out and define a proto-personas based on assumptions rather than data because there was no budget or time to do proper research. Although not ideal, this still gave us some indication that people who would use Blackfire’s app were most likely male, affluent, tech savvy, and audiophiles. Knowing this helped us make design decisions along the way.

I then did a competitor analysis to become familiar with the space. I am a big music app user and was already familiar with Spotify, iTunes, Pandora, and SoundCloud, but I found new patterns using Amazon Music and Google Play’s music apps and by analyzing Sonos’ app for room and speaker configuration.

Ideas were flowing. I took a lot of screenshots of apps and made notes. I reviewed Material Design to get up to speed on the latest Android design guidelines and then I led a workshop with the team that started to map out user flows.

Low & High Fidelity User Flows
Low to High Fidelity User Flows

Initial Concept Explorations

Next the design team and I developed a series of visual concept designs that explored the look and feel of the app. The client was eager to see these at this early phase so we obliged and set about exploring icons, texture and patterns, typography, UI and color.

Visual Concept Designs
Visual Concept Designs

Sketching & Annotating

The client was excited about the visual concepts and we began to select elements from each concept that might be used. I then sketched the UI to figure out the interactions based on the task flow charts that were created. Usually I would create wireframes but the client didn’t think these were necessary and assumed the developers would be able to piece together the interactions and screen flows. I knew from experience that this was going to be an issue and problems would surface. This wasn’t the ideal process and I pushed back, but the client insisted. Soon after development started this proved to be the case so we decided to annotate screen designs in the style guide that described how the app should work. In this sense, I ended up creating high-fidelity wireframes.

Rough Sketches of the App
Rough Sketches of the App

Finalizing the Design

After sketching out screens I began to take elements from the concept designs and methodically created a visual system that felt cohesive. Several rounds of designs were created and reviewed with the client stakeholders. Once approved I created a style guide that included the final designs with annotations and specs for the interface, interactions, animations, typography, colors, and buttons.

Blackfire App Style Guide
Blackfire App Style Guide

The Impact

A Unique Music App

The redesigned app distinguished Blackfire from its competitors. All of the objectives of the project were met and delivered on time. The scope of work was defined while a backlog of blue sky ideas were captured for future implementation. The app redesign created a vastly improved user experience including a compelling interface, interactions, and visual design. The complex tasks of connecting the host wifi network to the device, creation and control of different music zones, and playing/tracking multiple third-party music sources was made simple and intuitive. And most importantly the client was thrilled with the design and stated that “it went beyond expectations.”

Final Designs
Final Blackfire Andorid App Designs