DTS Tuning Tool Windows App (2016)
DTS licenses multiple audio enhancement technologies to Windows PC and Android manufacturers so that consumers can enjoy high quality immersive audio experiences over headphones and with the built-in speakers. In order to integrate the audio enhancement SDK, audio system engineers at device manufacturers work closely with DTS FAEs to optimize the seemingly gazillion different tuning parameters available in the SDK. The whole process for wringing the best audio out of the hardware components is more art than science, but it's worth it. After a great deal of careful tinkering, consumers enjoy much higher quality audio experiences from the built in speakers and connected headphones than they would otherwise.
With this project, the Product Management team asked us to design a PC app that would be used to tune the audio parameters for a PC or Android device under development. Imagine an audio engineer tuning the audio settings for a new PC that will come to market in a few months, for example. She has the DTS Tuning Tool running on a Windows PC and she connects it to the prototype of the PC under development with a cable. Using this software, she can adjust the myriad parameters to fine tune its sound.
Fortunately, the DTS SDK also has an accompanying XML file that describes each of its tunable audio parameters. For each parameter, the XML describes what kind of value it needs (e.g., decible, Hertz, enumeration, plain text; double, int, float), the range, a default value, and a brief textual description. This meta-data simplified the app development experience in many ways. It meant that we could design a data-driven GUI that automatically updates itself over time as the new parameters are added and old ones retired. At run-time, the Tuning Tool app can load the XML file and immediately adjust the components displayed on screen based on the available parameters described in XML.
Therefore, from a UX design standpoint, the major focus points was first ensuring the workflow was correct with regards to creating a new tuning project and specifying a target DTS technology and platform (Windows or Android), and then identifying reusable UI components that would be used for each type of parameter. For example, I was able to kill a lot of birds with one stone by designing a dial that displays a parameter label, min/max values, a value type (e.g., Hz or dB), the default value, and had an accompanying text input field. Of course, such a UI component needs a little extra engineering effort, but has tremendous value once created.
My Role: Lead UX designer. I spent considerable time researching the technical requirements and conferring with key stakeholders, especially the FAE team lead. I created the wireframes and wrote exhaustive UX requirements. The graphic designer executed the high resolution screen mockups shared here.
Tune a Target Device: Logic Flow Diagram
One of my strengths as a designer is understanding how data moves through a complex system which may have multiple moving pieces and potential states. Because we wanted this app to have a client-server type of relationship between the Tuning Tool on the master computer and the server on the prototype device being tuned, I created a few logic diagrams which helped the team understand how the components worked together across a few key use cases.
This diagram illustrates what happens when the audio engineer changes a tuning parameter value, how it gets sent to the prototype device and, once confirmed, gets updated in the Tuning Tool GUI -- all within the span of a human heartbeat.
Tuning Session Setup Screen: Wireframe
When starting a new tuning project, e.g., for a new prototype computer or phone, the audio engineer needs to create a new "tuning session." This simple form allows the audio engineer to specify the audio tuning technology and target OS platform, as well as adding some notes for future reference.
Tuning Session Setup Screen: Screen Mockup
The graphic designer created this screen mockup of the same wireframe shown above. This screen is a pixel-perfect reference for the engineers with regards to layout, UI component sizing, and color palette.
Main Screen: Wireframe
As a data-driven GUI, I separated out the main parts of the UX. This wireframe illustrates the main parts of the window with placeholder text everywhere. For example, in the main part of the window on the right, the number of categories shown, their labels, and their contents would be driven by the accompanying XML file at run time.
Main Screen: Screen Mockup
The graphic designer created this screen mockup of the same wireframe shown above. Note the refinements in UI component placement and touch-friendly sizing. He also created a large number of icons for each audio category, such as TruVolume HD and Wow HDX.
Parametric Equalizer Components: Wireframe
Tuning the parametric EQ values is a complicated affair. This wireframe shows one possible state and had copious UX requirement notes.
Parametric Equalizer: Screen Mockup
The graphic designer created this screen mockup of the same wireframe shown above, in context within the total app screen.
Balancing Equalizer: Screen Mockup
A later app update introduced the Balancing Equalizer feature, which was complicated to design and build.
Properties Window: Screen Mockup
I also designed a special window where DTS staff could access privately available SDK properties. On rare occasions, they would need to dig deeper into the SDK to create the desired audio experience for consumers.
This screen offers a few features which make life easier for DTS staff, such as filters and display options. DTS staff also desired an at-a-glance-view of large numbers of properties side by side, similar to a spreadsheet in information density.
About Screen: Screen Mockup
Even though this was a B2B app only available to a limited number of licensees, I insisted that it have an About Screen. This was a new standard that I required all UX design staff to implement in their projects.
I worked with the Legal, Marketing and Product Management teams to create a global template for About Screens. Here, one can see general information about DTS, copyright info, and important information about this specific product that would be useful for technical support.
