Ad Auris
DATE
February 2022 – March 2022
UX/UI Design
User Interviews
Prototyping
Product Style Guide
SERVICES
During my time with Ad Auris, I assisted in the design and launch of their re-designed audio widget. Being on its first design iteration, the widget had minimal functionality and was difficult to interact with on mobile. The goal with the redesign was to create a more user friendly version of the widget, and to receive a higher number of clicks and longer engagement time with the product.
User Interviews
With the user testing, our goal was to obtain feedback in regards to preferred iconography, icon colours and functionality. I was tasked to create the initial set of questions that were to be asked during the interviews, always framed around the goal of the re-design in mind. I formulated questions such as:
“How do you usually share narrations? How do you usually share podcasts?”
"What do you think each icon does on the audio player?"
"Which design do you prefer? Why?"
Two different audio widget designs that were included in the user feedback sessions
Interactive Prototypes
A portion of the user feedback sessions was an interactive prototype I created in Figma. This prototype allowed the users to interact with the product within our interview sessions. We asked them to do tasks such as finding the save icon, speed up the narration and share the narration. The example below was for the mobile version of the audio widget.
Consolidating Feedback
Once we had gone through several rounds of user interview sessions, I was tasked to consolidate the feedback so we could implement the most feasible changes into the re-design. By analyzing the collected data, we had realized that some of our first chosen iconography was not recognizable to the end user, and most preferred different styles than what we had to begin with. For example:
6/7 users preferred the Bookmark icon for saving
5/7 were confused about the subscribe icon being a playlist
4/7 users preferred the solid play/pause button because it stood out more
Some iconography we used in our user testing sessions.
Style Guide
Once I finished refining the audio widget wireframes based on the feedback, I started on the style guide for the development team. I focused on making the style guide as detailed as possible, adding everything from margins and padding on the product, what the different states of the icons would look like and the width and height of all of the icons.
Final Solution
Once the style guide was complete, we reviewed it in detail with the development team. Over the span of two weeks, the product came to life and was soon launched and replaced the previous design. The audio widget can be found on over 80 different publications worldwide.