Skip to content
Robin Koch
DE/EN
← All work

Case study 02Healthcare

Diagnostic interface for clinicians

Patient data and exam results structured so clinicians find what they need, fast.

Client
Medtech startup
Timeline
2023–2024
Role
UI/UX designer
Platform
Medical application
Tools
Sketch, Figma

01 Challenge

During examinations, medical staff need fast, reliable access to patient data and results. A lot of complex information – which has to be clear, legible and reachable without detours.

02 Insights

  1. Insight 01

    Clinicians compare more than they search

    A finding often only makes sense in comparison – with reference values or the previous exam.

  2. Insight 02

    Mix-ups must be impossible

    Where related measurements sit side by side, any doubt about what belongs where is a risk.

  3. Insight 03

    Attention belongs to the patient

    Feedback rounds showed: every unnecessary element distracts. People wanted calm, not more features.

03 Decisions

  1. 1

    Fixed positions for related values

    Comparable measurements always sit in the same place, clearly labelled and colour-coded.

    ← From insight 02
  2. 2

    Comparison as the default view

    Results appear right next to the previous finding; changes are highlighted rather than hidden.

    ← From insight 01
  3. 3

    Colour only for findings

    A calm, neutral interface. Colour is reserved for findings – and a custom icon set makes exam types recognisable at a glance.

    ← From insight 03

04 User flow

Documenting an exam

  1. 01Find patient
  2. 02Open record
  3. 03Enter results
    ◇ Previous finding?Compare side by side ↩
  4. 04Flag finding
  5. 05Save

05 Wireframes

Patient list960 × 640
Patients33
3Calm list, colour only for findings
Findings A | B960 × 640
MEASUREMENT AMEASUREMENT B13
13Related measurements always in a fixed position
History960 × 640
History · measurementTODAYPREVIOUS21
21Current value right next to the previous finding

↔ Drag to scroll

Simplified, generalised representation – no original screens, data or client content.

06 Design system

Simplified, generalised representation – no original screens, data or client content.

Colours

  • petrol-900#0F3B39Navigation, primary action
  • mint-300#7FE3C8Focus, selection
  • surface-50#F4FAF8Surfaces
  • ink-900#10201FText
  • finding-check#C98A00Follow-up advised
  • finding-alert#C8372DAbnormal finding

Typography

  • Display · 30/36 · 700Findings
  • Title · 22/28 · 600Measurement
  • Body · 17/26 · 400Last exam 6 months ago
  • Data · 15/20 · 50016.0 · 14.0

Spacing

  • 4
  • 8
  • 16
  • 24
  • 32
  • 48

Radius

16px

Components

Measurement AMeasurement B
Save finding

MEASUREMENT · B

21Follow-up

Previous: 17 · +4

Larger base size (17 px) and WCAG AA contrast for everyday clinical use.

07 Approach

  1. 1

    Organising information

    Structured complex data so access stays fast and easy to understand.

  2. 2

    Flows for clinicians

    User-friendly flows shaped around the daily work of medical professionals.

  3. 3

    Legibility & accessibility

    Contrast, typography and hierarchy designed with accessibility and legibility in mind.

  4. 4

    Testing with users

    Ran and evaluated feedback rounds with medical users – from wireframe to prototype.

08 Deliverables

  • Wireframes, mockups & prototypes
  • Interfaces for patient data and results
  • Icons and UI elements for medical use cases
  • Evaluated feedback rounds

Happy to show more in person.

I don't share this client's name or original screens publicly. In a call I'll gladly walk you through designs, prototypes and decisions.

Book a call →

Next project — 03

Leisure and voucher app with community