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

## The goal: recognisable, not identical A patient portal that ships on the web and on two native mobile platforms faces a tension. The brand wants every surface to feel like the same hospital. Each platform's users bring expectations learned from every other app on their device: where back navigation lives, how a switch looks, how a sheet slides up, how an alert interrupts, how text grows when they raise the system text size. Fighting those expectations makes the app feel foreign and harder to use; ignoring the brand makes the three products feel unrelated. The resolution most systems reach is **recognisable, not identical**: carry the brand through the layers that define identity, and follow the platform in the layers that define behaviour. ## What stays constant and what adapts | Layer | Default | Why | |---|---|---| | Color roles - which color marks the primary action, which surfaces are neutral | Constant | Color use is a strong recognition cue | | Illustration and photography style | Constant | Rarely conflicts with platform behaviour | | Voice and terminology | Constant | Patients switch devices mid-task and must meet the same words | | Shape language on brand components | Mostly constant | A recognition cue, adapted where controls are native | | Navigation structure and back behaviour | Platform | Muscle memory from every other app | | Standard controls, pickers, system dialogs | Platform | Users already know how they behave | | Gestures | Platform | Overriding them breaks expectations | | Response to text-size and motion settings | Platform, always | Users set them for a reason | ## Where the platform wins - **Navigation.** A web-style top bar pasted into a native app in place of the platform's own navigation pattern costs every user a moment of confusion on every visit. - **Standard controls.** Date pickers, switches and share sheets that behave natively are also the most accessible, because the platform's assistive technologies already understand them. - **User settings.** The system text size, reduced-motion and contrast preferences override brand preference every time; a patient with low vision set a larger text size because they need it. ## The grey zone Some layers have no universal answer. Decide each one explicitly: 1. **Typeface.** A brand typeface is a strong cue, but it earns its place only if it scales with the platform's text-size setting and covers the scripts the hospital's patients read; if it cannot, the system face plus constant color roles and imagery may carry more identity for less cost. 2. **Icons.** A custom icon set is consistent across platforms; platform icons are instantly understood. A common split is platform icons for system actions such as share or back, brand icons for product concepts such as a lab result or a care team. 3. **Motion.** Keep the brand's character - soft, unhurried - while using each platform's transition conventions for navigation. 4. **Shape and depth.** Keep the brand's shape language on brand components such as cards and banners; let native controls keep their native form. Write each decision down with its reason so the three platform teams do not re-argue it separately. The written reason matters more than the verdict, because the next platform or product will face the same choice. ## Keeping it consistent over time - Define the constant layers **once** - color roles, the imagery library, voice - and share them across platforms rather than re-deriving them per team. - Review screens from all three platforms **side by side**, not only within one platform. - Run a **logo-hidden test**: if a patient cannot tell which hospital's app they are in without the logo, the identity lives only in the logo. - Ask each platform's users whether the app feels natural; a complaint about broken conventions is a signal that the brand overreached. ## Common failures - Pixel-identical screens that look like a web page wrapped in an app. - Each platform team choosing its own colors and illustration, so the patient meets three hospitals. - Restyling every native control until users and assistive technologies no longer recognise them. - Freezing text sizes to protect a brand layout, which fails the patients who most need larger text.