Legibility from 3 meters away, source: https://developer.mozilla.org
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
a Jukebox
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
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 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.
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.
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.
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.
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.