skip to content

Visual Identity in UI

Brand attributes such as confident or playful become concrete choices in color, type, shape and imagery, with more restraint on task screens than on marketing pages. Asked to test product judgement.

part ofDesign systems & UX foundationsoverview, primer and where to startread it →
on this pageshow

questions

4

In a hospital patient portal, why should the lab-results screen carry less brand expression than the public marketing homepage?

level: juniorimportance: should knowfreq 30%

answer

  1. two surfaces, two jobs
  2. impression versus completion
  3. color gets read as meaning
  4. restraint is not removal
  5. an expression dial by surface

basics

~20 s

Marketing pages exist to make an impression; task screens exist to get a job done. On a results screen, flourishes compete with the content and brand color can be misread as meaning, so the brand shows through a few consistent touches.

solid answer

~40 s

The two surfaces have different jobs. The homepage persuades someone on an occasional visit, so large imagery, display type and brand color fields help. The results screen is read repeatedly, often by an anxious patient, and every element either helps them understand or gets in the way. Decoration competes for attention, a cheerful illustration can clash with bad news, and brand color gets read as meaning - a brand red on headings looks like an abnormal result. Restraint is not removal, though: the brand survives through consistent type, brand color on a few fixed roles such as the primary action, the shape language, and above all predictable quality. Many systems name expression levels by surface - expressive, moderate, restrained - so the choice is a rule rather than taste.

go deeper

for a junior

Remember that marketing surfaces aim to impress and task surfaces aim to get a job done, so task screens use fewer brand flourishes while keeping consistent brand cues.

for a middle

Explain why decoration costs more on task screens - attention, color misread as meaning, emotional context, fatigue - and which fixed roles keep the brand present.

for a senior

Show how you would define expression levels by surface and review for drift, such as brand color creeping into status roles or hero imagery reaching results screens.

for a principal

Weigh how a marketing refresh should propagate into the product, balancing brand momentum against the familiarity that repeat patients depend on.

## Two surfaces, two jobs A product usually has two kinds of surface. **Marketing surfaces** - a public homepage, a campaign page, an app marketplace listing - exist to create an impression, explain value and persuade someone to start. **Task surfaces** - signed-in screens where people read results, book appointments or pay bills - exist to get a job done, often repeatedly and under pressure. | | Marketing surface | Task surface | |---|---|---| | Main goal | Impression, differentiation, persuasion | Completion, accuracy, confidence | | Visit pattern | Occasional, often a first visit | Repeated, often weekly | | Reader's state | Curious, browsing | Focused, sometimes anxious | | Brand expression | High: large imagery, display type, color fields | Restrained: a few consistent touches | In a hospital patient portal the gap is wide. The public page introducing the portal can use large photography of the hospital, a bold headline in the brand's display type and generous brand color. The lab-results screen is read by a patient who may be frightened, and every element on it either helps them understand or gets in the way. ## Why decoration costs more on a task screen - **Attention is finite.** Decorative imagery and color fields compete with the numbers, dates and actions the patient came for. - **Color gets read as meaning.** On a results screen, red and green are read as abnormal and normal. A brand red on headings can look like an alarm; meaning-bearing color belongs to the functional palette, not to brand decoration. - **Emotional context changes.** A cheerful illustration is welcome on a welcome screen and jarring beside a serious diagnosis. - **Repetition breeds fatigue.** A flourish that delights on the first visit becomes noise by the twentieth. - **Legibility margins shrink.** Text over images or saturated backgrounds is harder to keep readable, and the people using a patient portal include many with low vision. None of these costs weighs as heavily on a marketing page, because the visitor there is browsing rather than trying to act on what the page says. ## Where the brand still lives on a task screen Restraint is not removal. On a task screen the brand survives through: - the chosen typefaces, used consistently; - brand color on a small number of fixed roles, such as the primary action and the navigation bar; - the shape language - corner softness, line weight - applied to every component; - illustration style in the few moments where imagery fits, such as empty states and onboarding; - and, above all, consistent quality: predictable layouts, clear hierarchy and nothing that breaks. Patients recognise a product by how it behaves as much as by how it looks. A portal that is calm and dependable on its hardest screen expresses the brand more convincingly than one that decorates it. ## An expression dial, not a switch Many systems describe expression as levels tied to the surface's job rather than to taste: 1. **Expressive** - marketing pages, campaigns, first-run welcome: full imagery, display type, brand color fields. 2. **Moderate** - onboarding steps, empty states, success moments: a single illustration or accent, brand color as an accent. 3. **Restrained** - data, forms, results, billing, errors: neutral surfaces, the brand only in its fixed roles. Naming the levels lets a team ask 'which level is this screen?' instead of arguing each page from scratch, and lets reviewers flag a results screen that has crept towards expressive. The levels are a common practice, not a standard; the number and names vary, and what matters is that the level follows the surface's job. One screen can also hold two levels: a results page stays restrained while its 'no results yet' empty state may be moderate. ## Common mistakes - Copying the marketing site's hero treatment onto signed-in screens 'for consistency'. - Swinging the other way and stripping the product to unbranded grey, so it feels like a different organisation after sign-in. - Letting brand color drift into status roles, where it collides with warnings and results. - Deciding the expression level page by page, so it varies with whoever designed the screen. - Treating a marketing campaign's visual refresh as a reason to restyle task screens mid-flow, which breaks the familiarity repeat users rely on.

  • What stops a restrained product screen from feeling like a different company after sign-in?
    Keeping a small set of brand cues constant everywhere: the same typefaces, brand color on the same fixed roles such as the primary action and navigation, the same shape language, and the same illustration style where imagery appears. The continuity comes from consistency of those few touches, not from carrying the marketing page's large imagery into the product.
  • Where on a patient portal's signed-in surfaces does moderate expression fit?
    Moments with low stakes and an orientation job: onboarding steps, an empty appointment list inviting a first booking, a simple success confirmation. A single illustration or brand accent helps there. Results, clinical warnings, billing and errors stay restrained, because any mood the decoration carries may be the wrong one.

A hospital's main entrance can have art, a fountain and a bold sign; the treatment room keeps the same signage style and colors on the door but is plain inside, because the person there needs to focus on what the clinician says.

saying these in an interview costs you the question

  • Task screens should match the marketing site's look exactly so the brand feels consistent.
  • Restraint means removing all brand cues from signed-in product screens.
  • Brand color can double as a status color if it fits the palette.
  • A big hero illustration makes any screen friendlier, including results and errors.
  • The expression level of a screen is a matter of the designer's taste.
open as a page

In a design system, how do you turn brand attributes such as 'calm' and 'trustworthy' into concrete interface decisions for a hospital patient portal?

level: middleimportance: should knowfreq 32%

basics

~20 s

Describe each attribute as traits a user could observe, map each trait to a lever - color, type, shape, imagery, motion, density - and record each choice with its reason and what it rules out.

open as a page

For a patient portal on the web and two native mobile platforms, which parts of visual identity stay constant and which follow platform conventions?

level: middleimportance: should knowfreq 28%

basics

~20 s

Keep constant what makes the product recognisable - color roles, illustration and photography style, voice, shape language. Follow each platform for navigation, standard controls, gestures and system dialogs, and always honour the user's text-size and motion settings.

open as a page

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%

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.

open as a page