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.