This is my first project designer for a soundbar product. I'm one of UX designer joining in the project in the middle and responsible for its OTT system design on TV, the front LED display design and its companion mobile app design on mobile phones.
Background
The soundbar market is emerging and rising since 2014, after a decade the first soundbar was invented. The founder of the company Creative Technology has planned and kicked off a project to produce a top-tier multi-channel soundbar with our signature audio processing built-in.
My Role
At the point of the I joined Creative, the project has been developed and ongoing for 1 year. The key part of the mechanical and electrical designs has been settled, yet the embedded system (a.k.a. firmware) and its software were still in the early stage. I took over the UX design tasks from the previous designer to continue the embedded TV system design, front LED matrix display design and its companion mobile app design, under the guide of my RO who oversaw the overall speaker system UX design.
Design Goal and Limitations
The TV system (also called “OTT” system) of the soundbar is an Android based tablet system with high customizations. (Android TV OS was announced in June 2014, yet was not adopted by the most of OTT module manufacturers. That's why we were developed on Android tablet system. ) The TV system runs several apps for soundbar setup, audio customizations and firmware update, and also some other pre-installed apps for user to consume the audio and video content.
In hardware design ( including industrial design, mechanical design and electrical design), it had been decided to use a 128*32px (56*14mm) LED display. It’s a relative small and a low-res LED display, compairing with the soundbar dimension and its distance to the user in a living room use scenario. As a designer, I have to design a systematic and informative LED display for the soundbar, as a secondary channel to provide user adequate information and feedback on interactions.
TV System of Soundbar
This is the first project I designed for TV screen, yet there wasn't any well-established TV design guidelines. Designing for TV is quite different from designing for a mobile app, and there are a few takeaways:
Display – The physical dimension is larger but the user sees from a farther distance away than a tablet.
Interaction – The user has to rely on the up/down/left/right and okay/exit buttons of the remote control to navigate.
Information and Feedback – The information being displayed on a TV screen would be in a different way. Horizontal navigation is important in a TV system and the focus state is critical to give the user a clear indication of where the “cursor” is.
There were a few iterations of the TV system. Below is the Settings page of the TV system in version 1 (left image) and version 2 (right image). There were a several functions added along the way, which caused the horizontal scrolling. To improve the navigation and its efficiency, the settings were categorized into two sections after card sorting user test with 6 testers.
A completed design of the TV system can be downloaded here if you're interested.
In the file manager and media player design, the page was designed in two columns: one column for menu tabs, which would be hiden when user focus on the content; the other column for contents, which would list the contents in a few sections vertically, as below.
LED Display
The LED is relatively small compare to the soundbar, as it provides status and feedback information as a secondary display of TV or when user is not using with TV. The LED displays the messages in a short and tidy form for the actions or events triggered.
As a audio device, the input and output are the key status to be displayed. Besides, the actions and the contents playing are also the information to be displayed. However, showing so many information in a small display was a challenge. One of the idea came up in the brainstorming was that the LED display can be tailored into two sections - one for the action feedback and one for status display, as the way how the phone OS show the status. There were a few aspects to be validated for the idea, and one of the key aspect was the size.
A minimum readable text size physically is 1.5mm at a reading distance of 40cm (0.21 degrees of visual angle. This is applicable to all digital devices, regardless of desktop or phone. Use this as a reference, assuming the TV distance is 200cm away from the user, the min readable text is 7.5mm. Looking at the LED display (128px * 32px at 56mm * 14 mm) and use 4px as a unit, the pixel of the font and the size are listed below:
Pixel (px) | 4 | 8 | 12 | 16 | 20 | 24 | 28 | 32 |
Size (mm) | 1.75 | 3.50 | 5.25 | 7.00 | 8.75 | 10.5 | 12.25 | 14.0 |
Thus, the message section min is 20px, and considering the margining between the two sections, the second section on top is assigned for 8px, and reserve 4px for the margin. A 8px height section is not adequate for a text, yet possible for icons. I did a quick mockup on the laptop and looked for 5 testers in the office to test with. The result was good, and below is a snapshot of part of the specification to explain how the display were tailored into two sections. Besides, the messages were categorized into two types, one is persistent display for the status, and the other one is toast messages to be shown momentarily when the user triggers an action.
Companion App
Designing a companion app was the one of the least challenging task among the three design tasks, as there was some reference in the design of the Sound Blaster Connect app and Sound Blaster InterConnect app on the mobile as companion app for Bluetooth audio devices and Wi-Fi audio devices respectively.
The app is available in the App Store / Google Play Store.