Build a clear reading order before styling

Understand the method

Layout determines what a reader notices and what they may overlook. Begin with a wireframe using boxes and labels. Put the decision and reporting scope before the metrics, then show the diagnostic evidence and explanation. This establishes the reading order before colours, shadows or decorative elements compete for attention. The downloadable learner scaffold follows that order without pretending to be a functioning dashboard.

Define the first screen

The first screen should answer what the report covers and which view is selected. Use a concrete title such as “Completed-order overview,” a short decision question, a fixture-edition label and clearly labelled filters. The default May/All view must be visible in the controls and in a scope sentence. A screenshot shared outside the application still needs enough context to identify period, channel, eligibility and currency.

Place the four headline measures in a consistent row on a wide screen: completed value, completed count, AOV and delivery measurement coverage. Give the value and label visual priority, but keep explanatory denominator text nearby. A large “95%” without “19 of 20 completed orders measured” would hide what the percentage represents. Keep the same metric order when the layout becomes two columns on a phone.

Follow the headline with diagnostic evidence

Below the cards, put monthly completed value beside channel AOV with group counts. They answer different questions. The first compares eligible totals across available months; the second helps explain composition and sparse groups. Use section titles that describe the measure rather than generic names such as “Performance analytics.” Give each chart enough width for labels without rotating every word or shrinking text.

The explanation belongs close to the diagnostic views. A light lavender panel can distinguish narrative context from the white metric cards, while headings and position preserve the distinction without colour. Include the April store n=2 warning and the verified €1,000 order’s influence. A footnote at the very bottom alone is too easy to miss if the limitation materially changes the headline interpretation.

Separate common reading from detailed inspection

Keep an expandable underlying-order table available for verification, followed by definitions and limits. This avoids making every reader scan 40 rows before understanding the result while preserving access to the evidence. The table needs real headings, units and a caption. Horizontal scrolling may be appropriate inside the table container on a narrow screen; the whole page should not slide sideways.

Make the design carry meaning

Use the established navy text, teal accents and restrained lavender surfaces. Give comparable elements comparable sizes. Reserve emphasis for the decision, headline measures and important exceptions. Do not paint every card a different saturated colour or add unexplained green success badges. An increase can reflect composition or a problematic denominator, so colour alone should not announce a favourable result.

Test the wireframe at a narrow width before refining it. Controls should stack, charts should form one column and cards should stay readable. Keep the document’s reading order logical even when CSS places panels side by side. The goal is a report that makes sense through sequential reading as well as visual scanning. A professional layout makes the analytical relationships easier to inspect.