Audyssey Laboratories MultEQ
Desktop Application Redesign
Overview
Audyssey MultEQ is an innovative audio technology for home theatres that allows users to calibrate their speakers and customise their listening experience. The Audyssey Laboratories’ team of engineers were seeking the expertise of UX and UI designers to improve upon the existing application 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.
Goal
Provide new users with guided onboarding and returning users flexible navigation and freedom of control.
Project Type
Desktop Application Redesign
Client
Audyssey Laboratories
Tools
Figma
My Role
UX/UI Designer, with a team of 3 other designers
Duration
February 2021 - April 2021
%20(Mockuuups%20Studio).jpg)
The Objective
● 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.
● Clarify the visually complex graphing systems using logical hierarchy of information.
● Language throughout the application must be consistent. Additionally, technical language and abbreviations must be kept to a minimum.
The Process
Evaluate
Iterate
Prototype
Present
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.
Nielsen's 10 Usability Heuristics
Image from digitalsales.ie
 |
|---|
Heuristic evaluation (an excerpt)
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.
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:
● Organize and streamlining the user flow throughout the application.
● Implement a progress meter and collapsible side menu bar to provide users with a consistent visual view of their progress within the application
● Increase spacing between data graphs to make them more readable
● Adding coloured gradients to delineate frequency cut off ranges on Measure page graphs
● Define 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.
Evaluate
Before the redesign (screen captures)
Initial Challenges
1. Our design team had little to no experience with this type of audio software.
2. No access to the hardware itself.
3. Not able to use the program to perform the sound calibration process, which is the backbone to the entire application.
To tackle these challenges, my team and I had to quickly familiarize 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 approach
● Understand the particular scenarios that users will be using Audyssey MultiEQ: looking at each step of the process and considering users' needs and pain points.
● Define user base and their different levels of experience with audio equipment: devising solutions for novice and advanced users.
● Create experiences for new and returning users tailored to their specific needs.
● Consolidate information architecture to better support navigation.
● Increase 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
● UI under the constraints of two UI libraries and frameworks Xamarin.Forms and SyncFusion.
Project Timeline - 2 Phases
Phase 1: Heuristic evaluation, information architecture review, first 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.
Based on the analysis of this set of findings, decisions were made to modify the application’s information architecture. A first round of wireframes were then designed and presented to the client.
First phase wireframe deliverables (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.
A refined design system/style guide and a revised set of wireframes were delivered back to the client for review for the final round of iteration.
Second phase deliverables
Success Metrics
The success criteria for this project was 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.
Before & After
Lessons Learned
● 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.