Product News | December 19, 2014
Second in a series of articles on the development of Ozone 6. The story behind the Ozone 6 vision can be found in Part 1: The Vision for Ozone.
In Part 2 of our series, we’ll dive deeper into the design of the Ozone 6 user experience, and explore some specific places where we reimagined Ozone in order to provide a superior mastering experience.
After establishing our vision of Ozone 6 as a creative mastering platform, we set out to address common problems faced while mastering.
Extensive research and feedback from both users and beta testers revealed that many of these issues could be resolved through strategic changes to the user experience—the way that users interact with the software’s interface. Additionally, we discovered that a standalone version of Ozone could offer more solutions for users as they guide their tracks through the mastering process.
One challenge, however, was making Ozone 6 accessible to new users while still retaining the power and flexibility of Ozone 5. We also had to balance the most important tools for modern mastering workflows with enough open-ended options for users to achieve their signature sound.
So we created a list of goals to help guide us as we began overhauling the interface:
Redesign Ozone from the ground up to facilitate important mastering workflows.
Refine, flatten, modernize, and simplify the UI as much as possible.
Maintain design consistency across the Ozone plug-ins, “mothership,” and standalone.
Use colors consistently and with purpose.
We believed that by designing around the most essential features, reducing the number of colors, using larger font sizes for parameter readouts, and contextually showing or hiding interface elements, we could make Ozone 6 even more intuitive, powerful, and easy to use.
Early iterations of the 30+ wireframes that we generated throughout the design process.
Through substantial interviews with users, we gained valuable insight about their priorities and most common workflows. In general, we found that users tend to work in a certain order:
Based on these initial conversations, we determined that the order of operations for this important workflow should be mirrored in a left-to-right and top-to-bottom layout. Track navigation and editing areas would be at the top; presets, signal chain, and module controls would be below; and metering and auditioning controls would be on the right.
So to explore how this overall mastering workflow could map onto the layout of the application, we generated more than 30 high-level wireframes for the Ozone 6 standalone application.
Left: Wireframe experimenting with track sequencer and track editor at the bottom of the application.
Right: Final low-fidelity wireframe of the standalone application, reflecting the top-to-bottom, left-to-right organization.
Although we explored several standalone layouts, we eventually refined a single wireframe that captured the most common mastering workflow. This final wireframe also embodied our goal of supporting a seamless transition between mixing in a DAW and mastering in Ozone as a standalone application. (For example, many of our users are Ableton Live users, which informed our decision to place the track sequencing and editing spaces at the top of the standalone, and the customizable signal chain at the bottom.)
Out of 30 low-fidelity wireframes, we felt this one best captured the relative importance, location, and amount of space needed to accommodate important groups of controls.
We then began to fill in each of the major areas of this initial wireframe. Even at this early stage, we were exploring ways to improve user interactions in Ozone. For example, the implied interaction design for track tabs, the signal chain, and auditioning buttons all made their way into the final version.
Filling in more detail on our wireframe for the standalone.
Once the wireframe felt sufficiently refined, we created a higher-fidelity proposal for the overall look and feel of Ozone 6.
Initial high-resolution design proposal for the overall look and feel of Ozone 6.
As the visual design of the product began to take shape, it became clear that one important aspect of the layout deserved additional attention: the signal chain.
The customizable signal chain found in Ozone 6 was ultimately created out of need to unify both the Filter Graph and the Module buttons on Ozone’s hardware in one simple tool, representing Ozone’s signal flow.
Early user interviews revealed that pulling the “Filter Graph” out of the options menu would make it easier for users to create their signature sound. (The name “Filter Graph” comes from the function in the actual programming language that was used to create Ozone.)
The Ozone 5 "Filter Graph" was buried in the options menu; user feedback led us to bring this feature to the forefront in Ozone 6.
One of our goals for the module icons was to create a set of visually distinctive and memorable representations for each module to further support “recognition over recall” and an immediate “at-a-glance” impression of module order within the signal chain.
“Recognition over recall” is an important principle in both psychology and interface design. Research demonstrates that seeing a distinct visual representation of the information you need (a visually distinct module block at a particular location in the Ozone 6 signal chain) is much faster than recalling that same information from memory (remembering the location and order of text-only module blocks found in the Ozone 5 “Filter Graph”).
Final design for the Ozone 6 signal chain.
As you can see, the order of the modules in the signal chain mirrors the order in which processing is applied to a track, and the interaction design for the signal chain supports quick module selection, reordering, soloing, and bypassing.
For example, a considerable amount of space within each module block is devoted to selecting a module so that its controls will be called up in the area above; clicking and dragging facilitates reordering of modules to create a signature sound. Related operations like soloing and bypassing are grouped together at the bottom of each block, and the “X” icon for removing modules is placed at the top of the block, mirroring the placement of the “close” button at the top of toolbars in other applications. Finally, net gain meters appear on the right side of the module blocks to facilitate an “at-a-glance” impression of gain staging through the modules.
The elegance of the final Ozone 6 signal chain, however, belies the extensive design work that went into crafting the module icons, workflow, and graphic elements of this important feature.
The design process for the signal chain began with a series of low-resolution, hand-drawn wireframes. These early wireframes help us explore important questions about the functionality and appearance of the Ozone modules: How should modules be removed from the chain? How should they be bypassed? Where should the module text be placed relative to the icons? How can we best represent inherently dynamic audio processes using static iconography?
We created other wireframes to explore placing the signal chain itself along the left side of the application rather than along the bottom. Through user feedback, we determined that placing the signal chain along the bottom of the application would provide a clearer “left-to-right” visual representation of the order in which the modules are affecting your audio. This placement had the added benefit of allowing us more clearly illustrate gain staging through the new “net gain meters.”
During interviews, users unanimously told us that the ability to load their own third-party plug-ins was crucial for a standalone version of Ozone. This inclusion would extend the capabilities of Ozone, making it a more powerful platform while letting users retain their favorite plug-ins in the signal chain.
Our initial hand-drawn wireframes for the signal chain were used to inform higher-fidelity mockups that also explored how these third-party plug-ins could be visually represented.
Hi-res designs used to explore third-party plug-in representations and the net gain meter concept. Did you notice that the final icon design (third from the left in the signal chain) for third-party plug-ins is a clever combination of a plug graphic and the number 3?
Next, we created higher-fidelity designs based on a refined set of distinctive icon wireframes for each of the Ozone modules. These higher-fidelity designs went through a series of iterations based on feedback.
We were almost there. We built a good deal of consensus around four or five different modules, but a few of the module icons just weren’t feeling right.
So, in our relentless pursuit for simplicity, we went back to hand-drawn prototypes for each of the modules. We removed visual clutter, distilling each module down to rough versions of the final iconic visual representations. The results are very close to the icons ultimately used in the Ozone 6 signal chain.
Overhauling the user experience was a long and labor-intensive process, but we believe the end result was well worth the effort. By listening to users early on in the design process, and incorporating their feedback throughout an iterative design process, we created a streamlined user experience that puts the most common mastering tools front and center—while adding enough flexibility and options to allow users to create their own signature sound.
We used this same comprehensive approach to reinvent every single aspect of Ozone 6.
You’ll learn more about how we applied this approach to specific modules in the next installment in this series.