Message row
One row component handling routine, urgent, system and acknowledgement variants, with delivery state expressed by shape and icon as well as colour.
- row/routine
- row/urgent
- state/queued
- state/failed
Mobile UIHalo Health
Care team messaging built for a twelve-hour shift
Clinicians were using a consumer chat app because the compliant one took too long to say something urgent.
- Product UI
- Accessibility
- Design system
- Client
- Halo Health
- Discipline
- Mobile UI
- Engagement
- UI/UX design and design system
- Platforms
- iOS, Android and tablet
- Duration
- 14 weeks
- Delivered
- 2023
01The problem
What we walked into
Halo Health builds secure messaging for hospital care teams. The compliance was excellent. The interface required nine taps to send an urgent message to an on-call cardiologist, and clinicians on a busy ward do not have nine taps.
So they used something else. Shadow group chats on a consumer app had become the real communication layer on three of the five wards we observed, which put the hospital in exactly the position the product existed to prevent.
The interface also assumed a calm, two-handed, well-lit user. Real use was one hand, gloves on, corridor lighting, and a phone that had been in a pocket for four hours.
02Goals
What the work had to achieve
Agreed in the first fortnight, written down, and used to settle every argument afterwards.
- G01
Urgent in three taps
The escalation path is the product. If it is slower than the unsafe alternative, nothing else in the app matters.
- G02
Legible in a corridor at 3am
Larger base type, higher contrast, and a layout that survives dynamic type at 200 percent without truncating clinical detail.
- G03
Never lose a message
Hospital wifi drops. Queued, sending, delivered and failed states must be unmistakable at a glance, including when the phone has been locked.
- G04
One system, three form factors
Phone for the ward, tablet at the nurses station, and the same components in both without a separate library.
03UI approach
The decisions that shaped the interface
Four moves that did most of the work. Everything else on the project followed from them.
- 01
Role-first recipient picking
Clinicians think in roles, not names. Picking on-call cardiology now resolves to whoever is actually on shift, which removed the directory search that was eating five of the nine taps.
- 02
Priority as a structural choice
Routine and urgent are two visually distinct message compositions, chosen before typing rather than flagged afterwards. Urgent messages carry a persistent acknowledgement state visible to the whole team.
- 03
Delivery states you can read without stopping
Four states with distinct shapes as well as colour, plus a queued banner that persists across app launches so nothing silently fails while a phone sits in a pocket.
- 04
A shared component set across form factors
We built the message list, composer and recipient picker as responsive components rather than device-specific screens, so the tablet at the nurses station runs the same code as the phone on the ward.
04Components and design system
What got built underneath
The reusable parts, and the tokens they were built from. This is the layer that keeps the interface consistent after we leave.
Role picker
A searchable role list that resolves to the current on-shift clinician, with a shift-boundary warning when the rota is about to change.
- picker/surface
- picker/row-h
- text/role-label
Clinical type scale
A five-step scale with a 17px base, tested at 200 percent dynamic type against the longest real drug names in the formulary.
- text/clinical-xs
- text/clinical-base
- text/clinical-lg
05Outcomes
What changed after release
Measured by the client, on their own reporting, over the period noted against each figure.
- To send an urgent message
- 3 tapsTo send an urgent messageDown from nine, measured on the on-call escalation path.
- Wards off shadow chat apps
- 5 / 5Wards off shadow chat appsConfirmed by observation four months after rollout.
- Dynamic type supported
- 200%Dynamic type supportedWithout truncation on any clinical field.
- Component library across phone and tablet
- 1Component library across phone and tabletPreviously two, maintained separately and already diverging.
The nine taps were never a technical constraint. Each one had been added by a different compliance review, and no one had ever counted them together.
06Gallery
Screens and system, laid out
Layout diagrams of the interface as delivered, with a note on what each one is doing.
- 01 / 04
Urgent composition
Priority chosen before typing, with the on-call role resolved to the clinician actually on shift.
Interface layout diagram from the Halo Health project.
- 02 / 04
Ward message list
Routine and urgent rows distinguished by structure, not just colour, with acknowledgement visible to the team.
Interface layout diagram from the Halo Health project.
- 03 / 04
Delivery states
Queued, sending, delivered and failed, each with a distinct shape for glanceable reading.
Interface layout diagram from the Halo Health project.
- 04 / 04
Nurses station view
The same components at tablet width, running a single shared library.
Interface layout diagram from the Halo Health project.
07Take it with you
The one-page version
Everything above, condensed to plain text. Copy it into a brief, or download it to circulate internally.
Case study summary
Plain text, ready to paste into a brief or a board pack. Saves as baseline-studio-halo-health-shift-summary.txt.
BASELINE STUDIO / CASE STUDY SUMMARY
================================================================
Client: Halo Health
Project: Care team messaging built for a twelve-hour shift
Discipline: Mobile UI
Engagement: UI/UX design and design system
Platforms: iOS, Android and tablet
Duration: 14 weeks
Year: 2023
OVERVIEW
================================================================
Halo Health provides compliant messaging for hospital care teams. Sending an urgent message took nine taps, so clinicians on three of five observed wards had moved their real communication to a consumer chat app.
We rebuilt the escalation path around role-first recipient picking that resolves to the on-shift clinician, made priority a structural choice made before typing, drew four unmistakable delivery states using shape as well as colour, and unified phone and tablet onto one responsive component set.
Delivered across 14 weeks: 41 screens across phone and tablet, a clinical type scale tested at 200 percent dynamic type, a shared component library replacing two diverging ones, and full keyboard and screen reader specifications.
Results: urgent messages now send in three taps, all five observed wards returned to the compliant product within four months, dynamic type supported to 200 percent without truncation, and two component libraries consolidated into one.
OUTCOMES
================================================================
3 taps To send an urgent message
Down from nine, measured on the on-call escalation path.
5 / 5 Wards off shadow chat apps
Confirmed by observation four months after rollout.
200% Dynamic type supported
Without truncation on any clinical field.
1 Component library across phone and tablet
Previously two, maintained separately and already diverging.
CONTACT
================================================================
Baseline Studio
studio@baseline.design
+1 (415) 555 0142
Figures describe a specific product, team and period, and are
published to explain the work rather than to predict a result.05Start a project
Working on something similar?
Tell us where your product is getting stuck. We will tell you honestly whether this is the kind of problem we are good at, and what we think it would take.
- Prefer email
- studio@baseline.design
- Current availability
- Taking on two engagements for the coming quarter.
- Typical reply time
- Two working days, from a partner rather than a form.
