Anastasia Kuratnik ← TO THE MAP RU
02PRODUCT · «ELECTRON»

The radiographer’s interface

Radiographers use this interface to take X-ray images. The previous version was badly overloaded: every new feature had been bolted on top of the old one without rethinking the flow. Because of that, medical staff had to work through a multi-page manual before they could start.

Built on the design system from case 01. Design system for X-ray equipment →

ROLE
UX research, CJM, design system, redesign
DURATION
1 year 5 months
TEAM
Me, a second UX/UI designer, three developers
PLATFORM
Desktop
NDA THE LOGO AND PATIENT DATA ARE COVERED. EVERYTHING ELSE IS SHOWN AS IT IS.

01How I worked it out

I ran interviews in hospitals and watched the staff work on site. I looked for where people stumbled, which features they never used, and which ones they did not even know existed. Separately I collected the positive feedback — what worked and what a redesign must not break.

  1. 01Interviews with hospital staff
  2. 02Observing real work on site
  3. 03A/B testing of the solutions
  4. 04Customer journey map (CJM)

02What came out of it

Part of the functionality went unused not because nobody needed it, but because nobody knew about it: it existed only inside the multi-page manual. The interface offered no onboarding, was hard to make sense of, and was visually overloaded on top of that.

  1. 01Features people did not know existed
  2. 02Points where the work stalls
  3. 03Features deliberately left unused

The study journal

The new journal: the panel split into labelled groups, study statuses, image previews The old journal: two dozen unlabelled icons, a form of fifteen empty fields, a table with no statuses BEFORE AFTER
  • The toolbar is split into labelled groups, and the flow now reads
  • The patient card got shorter and the table easier to scan
  • Image previews appeared, along with the accumulated annual radiation dose

03The redesign

Together with the second designer we put together a new version of the screens: stripped away the layers of old and new flows, gave the useful features their visibility back, and removed what was only taking up space. We got the first screens approved by the stakeholder and worked through the rest from there.

The medical disc burning window over an image viewer
Burning a study to disc: the medium, the record name, the choice of images

The imaging parameters screen

The new screen: four labelled panels, a patient card, a positioning illustration The old screen: a dense grid of teal elements on black, with no section headings BEFORE AFTER
  • The screen is split into four labelled panels
  • A positioning illustration with a comment appeared
  • Imaging parameters can be read at a glance
  • The high-voltage button is highlighted and labelled

04The link to the system

It was this redesign that made it obvious the screens would drift apart again without a shared library. The UI kit grew out of these screens and later became a design system — that is a separate case, 01. The radiographer interface is already assembled on it.

An X-ray image viewer with a tool panel and a strip of previews
Viewing an image: measurement tools on the left, dose and parameters under the picture
The info panel window showing system status and a table of recent actions
The info panel: system status, tube usage, last service date
RESULT

Redesign on our own system

The interface became better looking and more modern, and after A/B testing I confirmed that people understand it better than the old version.