About this project

Our AOI (Areas of Interest) Editor is a heavily used tool which allows our internal and external users to draw and select specific areas on images and videos. The previous design was implemented by the OG engineers solely with functionality in mind - but it was time for a refresh with a user focused approach.

 

The problem

There were a lot of usability issues and tickets reported by our internal and external users. So many that we had to create an entirely new Trello board to manage them! The challenge was redesigning a complex tool to address multiple usability issues - most revolving around a more intuitive way of drawing and managing AOIs.

 
sticky_4.jpg
 
sticky_5.jpg

Research & Interviews

I had previously sent out a customer satisfaction survey where customers rated the AOI editor an average of 1.2 out of 5. Ouch!

From interviews and surveys, I was able to grasp the levels of frustration and how to prioritize improvements. Also, their competency level with tools such as Photoshop, Instagram, and Paint.

sticky_6.jpg

Ideating & Sketching

There were many ways to approach the problem. I tried to think of ways in which we could reuse elements, use different icons, reorganize the layout, even trying to make the preset AOIs more useful.

The ideas were bounced back and forth with our customer success team and developers. I wanted to make sure key usability issues would be addressed and that there would be no technical limitations.

Prototyping & Testing

High fidelity mocks were made in Sketch and a clickable prototype created in Invision.

Guerilla tests were later held to observe the reactions to the interface. Was it intimidating? A bit at first - but after taking a moment things began to look familiar. Could all the tools be easily identified? Yes!

To test the actual drawing tool, we had testers draw hotspots using Invision - the UI we were planning to adapt from.

 

The final design

The solution we moved forward with utilized the full screen - allowing us to dedicated a space to easily navigate through all tools and manage AOIs.

sticky_8.jpg
 

Main takeaways

Even though we ended up redesigning the entire AOI editor, it was important to try to work off the solution we had. It was more work, but in the end I was able to provide solid reasoning for our engineers to feel comfortable with the extra development time. I was also challenged with performing multiple rounds of guerilla testing and can now confidently perform these crucial tests.