Ana Cachão
UX designer

Electric Jukebox

The easy way to enjoy music together at home

Client
The Electric Jukebox Company

Project Date
June 2014 - March 2016

Major Tasks & Responsibilities
Design the interface for television

Platform
Television

Design Tools / UX Methods Used
Adobe Illustrator, Adobe Photoshop, Adobe Indesign, wireframes, prototype, usability testing 

Transform the television into
a Jukebox
Electric Jukebox

Legibility from 3 meters away, source: https://developer.mozilla.org

Research

Before I started the design I researched about the design principles for television. I had to keep these guidelines in mind to make this app the best music experience for television.

Design for the TV requires a set of considerations including:

  • Easy navigation and consistent use of focus and highlighted states - every item on the screen must be reachable by the cursor, and it should always be clear where the cursor can move next
  • An action safe area where the image could be safely displayed
  • Legibility from 3 meters away. Font size should never be smaller than 24pts to accommodate every type of user
  • Keep the lines to even numbers and no thinner than 2px to avoid flickering the elements on screen
  • Avoiding using high-saturated colors and white on large elements or backgrounds

Electric Jukebox

Exploring neon styles

The right style

Once I had the list of requirements and wireframes I started some design concepts for the interface. Using Adobe Illustrator and Photoshop, I presented several options to find the style direction that best represented the product.

The idea was to transform the television into a jukebox and give a real sense of music entertainment.

Electric Jukebox

Electric Jukebox start page

Ready to test

After defining what was going to be the MVP the engineering team built the product in order to pitch to investors and start the usability testing. I created the assets and guidelines to help with the delivery.

Electric Jukebox

Users giving a go with Electric Jukebox

Usability testing

I conducted usability testing with 10 participants. They all had the same characteristics as our target audience and the sessions were taken place in a living room to recreate the environment where the product would be used.

Iterate after users feedback

I found that most users struggled with the Wii style controller to horizontally scroll the discs and use voice control to search for music. I had to change the interface to add guidance for the navigation and add new screens to give feedback when using voice control.

Electric Jukebox

Functionality and interaction with an album

Shape the app

After fixing the usability issues and locking in the UI design, I started creating high fidelity designs of the app so they could be used in retail and commercial marketing.

Electric Jukebox

Some of the components that makes Electric Jukebox interface

Ready for development

I also prepared all of the assets and documented the design specifications in order to achieve faster delivery of the product.

Electric Jukebox
Learnings

For the first time, I designed for a TV display and learned that there are so many principles to consider when designing for a big screen!

The project was a huge learning experience, I especially loved iterating the designs and testing on users. It is such a powerful thing to get our users to feedback during the design process. This way, we’re delivering a product with the confidence that users would enjoy and understand it.