Avid Pro Tools Customizable UI
The Pro Tools Customizable UI project added not only a dark theme with modernized UI elements, but a whole palette of parameters that allowed users to customize their GUI to their liking, and a High Contrast mode tailored for visual diversity. Much more than just aesthetics, this project provided an unprecedented amount of flexibility for users to optimize their workspace to suit their needs, and improved accessibility.
​
For this project, I was the Product Owner and Designer, responsible for all aspects from conception to release.
The Problem
GUI Becoming Dated
By the late 2010s, Pro Tools users were already complaining that the GUI was starting to look old, and in particular were interested in a "dark mode/theme" which was becoming common amongst competitors. Additionally we were seeing anecdotal evidence that younger users were less likely to choose Pro Tools partly due to the dated look of the existing GUI.
​
Problem with Legacy Light UI
A darker UI was especially relevant to Pro Tools since many users work in darker environments where the light colored GUI led to eye fatigue.
Man, that's bright!
Research
Identify Target User
Customizable UI and dark theme were to target these users:
-
Younger demographic who expect a sleek modern interface
-
Users working in darker environments (very common in audio production)
-
Vision diverse users
​
Conduct User Research
A number of sources were used to gather details on workflow needs and pain points.
-
User forums (official and external)
-
Feature request hub
-
Customer association (in-person gatherings and surveys)
-
Pro Tools accessibility user group
-
Beta group
The Pro Tools beta group composed of highly experienced professionals in various roles and fields, was once again invaluable. The strong working relationship established during the Folder Track project was put to good use as we worked closely to test proposals, ensuring that the design was useful in various environments and roles.
Determine Business Value
Pro Tools being an already established product, a specific monetary value was not associated with this feature. However the proposal was given the go-ahead because it would extend the life of the existing GUI for many years, without the large investment that would be required to redesign from the ground up.
Challenges
A Potentially Massive Undertaking
A full UI refresh was understood to be a massive undertaking which leadership was not willing to support due to competing priorities. Any amount of resource allocation was dependent on how feasible and containable the effort would be. Typically a full UI refresh includes rearrangement and redesign of UI elements, based on a rethink of entire workflows. In fact the previous UI refresh was a very intensive multi-year effort that continued for several releases after its initial release in 2008. This amount of effort was simply not acceptable.
The challenge then was to refresh the UI significantly enough to satisfy users, without redesigning and rebuilding the existing layouts.
​
No Central Color and Asset Management
Mostly due to the long history of Pro Tools where features were often added piecemeal, there was no established system for managing color and graphic assets. This made it very difficult to ensure that a universal color modification system would work correctly across the entire application and its many windows.
​
Accessibility for Vision Diversity
A core goal for this effort was for the refreshed UI to be equal or better than the existing UI for vision diverse users. Studies show legibility to be more challenging on dark UI compared to light, and this was consistent with beta and accessibility group feedback during development.
Final Design
Dark Theme (November 2020)
The new dark theme included new UI assets, giving a flatter more modern look.
Classic (Light) vs Dark themes
Dark theme utilized modern flat design
UI Customization (June 2021)
Many parameters were exposed to users so they can customize their workspace to create a comfortable working environment, optimize their workflows, and to have some fun making funky colored UIs! Customized UI could then be saved as presets so that users can quickly switch them to suit their workflow, as well as transport to other workstations, and share with other users.
UI Customization Controls
High Contrast UI (October 2021)
A special mode for vision diversity was implemented to improve visibility of UI objects which were especially difficult for some users to discern. This mode included exaggerated indicators for disabled state plates, borders between and around many UI objects, and higher contrast in text fields.
High Contrast UI ON
High Contrast UI OFF
Behind the Scenes
As part of the development effort, new dev tools were created for color and asset management. The tools enabled much quicker iterations of trial and error, as well as cataloguing all the different colors and assets that were used in the Pro Tools GUI. It also enabled the visual designer to directly find and manipulate colors and assets without having to wait for developer availability, thus greatly speeding up the development process.
Management Tool - Colors
Management Tool - Assets
Insights and Findings
Clip States
One of the challenges was to design the visualization so that all 40+ possible states of clips on the timeline in 50+ colors would communicate effectively. Although these went through several iterations during development, user and beta feedback after the initial release pointed out some difficulties in differentiating between a few of these states.
After further analysis, the design was changed so that the selected states were more clearly differentiated from non-selected states:
Personal Taste
While there may be general trends in popularity, the ideal look of a UI is highly dependent on personal taste. This hypothesis (fear) was proven in many forum posts (thread from Avid Pro Audio Community) where some users were very critical of the new dark theme and its design choices.
We gathered and parsed through feedback after the initial release, and separated actual usability issues from aesthetic preferences. While some issues such as clip states needed to be addressed on our end, most had no real single solution because they were either based on personal preference, working environment, or workflow goals.
​
It was evident that the only viable solution was to give users control over key UI elements. Luckily the system we implemented was designed from the ground up to be flexible, and it was technically simple to expose these parameters. However it was quite another challenge defining what parameters to include and exclude.
Summary
A New Lease on Life
Analytics data shows the popularity of dark theme, with roughly 2/3 of Pro Tools users opting for it. Of course it was never our intention to completely replace the light theme; instead we wanted to provide users with options (thread from Facebook Pro Tools user group).
​
Helping to Establish a Subscription Appropriate Cadence
After the initial release of dark theme, key bugs were quickly addressed and major upgrades released in quick succession. This (hopefully) helped change the ingrained user perception that Avid never follows up with improvements once a feature is released, and proved that we were serious and able to continuously deliver goodies in a way that users rightly expected from a subscription.
​
Inclusive Design
As a product with a wide range of users, it's important to review and improve the user experience for diverse abilities. In this case the enhancements were explicitly designed with vision diversity in mind, including color blindness and low vision, and in doing so the end result also benefited those without disabilities.
Shout Outs!
I worked very closely with our esteemed visual designer Christoph Diermann (you are the man!!) in choosing the right color combinations, determining and achieving the desired look, and learning in general about visual design. I owe a great deal to him in the successful completion of this project and learned a whole lot about how to use color to clearly communicate information. Of course color alone cannot be relied on to communicate different states in consideration for color blindness, but we worked through that challenge too!
​
The starting spark and technical basis for all these improvements were dreamed up and implemented by one very talented engineer Ben Gibbons (you are awesome!!). What had seemed like an impossible mission was eventually realized in just one year from the original hackathon project thanks to his brilliant ideas, curiosity, drive, and tenacity.
​
Thank you for reading!
"Customizable UI allows users to more comfortably and clearly manage sessions in dark studios that require focus on video and musical performance"
- Joe Trapanese
Multi award winning composer and producer (Tron: Legacy, The Witcher, Disney Animation)
More Links!