02 / Product concept · Health

Dayward.

Dayward is a care transition product for the 30 days after someone leaves hospital. It turns discharge paperwork into one clear plan for today, and gives the care team a single list of who needs a call first. I designed it end to end: the iPhone app, the patient web portal, the care team console, the marketing site and the design system behind all four.

Role
Product designer · Research framing, UX, UI and design system
Format
Self-initiated concept · 4 surfaces and one shared design system
Methods & tools
Figma variables, components and prototyping · Figma Plugin API · WCAG contrast checks
Status
High-fidelity concept · Usability testing planned
Dayward cover: the headline Home, with a plan, a discharge card with a QR code, and two iPhone screens showing Today and a red Call your care team now screen
The cover of the Figma file. Patients, clinicians and data throughout are fictional.
01 / The problem

The plan breaks down at home.

People go home from hospital with new medicines, changed doses, stopped medicines, follow-up visits and warning signs to watch for. Almost all of it arrives on paper, on the most tiring day of their stay. The care team often has no daily signal of how someone is doing until they are back in the emergency department.

I framed the product around three people. A patient home after a heart-failure stay, who uses her phone for messages and photos. Her daughter, who wants to know things are okay without calling three times a day. And a transition nurse who follows a large panel of patients and needs to know who to call first.

What I owned

Everything on this page: the framing, the information architecture, every screen across four surfaces, the design system, the prototype links and the design rationale.

What it isn’t yet

The three people above are proto-personas, not research findings. Checking them with patients and nurses is the first step in my validation plan (section 09).

02 / Principles

Four rules before any screen.

I wrote these before designing anything, and used them to settle arguments with myself later.

Today first

The home screen answers “what do I do now?”, not “here is all your data”.

Plain language

Every medicine explains why you take it, in one sentence a tired person can read.

Escalate to a person

A warning sign leads to a named nurse, not a generic hotline.

Calm by default

Colour is held back for status, so urgency stands out on the day it matters.

03 / The phone app

One question: what do I do now?

The app is where patients spend their time, so it got the most care. Each screen has one job, and the hierarchy is built so the next action is always the most visible thing.

Five Dayward iPhone screens: onboarding with a discharge card, Today with the recovery count and next dose, Medications with changes at discharge, a daily check-in question, and the red Call your care team now screen
Onboarding, Today, Medications, a check-in question, and the red-flag screen.
  1. The recovery count

    “Day 4 of 30” is the one dark object on Today, so “how am I doing?” reads before anything else. It replaced a panel of statistics.

  2. Time leads each dose

    Time is the left column of every dose row, because time is what the patient acts on. “Take” sits on the row, so there is no extra screen to open.

  3. What changed at discharge

    Medications opens with new, changed and stopped medicines, because those changes are where mistakes happen.

  4. One question per screen

    The daily check-in shows one question at a time with a visible count, so it feels short enough to finish every day.

  5. The only red screen

    A red-flag answer leads to the only full-bleed red screen in the product. It explains why in plain words, offers one button to call a named nurse, and separates true emergencies that should go to 911.

Four more Dayward iPhone screens: Appointments with a map, My plan with an audio explanation, a message thread with the nurse, and Today in dark mode
Appointments, the plan in plain language (with listen and translate options), messaging, and Today in dark mode.
04 / Care team console

Who needs a call today?

The console is the other half of the product. Every check-in answer becomes a signal, and the nurse’s job is to act on the right ones first. I sorted the queue by severity rather than arrival time, and put the patient’s recent trend next to the flag, so the nurse can decide without opening three tabs.

Dark Dayward care team console with caseload numbers, a triage table of patients by risk, and a detail panel with a red flag, a weight trend chart and a Call button
The caseload view: headline numbers, a triage queue, and the selected patient’s flag, weight trend and contact actions.

The biggest risk here is alert fatigue. If too many check-ins raise a flag, the console becomes noise. That’s why the rules behind the flags need to be owned by clinicians, and it’s one of the first things I’d test with nurses.

05 / Web and site

Same order on every screen.

The patient web portal keeps the phone’s order: recovery, next dose, next visit. Someone moving between a phone and a family laptop finds things in the same place. The marketing site speaks to hospitals, who are the buyers, but leads with the patient’s experience.

Dayward patient web Today page with a weight warning banner, the recovery card, next dose, medicines list and care team
Patient web · Today
Top of the Dayward marketing site with a large headline and product imagery
Marketing site · top of the page
06 / How it evolved

I threw away the first version.

The first complete version was called Mendwell. It was teal and mint, with soft illustration and an icon tile on every card. It was consistent, and it worked, but it looked like every health app template. So I kept the structure and content and rebuilt the visual language from scratch.

Process board showing six stages from framing to final, and the Today screen in version 1 next to version 2 with notes on what changed
The same Today screen before and after. Same content, different hierarchy.
  1. 01 / Structure in grey

    I drew the core screens as low-fidelity wireframes. Each had to work without colour: if the hierarchy only held up with an accent, the layout was wrong. I also explored Today as a tile dashboard and rejected it, because every tile had the same weight and the next dose got lost.

  2. 02 / Version 1, then critique

    Teal read as generic. Icon tiles decorated without informing. The brand colour and the success colour were too close, and some greys failed WCAG AA contrast, a sign the palette had been chosen for mood first.

  3. 03 / Direction reset

    I looked outside healthcare, at products that feel confident because they hold back: Apple’s product pages for one idea per view, Razer for a dark canvas with one electric accent, and Coalatree for a warm editorial voice.

  4. 04 / Renaming

    A search before publishing showed “Mendwell” was already in use. I chose Dayward (day + homeward) because it describes the job, recovery at home one day at a time. A trademark check would still be needed before launch.

Grey wireframes of Today, Take a dose, Check-in, Red flag, Medications and the web dashboard, with numbered annotations, plus a rejected tile dashboard
Structure studies, with the rejected tile dashboard.
The teal Mendwell version 1 screens with six yellow critique notes
Version 1 (Mendwell) and the critique that ended it.
07 / Visual system

One accent, one job.

Black and a warm bone white carry the brand. A single electric green, which I called Vital, marks the next action and nothing else. Red, amber and green mean status and are never used as decoration, so a warning can’t be mistaken for branding.

Ink #0B0B0C

Text, the recovery card and primary buttons.

Bone #F5F4F0

The canvas. Warmer than white, so long reading feels calmer.

Vital #D4FF3A

The next action and today’s date only. Always paired with ink text, never used as text on white.

Critical #C8221A

Red flags and nothing else.

The type pairs Inter Tight, for interface text and large numbers, with Instrument Serif italic for a few human moments, such as greetings and the red-flag headline. Using the serif sparingly is what keeps it effective. Corners follow a five-step scale (12, 22, 28, 38 and a full capsule) with continuous smoothing.

Dayward foundations board showing colour tokens, type scale and corner radii
Part of the foundations page. Every colour is a variable with light and dark modes, and every component is built from them.
08 / Accessibility

AA or it doesn’t ship.

I calculated the contrast of every text and background pair. When a tertiary grey or a status colour failed, I darkened it until it passed rather than keeping the shade I liked.

Pair Contrast Use
Ink on bone 17.9 : 1 Body text and headings
Secondary grey on bone 6.5 : 1 Supporting text
Tertiary grey on white 5.3 : 1 Captions and metadata
Ink on Vital 17.0 : 1 Primary action buttons
Critical red on white 4.8 : 1 Status labels
White on critical red 5.7 : 1 The red-flag screen
Vital on white 1.2 : 1 Never used for text. This is why Vital is always a fill.

Beyond contrast, the check-in asks one question at a time with large answer rows, and the red-flag screen never relies on colour alone: it says what’s wrong in words. Dynamic Type, VoiceOver and reduced motion still need checking on real devices.

09 / How I’d validate it

What would prove it works.

Dayward hasn’t been tested with patients or clinicians yet. If it were a real product, success would show up as fewer 30-day readmissions, more doses logged on time, a shorter time from a red-flag answer to a nurse’s call, and more follow-up visits kept. Here’s how I’d get there.

  1. 01 / Usability test the core flows

    Five to eight recently discharged patients, including older adults and a caregiver: log a dose, report a symptom that should trigger a red flag, and find out who to call.

  2. 02 / Interview transition nurses

    Check the proto-personas and the console’s triage order before anything is built, and ask how many alerts a day is too many.

  3. 03 / Give clinicians the red-flag rules

    Symptom thresholds are clinical decisions, not design ones. I’d test the red-flag wording separately, for urgency without panic.

  4. 04 / Test on real devices

    Largest Dynamic Type, VoiceOver and reduced motion, on real phones.

10 / Reflection

What I took from it.

The hardest decision wasn’t a screen. It was throwing away a finished, working first version because it looked like everything else, and keeping only the thinking underneath it.