'DTS Phone Party' CES Demo Apps (2018)

For the 2018 Consumer Electronics Show (CES) in Las Vegas, DTS created a cool demo for a self-configuring home audio system. Because the correct configuration of home theater systems is so complex, most consumers skip it entirely -- or configure them improperly for their living room setup.

Here's the demo concept: The consumer brings home a cool new home theater system: a sound bar with 2 satellite speakers and a bass unit. After quickly plugging in the components and arranging them however they'd like, the user simply presses a button on the remote (or in a connected phone app) to automatically configure the speakers. Each speaker then plays a special audio tone. Because each of the speakers has a built in mic, the system can triangulate the locations of each of the speakers in the room. This analysis creates a spatial map of the speakers in the room and optimizes each speaker to create an immersive audio experience unique to the room. It's cool and it actually works. We gave it a fun name, too: "Phone Party."

The CES demo app project was explained to me with an even more vague description than the one above. But instead of actual speakers, the demo would use a phone as a stand in for each speaker in order to simplify the engineering effort involved. After all, each phone already has a mic, a speaker, WiFi networking capability, and is easy to program for.

As the first task, the team leader asked me to write a demo script for a DTS staffer to follow during a small group demonstration at CES. After the script was approved, I created wireframes for both a tablet controller app and the app running on each of the phones that were acting as speaker stand ins.

Because of tight resource constraints, both of the apps had to have relatively simple UIs and be easy to program, but also offer a great branded experience for the participants. In addition, I detailed the many different states of each screen. I also wanted to be sure that the image on each phone could be easily seen from across the room.

Outcome: The demo was a success. In addition, the API for the SDK was written based on the thorough UX requirements I authored.

My Role: Lead UX designer. Deliverables included wireframes and detailed UX requirements documentation. The graphic designer executed the high resolution screen mockups shared here.

Phone App - Not in a Phone Party: Wireframe

This is the phone's main screen when it's not yet in a Phone Party. We needed to be able to swap in and out demo devices, such as when a device goes haywire or the battery runs out. After swapping in a new device, the demo leader would need to manually connect it to a Phone Party.

Phone App - Not in a Phone Party: Wireframe

Tablet App - Create a Phone Party: Wireframe

Before a demo begins, the demo leader needs to create a Phone Party. The tablet acts as the main controller for the demo experience, so all of the Phone Party management use cases take place on the tablet: create, configure, and kill.

Tablet App - Create a Phone Party: Wireframe

Create a Phone Party: Screen Mockups

Tablet: This is the screen mockup for the Main Screen in the same state as the above wireframe. The graphic designer improved the proportions of the elements in the final production layout, and swapped the contents of the left and right panels.

Phone: Here, the phone hasn't joined a Phone Party yet.

Create a Phone Party: Screen Mockups

Tablet App - An Uncalibrated Phone Party: Wireframe

Now a Phone Party has been created and all of the phones (as speaker stand ins) have joined it. However, we haven't calibrated the audio yet.

The system is in the same state as a consumer would be immediately after unpacking the speakers, placing them in the living room, and turning them on. The manufacturer would ensured that all of the speakers would automatically find each other.

Tablet App - An Uncalibrated Phone Party: Wireframe

An Uncalibrated Phone Party: Screen Mockups

Tablet: This is the screen mockup for the Main Screen in the same state as the above wireframe.

Phone: The big #4 on the phone's screen is easily visible across the demo room. It means that this phone is standing in for Speaker #4 in a 5.1 speaker system (with a total of 6 speakers).

Conceptually, it doesn't matter whether it's the front left, center, or right surround speaker because after the calibration process, it will be re-optimized regardless. This design choice results from the fact that many consumers put speakers in the wrong locations when they set up their home audio systems.

Create a Phone Party: Screen Mockups

Audio Calibration in Progress: Screen Mockups

Tablet: The tablet indicates each speaker as it plays its audio calibration tones. Blue speakers have finished playing their tones, while white speakers haven't played yet.

Phone: The animated blue arrows indicates that this phone is currently playing its audio calibration tones. The animation effect was easily reproduced using a simple image swap technique, which simplified the engineering effort.

Audio Calibration in Progress: Screen Mockups

Tablet App - A Calibrated Phone Party: Wireframe

Now the Phone Party is completely set up. Each of the phones (as speaker stand ins) played its audio calibration tones, and the System has created a spatial map of where each one is in the room. As these could be completely arbitrary locations, the wireframe exaggerates them to make a point to the stakeholders and engineers.

To simplify the demo experience, the positions of the TV and sofa were stationary and well known. They could be changed in the tablet app's Settings, though.

Tablet App - A Calibrated Phone Party: Wireframe

A Calibrated Phone Party: Screen Mockups

Tablet: This is the screen mockup for the Main Screen in the same state as the above wireframe.

Phone: The visual design of the phone's screen emphasizes that it is now calibrated by changing the background color to a bright blue. This blue is in the corporate color palette.

A Calibrated Phone Party: Screen Mockups

Phone App - Side Menu: Screen Mockup

Optionally, the demo leader could swipe from the left edge on the screen to reveal a side menu. Its contents varied according to a few conditions, such as whether it was connected to a Phone Party or its current audio calibration state.

Phone App - Side Menu: Screen Mockup