Audyssey Laboratories MultEQ

Audio Desktop Application Redesign

UX Case Study

Overview: An innovative audio technology for home theatres, Audyssey MultEQ is an audio software that allows users to calibrate their speakers and customise their listening experience. Audyssey Laboratories’ team of engineers created a functional application, and were seeking the expertise of UX and UI designers to improve upon the existing application’s design, in order to provide a better user experience for both new and returning users. My design team and I were tasked with streamlining the user flow of the desktop software, as well as redesigning the application’s information architecture and UI.

Objective: To provide new users with guided onboarding and returning users flexible navigation and freedom of control.

Project type: Desktop application redesign

Client: Audyssey Laboratories

My Role: UX/UI Designer, working alongside a team of 3 other designers

Tools: Figma

Duration: 28th February-4th April 2021

01. The Challenge

A key challenge of this project lay in the fact that my design team and I had little to no experience with this type of audio software and didn’t have access to the hardware that would be involved in the sound calibration process that served as the backbone to the entire application.

To tackle this challenge, my team and I had to quickly familiarise ourselves with the main goals of the power users of technical audio software, as well audio terminology to create the best possible end product for Audyssey Laboratories’ users.

The redesign we spearheaded solves the following problems:

●  Understanding the use cases and scenarios in which a user will be using the application: this involves looking into each step of the process and considering users needs and pain points

●  Defining user personas and different levels of experience with audio equipment: devising solutions for novice and advanced users

●  Creating experiences for new and returning users tailored to their specific needs

●  Consolidating information architecture to better support navigation

●  Increasing discoverability across the app by making options, features and information more visible with a more consistent UI

Understanding the user and their needs

The target users for Audyssey Laboratories MultEQ software are audiophiles with various levels of experience with audio equipment and softwares.

Less experienced users (as well as new Audyssey users) need a more guided experience to discover the app’s features and create a new setup, while existing users need to review their previous setups, with the option to modify their configuration.

User pain points

●  Confusion around navigation

●  Low discoverability of content and functionalities

Technical constraints

●  Adherence to Microsoft’s Fluent Design System

●  Microsoft/Windows UI paradigm, fat client

●  Constructed the UI under the constraints of two UI libraries and frameworks Xamarin.Forms and SyncFusion.

Audyssey MultEq - Existing Application (screenshots)

02. Project Timeline

Phase 1: Heuristic evaluation, IA review, first set of wireframes

The first step was to create an identical prototype of the existing application through a series of interconnected screenshots in Figma. Next, we conducted a heuristic evaluation of the application in its current state, resulting in a list of findings based off of Nielsen’s 10 Usability Heuristics.

Lastly, the application’s information architecture was modified based on the evaluation findings, and a first round of wireframes was presented to the client. 

Deliverables

A first set of wireframes delivered in desired client form (PDF, FIgma, Invision).

Phase 2: Refinement and iteration of design deliverables

This phase included iterating upon the visual design, with a focus on tackling the most severe UI issues found in the heuristic evaluation. At this stage, each UI component was styled consistently, adhering to primary and secondary colours, pseudo-states of common components, size, shape, positioning, and the declaration of a universal font. Our team also assisted the client with the creation of graphics and screenshots to be used on the Microsoft Store page to display their application.

Deliverables

A refined design system/style guide in PDF form and a set of wireframes to be delivered back to the client for review for the final round of iteration.

03. The Objective

Our design team broke down the overarching objective for the project into several smaller actionable goals:

• Users need to be able to tell which section of the application they are currently working in, as well as whether they can freely move forward or backwards with their information being saved.

  A consistent UI style for each component needs to be defined throughout the application to differentiate between the different actions they can take within each section of the application.

• Obfuscation of information throughout the application needs to be reduced by establishing a visually clear and logical hierarchy of information.

• Language throughout the application must be consistent. Additionally, technical language and abbreviations must be kept to a minimum.

04. The Process

Heuristic Evaluation

Since the project didn’t involve user research or testing, our design team chose to carry out a heuristic evaluation in order to identify and focus on specific usability issues. We used Jakob Nielsen’s 10 Usability Heuristics as a framework for our review.

Key Findings

After conducting the review on an individual basis, we then combined our findings and assessed their severity. The team found that the key pain points were related to navigation and discoverability.

Firstly, the app’s information architecture didn’t clearly show users’ progress, leading to some confusion, especially for new users. This issue was particularly important as there was no onboarding education available for the app.

In terms of discoverability, UI inconsistencies represented a challenge - sometimes it was difficult to tell whether an element was just informational or interactive, and therefore the actions a user could take on each given page were unclear. Discoverability was also made difficult by some inconsistencies in wording - i.e. different terms being used interchangeably - as well as the use of technical language and abbreviations users may not be familiar with.

Our Solutions

Using the results from our heuristic evaluation, my team and I determined the top-level UX and UI findings to present to the client. With feedback and go-ahead from the client, the team worked to resolve identified issues on the IA and UX/UI of the product. The issues we worked through are:

• Organising and streamlining the flow users follow throughout the application.

• Implementing a progress meter and collapsible side menu bar to provide users with a consistent visual view of their progress within the application

• Increasing spacing between data graphs to make them more readable

• Adding coloured gradients to delineate frequency cut off ranges on Measure page graphs

• Defining language consistency across the entire application.

• Implementing consistency across UI components including buttons, input fields, graphs, checkboxes, and sliders

• Enhancing overall readability and accessibility with colour and fonts.

05. Success Metrics

The success criteria for this project were subject to the needs of the client. The project was successful because:

• The information architecture and UI changes successfully addressed the top level findings of our heuristic evaluation

• The client had the time and technological ability to implement newly proposed wireframes into their application

• Our design team has adhered to the proposed timeline.

06. Lessons Learnt

• The heuristic evaluation was an invaluable tool for the team to learn what the user pain points might be and was particularly helpful as the project didn’t involve user research or testing.

• Business and technological requirements and limitations have a great influence upon final design decisions.

• Deciding upon a design choice and being able to stand by it with evidence as to why you made that choice is far better than ruminating over multiple smaller choices you could have made instead.