skip to content

A patient portal's cheerful cartoon illustrations have spread onto error screens and serious diagnosis results; what illustration and imagery rules would you set in the design system?

level: seniorimportance: should knowfreq 24%

answer

  1. placement by emotional context
  2. not by how empty a screen looks
  3. one style spec, curated library
  4. informative or decorative, per asset
  5. no text baked into images

basics

~20 s

Set placement rules by emotional context - imagery in onboarding, empty states and marketing, never beside results or errors - plus one style spec, inclusive and accurate subjects, no information baked into images, and each asset marked informative or decorative.

solid answer

~50 s

The problem is placement, not the style: illustrations designed for delight spread to every screen that looked empty, and beside bad news they read as indifference. I would publish a placement table by moment - full imagery on marketing and welcome, one small illustration in empty states and onboarding, none on errors, results or clinical warnings. Then content rules: people and actions rather than symptoms or anatomy, photography of real facilities, clinical accuracy reviewed. A style spec - line weight, a muted palette subset, perspective, proportions - so contributors match. Representation across ages, skin tones, bodies and disabilities. Accessibility: each asset classed as informative, with a text alternative, or decorative and ignorable by assistive technology; no instructions baked into images of text; no flashing animation. Finally I would make wrong placement hard: curated library, and components that only offer an illustration slot where one belongs.

go deeper

for a junior

Know that illustrations belong in welcome, onboarding and empty states, not beside serious results or errors, and that every image is either informative with a text alternative or decorative.

for a middle

Explain placement by emotional context, why a single style spec and curated library keep imagery consistent, and why information never lives inside an image of text.

for a senior

Diagnose imagery that has spread to the wrong moments, run the audit, and make the rules stick through tagged assets, component slots and review with clinical input.

for a principal

Weigh the cost of a curated imagery library and its review process against the brand and trust risk of teams sourcing their own imagery.

## What went wrong A cheerful illustration style was designed for delight - welcome screens, empty states, a first booking. Without rules on **where** it may appear, it spread to every screen that looked empty, including error pages and a message delivering a serious diagnosis. Next to bad news, a smiling character reads as indifference, and it quietly undermines trust in the whole product. Patients rarely complain about an illustration directly; they report that the portal feels careless, which is harder to trace back to its cause. The fix is not a new style; it is a set of **imagery rules** the design system owns, covering placement, content, style, representation and accessibility. ## Placement rules by surface and moment | Moment | Imagery allowed | Why | |---|---|---| | Marketing and first-run welcome | Full illustration or photography | The job is impression and orientation | | Empty states and onboarding steps | One small illustration | It explains what will appear and invites a first action | | Routine success, such as a booked appointment | Optional small accent | Confirms without celebrating | | Errors and failed payments | None, or a neutral icon | The user needs the fix, not a mood | | Results, diagnoses, clinical warnings | None | Any mood the image carries may be the wrong one | The rule to publish is placement by **emotional context**, not by how empty a screen looks. An empty-looking results screen is still a results screen. ## Content and style rules - **Subject matter.** Illustrate people, places and actions, not symptoms, procedures or anatomy that can alarm. Photography shows real facilities and consenting staff rather than generic stock imagery. - **One style spec.** Line weight, a restricted subset of the brand palette, perspective, level of detail and character proportions, so any illustrator's work sits together. - **Muted color.** Illustrations draw on a muted palette subset so they never introduce hues that look like status or warnings. - **Clinical accuracy.** Anything clinical that is depicted is reviewed by a clinician; an inaccurate drawing on a health product costs credibility. ## Representation Patients span ages, body types, skin tones, disabilities, genders and family shapes. Imagery rules should require that the people depicted across the library reflect that range, avoid stereotypes - the older patient always confused, the doctor always a man - and show assistive devices as ordinary parts of life. A small curated set built to these rules serves better than an open-ended stock search by each team. ## Accessibility rules that apply to imagery Several WCAG 2.2 success criteria bear directly on imagery: - **1.1.1 Non-text Content (Level A):** an informative image needs a text alternative that serves the same purpose; purely decorative content must be implemented so assistive technology can ignore it. The rule the system writes is a classification: every asset is marked informative or decorative. - **1.4.5 Images of Text (Level AA):** if the technology can present the text visually, information is conveyed with real text rather than images of text. Logotypes are treated as essential and are the familiar exception. So instructions never live inside an illustration. - **1.4.1 Use of Color (Level A):** an illustration that carries meaning must not rely on color as the only visual means of conveying it. - **2.3.1 Three Flashes or Below Threshold (Level A):** animated illustrations must not flash more than three times in any one-second period unless the flash is below the defined thresholds. Animated illustrations should also respect the operating system's reduced-motion setting, a rule the motion guidance owns in detail. ## Making the rules stick 1. **Audit** every current placement against the table and remove imagery from results, errors and warnings first. 2. **Curate** an approved library, each asset tagged with its allowed moments and its informative or decorative status. 3. **Build placement into components**: the empty-state component offers an illustration slot; the error and result components do not. 4. **Provide a request path** for new imagery so teams do not source their own. 5. **Review** imagery in the same design review as layout, with a clinician or patient-experience lead present for sensitive flows. Rules built into components outlast rules in a slide deck, because the wrong placement is simply not available to the team building the screen.

  • How do you decide whether an illustration in an empty state is informative or decorative?
    Ask whether a user who cannot see it would miss anything needed. If the image only sets a mood and the text already says 'no appointments yet, book your first visit', it is decorative and should be ignorable by assistive technology. If it shows something the text does not - which card to scan, where a code is printed - it is informative and needs an equivalent text alternative.
  • A campaign team wants a hero photo with the headline and key dates set inside the image; what do you tell them?
    Put the headline and dates in real text over or beside the photo. Under WCAG 2.2 1.4.5 Images of Text (Level AA), text is used instead of images of text when the technology can present it, with logotypes as the exception. Real text also scales with the user's settings, translates and stays searchable, which baked-in text does not.
  • Why build placement rules into components rather than only documenting them?
    Documentation depends on every team reading and remembering it; a component that offers an illustration slot only where imagery belongs makes the wrong placement unavailable. The empty-state component accepts an illustration, the result and error components do not, so the rule holds even for a team that never opened the guidelines.

saying these in an interview costs you the question

  • One illustration style can go anywhere, because tone is carried by the copy alone.
  • Every image needs a detailed text alternative, even a purely decorative one.
  • Putting key instructions inside an illustration is fine if it looks nicer.
  • Generic stock photos of smiling clinicians make any screen feel trustworthy.
  • Imagery rules are purely aesthetic and need no accessibility review.