Designing LEAD Horizon’s User Experience

Building trust

LEAD Horizon’s COVID self-testing kits are a unique product: while allowing users to relieve some of the restrictions the pandemic forces on them, they simultaneously demand a leap of faith regarding sensitive personal data. Thus, a clear design is essential to show users that our web app is indeed trustworthy and to ensure that it is easy to understand for all users. Together with the Viennese designer Dominik Rummerstorfer, we designed a user-friendly interface that guides users through the testing process as smoothly as possible. This blog intends to explain the elements of the user interface and how they changed during the redesign.

Requirements

A project aimed at such a broad and diverse target group must meet specific requirements regarding accessibility and usability. Despite its own rather stale representation, the Web Content Accessibility Guidelines (WCAG 3) provide the best starting point for designing barrier-free web apps. Complying with these guidelines means people with sensory (e.g., color blindness) or motor impairments can still use the website.

Communication at eye level

What veteran LEAD Horizon users of previous versions will notice first is the new style of language used. The new texts are penned by Matthias Alber, who aimed to simplify the instructions and bring communication to eye level. In particular, Alber paid special attention to the comprehensibility of texts for non-native speakers. The switch to the German informal “you” lightens up the web app’s voice without appearing too casual. At the same time, Alber ensured not to lose the Austrian idiom, a little charming and tongue-in-cheek, in the wording.

Designing clarity

All user flows were reconsidered in the last redesign and discussed, keeping the experience and feedback from the previous versions in mind. We focused on tailoring all inputs to immediate user feedback, such as error messages, help texts, or descriptions, to lower the error rate during data entry. A more distinct status bar, an easier-to-find help section, and a distinct layout provide a better structure to the process. Notably, the rinsing process has been simplified as far as possible and cleared of anything potentially distracting. Overall we improved usability with several quality of life upgrades:

Evolution of a success

Compared to the prototypes and beta tests, the web app’s design has come a long way. Here are a few before and after images.

Dotbite | Connecting the dots