Case Study: A New 'Arrange View'
Studio, the proprietary software created by A Million Ads, enables producers (internal and client-side) to create dynamic digital audio ads, personalising them for audiences based on dynamic rules such as Location, Weather, Date and Time. Studio's Arrange View, which allows users to organise the variations of an ad visually on a timeline, had several major problems;
• A cluttered user interface which was unclear, especially for new users
• Built in a way which made iterating on it difficult and time-consuming
• Numerous bugs which impacted user confidence
Design Workshop
I organised a design workshop with our Product Manager and the team of engineers who would be working on the project. The main aim of the workshop was to map out our assumptions about what the Arrange View should allow users to do, and how we might be able to improve the experience for them.
The solution
It became apparent that there was a lot to consider - including;
- How might we best visualise audio with hundreds (or even thousands) of unique variations?
- How might we make it easy for users to know which version of the ad they're hearing?
- How might we allow users to quickly gain confidence that the rules they've applied to their ad (Weather, Location, etc) are working in the way they'd expect?
- How might we enable users to easily test different combinations of Rule values (eg. Rainy, Wednesday, London)
- How might we allow users to edit individual audio blocks (eg. Volume adjustment, Trimming)
I mapped out various journeys in Sketch and prepared these for a second, more rigorous round of user testing.
The side-bar problem
Producers typically use Studio on a larger desktop screen. However, adding controls to our new Arrange View was a challenge. My original side-bar design used valuable space necessary for the main audio timeline. I also had to accommodate other global controls which we were unable to change as part of this project.
Testing our solution
I worked with the engineers to create a lightweight, clickable prototype which included enough interactivity to test the idea, without requiring a lot of time to build. We tested the prototype with five internal creative producers who were familiar with using Studio. Ideally I would have liked to have tested this with a few more users, but getting access to client-side users of Studio was difficult because they're so time-poor. Below you can see the output of one of these sessions.
Testing some of the more complicated aspects of Arrange View was challenging. I didn't want to go into too much detail designing a concept that didn't resonate with our users, but I also had to design at a believable fidelity in order to get the feedback I needed. In the end, the easiest way to do this was to mock up single screens (rather than a whole flow) detailing the more complicated functionality of a specific feature. For displaying audio variants for example, it was important that I was able to validate;
- Was a drop-down the right pattern?
- Was it clear that a user could position individual variants by dragging them?
- Would users need the ability to filter or search variants once they were exposed?
- Was capping the amount of variants shown the right approach?
Communicating complex interactions
Some of the more complicated interaction design, such as what it could look like if we introduced the ability to reposition audio tracks, required a bit more visual detail, so I created animated GIFs to communicate some of the more intricate concepts.
