Model Hospital is a digital improvement service for all NHS provider trusts, a responsive web app combining data visualisation and dashboards with networking functionalities, enabling collaboration amongst NHS staff towards better services.

The Challenge

When I joined Model Hospital, it had been around for 3 years and was in need of a refresh and systematisation of the UX/UI/Development process to establish a solid and versatile foundation from which to carry on its evolution. The existing UI had grown somewhat organically and displayed inconsistencies. It had become difficult to manage and scale. Other challenges involved improving the accessibility and usability of the app throughout devices.

Approach

The first step was to identify problem areas within the existing interface and devising a methodology to fix existing work while continuing the evolution of the product. This was achieved by establishing a streamlined, component-based design system which mimicked as much as possible the React library used in development. In this way, existing React components were updated whenever they were used by new sections and functionalities of the app. This meant that no extra time had to be devoted to refactoring.

Solutions

Design System

A rule-based design system was created. It strived to be as streamlined and versatile as possible while addressing accessibility. It acted as a central point of reference for developers, stakeholders and the UX team. It comprised of a document outlining patterns and best practices together with a Zeplin repository for handover and a Sketch symbol library.

User Interface

The UI solution was a component-based architecture ready to evolve incorporating ongoing research and testing. The UI style was predominantly flat incorporating subtle shadows to enhance the user experience. A concise visual language was carefully crafted to deliver an uncluttered, efficient and versatile framework from which to grow.

Mid to high fidelity prototyping created with a range of tools was used to devise and test interactions.

Data Visualisation

Data visualisation was an integral part of Model Hospital. The solutions had to be as usable and accessible as possible, which meant providing a variety of viewing methods including tabular data to address screen readers. All charts were devised to be responsive and strived to be as functional as possible right down to the smallest breakpoint.

Iconography

Model Hospital utilised 2 sets of icons. A full-colour one to represent each of the 89 compartments and a monochromatic suite of 103 elements for interface usage. All icons were implemented as SVG due to its resolution independent nature.