Definition Health Definition Health

Author: The no-code tool for fast and flexible health questionnaire creation

Role Senior Product Designer (sole)
Team 1 x Senior Product Designer, 4 x Engineers, 1 x Senior PM
Date 2023
User ResearchPrototypingUI DesignDesign SystemsAccessibilityQA and Documentation0 to 1
Mockup showing patient mobile experience and desktop author tool side by side

Impact

task_alt

Questionnaire changes cut from weeks of engineering to minutes of clinical editor time

task_alt

Opened up new pathways like endoscopy, and hospital-specific questionnaires

task_alt

Up to 50% fewer clicks and taps for patients with no health conditions

Story

Overview

LifeBox, from Definition Health, helps patients get ready for surgery. Before an operation, patients fill in a health questionnaire, and pre-op nurses review their answers to decide whether they're fit for anaesthesia.

Before this project, the questionnaire was a single, hard-coded survey written for general surgery. Every change needed engineers, and it couldn't adapt to other pathways or to each hospital's policies.

I was the sole product designer on Author, a no-code tool that would let clinical editors build, edit and branch questionnaires themselves. I worked with a product manager, four engineers and three clinical experts, from discovery through to delivery.

The challenge

One rigid, hard-coded survey couldn't serve new pathways or local hospital policies

The questionnaire had been built for general surgery, and everything about it was fixed in code. That caused problems in three places.

  • Growth. Built for general surgery only, it kept Definition Health out of high-volume, lower-risk pathways like endoscopy. Hospitals also couldn't adapt it to their own policies.
  • Cost of change. Content was hard-coded, so adding a single question could take up to two sprints of engineering.
  • Patients. It was built on SurveyJS, a third-party form builder whose markup fell short of WCAG AA. Patients also complained about its length and relevance, and satisfaction scores reflected it.

What we already knew

Before I joined, Definition Health had built up a clear picture of the problems through patient satisfaction surveys, support contact, hospital meetings, training sessions and an NHS audit. A company-wide workshop on my first day turned that into a brief: produce many tailored questionnaires instead of one, let clinical staff edit content without engineers, rethink the navigation for mobile and accessibility, and add screening questions so patients only answer what applies to them.

A phone showing a page of the old questionnaire: a grid of breathing conditions, such as asthma and COPD, with small Yes and No radio buttons. Behind it, the LifeBox clinician platform shows the Lungs chapter, where the patient's COPD answer feeds an advisory note, a summary for the patient notes and a work plan.

The old questionnaire on a patient's phone, and the clinician platform where pre-op nurses reviewed the answers.

The solution

Mapping the system with OOUX exposed different assumptions across the team

Author had to handle a lot of connected data: question sets, pages, sections, patient questions, clinical questions and the rules between them. Before designing any screens, the product manager and I mapped it using object-oriented UX, listing every object, its attributes, its actions and how it related to the others.

Sharing the map with engineering showed we weren't all picturing the same system. I ran an alignment workshop to work through where we agreed and where we didn't. Then I studied survey builders, form builders and workflow tools for patterns we could reuse.

A diagram of linked objects, such as question set, page, section and question, each listing its attributes and actions

Part of the object map, showing how question sets, pages, sections and questions relate

Patient and clinician questions, together on one page

Each questionnaire holds questions for two audiences. Patients answer their questions first, then a pre-op nurse reviews those answers and completes clinical questions of their own. Patients shouldn't see the clinical questions, but the people building the questionnaire need to see both together to make sense of a page.

I explored three options:

  • Tabs for patient and clinician. Dropped, because switching tabs hid the context clinical users needed.
  • A side-by-side builder that matched the final clinical view. Dropped, because it needed bigger screens than the 15-inch laptops our users worked on, and more engineering time than we had.
  • One page, with each question marked as patient or clinician. Chosen. It didn't mirror the final layout, but it showed the whole page at once, and it made conditional logic easier to build later.
The editor with Patient and Clinician tabs at the top, showing only patient questions

Tabs kept patient and clinician questions apart, but hid the context clinical users needed

The editor split into two columns, patient questions on the left and clinician questions on the right

A side-by-side builder needed bigger screens than our users' laptops and came with a bigger development effort we couldn't afford

The editor showing one list of questions, each with a Patient or Clinician label

The chosen design: one page, with each question labelled patient or clinician

Conditional logic shows patients only the questions that apply

Patients, especially those with few or no health conditions, were answering far more questions than they needed to. Conditional logic would let questions appear only when an earlier answer made them relevant.

I drafted the requirements with our clinical team, then broke the logic into levels of complexity. The questionnaire the clinical team had designed for endoscopy could be built almost entirely with the simplest level, which gave us a focused first version.

I explored driving logic from "disclosures", the medical facts recorded against answers. We decided the disclosure system wasn't mature enough yet, so logic ran from questions and answers instead.

Logic-driven questions got a branch icon and a distinct highlight, since users already called the feature "branching". Once logic could span pages, I designed a Tree Browser so editors could find any question in the questionnaire without the canvas being covered.

A panel listing the questionnaire's pages and questions as an expandable tree, shown in several states

The Tree Browser, for finding any question without covering the canvas

Replacing the radio matrix made the hardest question accessible

The old questionnaire's worst input was the radio matrix: rows of conditions, each with Yes and No radios under column headings. The radios were below AA target size, and they had no labels of their own, so on a phone the headings scrolled away and patients had to remember which column meant yes.

I replaced it with a checkbox list and a "no to all" option at the bottom. That rested on a clinical decision to record only the conditions a patient has, which the clinical team judged safe. I put "no to all" last so that patients would see the full list before choosing it. In Author it's a single switch, and the front end handles the toggling. I also redesigned the radios with large click areas that meet the WCAG 2.2 AAA target size.

A phone showing a grid of health conditions, each with small Yes and No radio buttons under column headings

The old radio matrix: small targets, and column headings that scrolled away on a phone

A phone showing a list of health conditions with large checkboxes, and "No to all" as the last option

The new checkbox list, with "no to all" at the end

A question in the editor with a switch to add a "No to all" option

In Author, "no to all" is a single switch

The outcome

With Author, a questionnaire change that used to take around four weeks of engineering became a few minutes of work for a clinical editor. New questionnaires needed no engineering at all, and the clinical editors built several themselves, including endoscopy, a pathway the old survey couldn't serve.

For patients, logic and the new inputs cut the effort of answering. In our designs, patients with no health conditions needed up to 50% fewer clicks and taps, and those who triggered every mapped condition needed 30% fewer. Every input was built from our own accessible components instead of SurveyJS.

The clinical editors had started working with hospitals that were keen to see Author go live, and hospital testing was planned after positive demos. Before that could happen, Definition Health went into administration. The Author IP was bought by a larger competitor.

A phone showing a questionnaire page with a few questions and large answer options

A questionnaire built in Author, as patients would see it on their phone

Get in touch