Monzo UI features abstraction levels

Summary

A framework slide introducing three UI-abstraction levels, shown left to right as cards moving from a full app screen to an isolated component to an exaggerated graphic.

Visual description

Pale mint background, "Product visualisation" pill top-left, page number "63" top-right. A dark "UI features" headline with two short muted paragraphs about abstraction levels. Below, three large rounded cards, each with a small bold label above. "No abstraction" is a coral card holding a near-complete Monzo app screen plus a floating "Sam Shaw / 27.20" payment chip. "Information sound bites" is an olive-green card with a single white "Split the bill" panel listing three people with amounts. "Exaggerated story" is an orange card with a simplified white "Split the bill" panel showing four colored initial avatars. The three cards visibly step from realistic to abstracted.

Key takeaway

Defining a spectrum (full UI to isolated component to exaggerated graphic) and showing all three points side by side so the choice between them is obvious. Color-coding each level on its own card makes the framework memorable and easy to reference later.

Reuse notes

A strong way to document "how literal should product UI be" in a guideline. The labeled three-card spectrum transfers to any progressive scale (detail levels, fidelity, formality). The following slides expand each level, so this works as the index for that set.