Setting new GUI standards for pro electronics

MSolutions has created an innovative device that is used by audio-visual engineers to test the performance of complex installations. Despite the wide range of functionality offered by the device, most of it remained unused due to a poor user experience. The company had tried to improve the usability a few times, even working with other designers, but it had failed.

The company engaged our UX design agency to help them redefine the usability of the device and to reshape the GUI into a design that demonstrate the performance of the engineering.

OUR CONTRIBUTIONS

UX Design

UX Flow

Prototyping

Concept Design

Product Design

Interaction Design

UI Design - Design System

Quality Assurance

A TOUCH DISPLAY THAT IMPEDES USABILITY

Technicians diagnose problems and optimise the functioning of the audio-visual equipment. The device can measure complex installations with multiple monitors, screens and signal sources.

However, the device also comes with the hardware limitations of a display that with limited touch interactivity and a tiny screen size of only 480x320 pixels.

A METICULOUS AND PREDICTABLE PROCESS

To deliver on the promise of a game changing user experience, we went about a systematic process of product design. Starting with requirements gathering, we organised insights from all stakeholders.

We assessed existing data about the users and then we created sets of priorities, grouping goals into releases. This detailed and meticulous game plan was the precondition for a focused user experience design phase.

WHY THEIR PREVIOUS DESIGN ATTEMPTS FAILED

The display has its technical limitations, but the previous attempts of the company at realising an intuitive GUI design failed for other reasons. We performed a detailed usability audit and mapped a set of desired outcomes for every screen.

The essence of why they had failed previously, was because the initial GUI design was created by engineers who laid out the functionality as it is in the backend, not how a users might expect it to work. In their second attempt to improve the usability of the device, the designer simply made an attempt to improve the UI. This was doomed to fail, because a user interface design can never be aesthetic, when the underlying UX thinking is flawed.

Design by developers

Design by previous designer

Excerpts from the Design Audit

THE CONCEPT OF THE NEW USER EXPERIENCE

The design thinking was guided by user needs and what represents a logical flow for technicians in their daily practice. As a result, users don’t have to think much, because in every step the focus is on the next logical thing a technical may want to do.

At a screen level, the guidance is translated into a clear visual hierarchy so that the overall logic of the flow is continued at the micro level. The new user experience design is a reflection of the users priorities, not the backend.

Examples of wireframes

TESTING AND ITERATIONS IMPROVE THE UX

The new user experience was very different from the previous usability paradigm. Despite the fact that it came out of a meticulous process of documentation of user needs, getting at least a basic level of validation from users was critical. In total, user testing and the design adjustments took only two days.

We created prototypes and organised a few user testing sessions. The users were able to provide an abundance of feedback. It did not lead to a change in the fundamental logic of the user experience, but it did spur small changes that would ultimately take the user interface to a superior level of quality.

THE VISUAL GUI DEMONSTRATES PERFORMANCE

The visual GUI design was an opportunity to bring to life the smart thinking of both the engineers and the UX designers. It is minimalistic with a sober touch, but combined with the superior finish of the physical device, it does look like a high performance tool for professionals.

Going beyond the aspect of branding and the goal to inspire confidence, the GUI design is also compliant from the standpoint of accessibility and it provides all the states needed to make development easy.

COMPLETE RESPONSIVE GUI DESIGN IN 6 WEEKS

The delivery of the project took 6 weeks in total, from the start of initial usability audit to the delivery of the GUI design to the engineering team. The end result is a user interface where technicians have to do only half the amount of work to get the results they need.

The streamlined interaction process created opportunities to simplify the code stack. The GUI design is responsive, so that technicians can control the device from a laptop or mobile phone, either on site, or remotely. This opens up a world of possibilities.

The end result for the company is a product where the quality of the engineering is made clear by the look and feel of the device. In addition, technicians require less training so that large customers can roll out the solution more easily.