Why this matters
High fidelity (hi-fi) prototypes are near-realistic, clickable representations of dashboards and data apps. As a Data Visualization Engineer, you use them to:
- Get stakeholder sign-off on the exact look, feel, and behavior before build.
- Specify interactions (filters, drilldowns, hover states, loading) for BI developers.
- Validate accessibility and readability with realistic data density.
- Reduce rework by aligning design, data, and engineering early.
Concept explained simply
A hi-fi prototype shows the final layout, typography, spacing, chart styles, color tokens, and realistic sample data. It also simulates interactions and states: hover, empty, error, loading, filtered, and responsive breakpoints.
Mental model
Think of it as a storyboard plus an instrument panel:
- Storyboard: user goals and steps (e.g., filter region, compare quarterly revenue, export).
- Instrument panel: every control and visual with precise labels and predictable behavior.
Checklist: What must be in a hi-fi prototype
- Real sample data values and scales (not lorem ipsum).
- Consistent design tokens (color, type ramp, spacing, grid).
- Interactive states: hover, selected, disabled, loading, error, empty.
- Annotations: data logic, interaction rules, and performance notes.
- Responsive variants or at least a mobile/compact layout.
What good looks like
- Realism: values and labels look like production (thousands separators, date formats, units).
- Clarity: hierarchy guides the eye (KPI first, then trends, then details).
- Consistency: one legend style, one filter behavior, consistent number formats.
- Accessibility: sufficient contrast, not color-only encoding, readable fonts.
- Build-ready: concise annotations remove ambiguity for implementation.
Step-by-step workflow
- Start from goals: write 3–5 user questions the dashboard must answer.
- Sketch the information hierarchy: KPIs → trends → breakdowns → details.
- Grid & spacing: define columns, gutters, spacing scale (e.g., 4/8 px).
- Typography: set a type ramp (e.g., H, Subhead, Body, Caption) and number styles.
- Color tokens: primary, semantic (good/bad/neutral), and categorical palette.
- Components: cards, legends, filters, tooltips, tabs, pagination, alerts.
- Charts with real scales: set axes, units, abbreviations (K, M, B), date formats.
- Interactions: show hover tooltips, click states, filter chips, drilldown paths.
- States: loading skeletons, empty state copy, error messages with next steps.
- Annotations: inline callouts for rules (e.g., aggregation, sorting, rounding).
- Review: quick user walkthrough; adjust based on feedback.
Micro-checklist to finish a screen
- Every chart has a clear title and units.
- Legends match encodings; no duplicate encodings.
- Primary actions are visible and singular per area.
- Keyboard focus order is logical.
- Mobile/compact layout is considered or noted as out of scope.
Worked examples
Example 1 — Executive Sales Dashboard
Goal: See monthly revenue at a glance; filter by Region and Product Category.
- Top row: KPI cards (Revenue, YoY %, Avg. Order Value). Each card shows hover tooltip with definition.
- Middle: Line chart (Revenue by month, past 12 months). Hover shows month, value, YoY delta.
- Right: Bar chart (Revenue by Region). Clicking a bar adds a filter chip.
- Left panel: Filters (Region, Category, Time range) with apply/clear.
Annotations:
- Revenue aggregates to sum; YoY uses same month last year; missing months show zero with dashed line.
- Number format: $12.3M; small values < $1,000 show exact dollars.
- Click bar → filter chip appears under header; chip removable with keyboard and mouse.
Example 2 — Anomaly Review Page
Goal: Identify days with unusual traffic.
- Heatmap: day vs. hour; color intensity shows visits.
- Detail drawer: opens on click with sparkline and metrics.
- States: Empty ("No anomalies for selected period"), Error (retry button), Loading (skeleton).
Annotations: Threshold = rolling 28-day mean + 2 standard deviations; colorblind-safe palette with dual encoding (color + border).
Example 3 — Mobile Compact Variant
Goal: Preserve core insight on small screens.
- Stack KPI cards; show tiny sparkline inside each card.
- Replace wide bar chart with top 5 items list; overflow goes to a details screen.
- Filters become a bottom sheet; primary actions pinned.
Annotations: Touch target 44x44 px; font minimum 14px; sticky header includes filter state chips.
Accessibility essentials for hi-fi
- Contrast ratio at least 4.5:1 for text under 18px.
- Do not rely on color alone: add shapes, patterns, or labels.
- Keyboard access: tab order reaches filters, charts, and actions; visible focus ring.
- Tooltips are not the only source of critical info; ensure on-chart labels or summaries.
Performance considerations to prototype
- Include loading skeletons for heavy visuals.
- Prefer progressive disclosure: summary first, details on demand.
- Limit defaults: load top 10, paginate or virtualize long tables.
Common mistakes and self-check
- Mistake: Fake numbers that do not fit axes. Fix: Use realistic ranges and units.
- Mistake: Color-only differentiation. Fix: Add patterns, labels, or shapes.
- Mistake: Missing states. Fix: Include empty, error, and loading screens.
- Mistake: Unclear filter behavior. Fix: Show chips, active states, and reset flows.
- Mistake: Overcrowded first view. Fix: Apply visual hierarchy and spacing.
Self-check list before handoff
- Each chart has title, subtitle or helper text, and unit formatting.
- Legends are placed consistently (top-right or below) and are scannable.
- Interactions are annotated (hover, click, drill).
- States are represented for each critical component.
- Responsive or compact variant is addressed.
Exercises
These mirror the exercises below so you can practice inside this page and then record your results.
Exercise 1 — Build a hi-fi KPI dashboard (mirrors exercise ex1)
- Create a single-screen hi-fi prototype for a "Marketing Performance" dashboard.
- Include: 3 KPI cards (Spend, Impressions, CTR), a 12-month line chart (CTR), a stacked bar chart (Spend by Channel), and filters (Channel, Region, Date).
- Show interactions: hover tooltips, click-to-filter with chips, reset-all.
- Include states: loading skeleton for the line and bar, empty state for filters, and an error toast.
- Add annotations: number formats, aggregation rules, sorting, and thresholds for CTR highlighting.
Submission checklist:
- Realistic values and units (e.g., $2.4M, 4.2%).
- Consistent color tokens and type ramp.
- Clear filter behavior with chips and keyboard focus.
- All key states shown as separate frames.
- Compact/mobile variant or a note why not needed.
Show a reference solution idea
Top row: Spend ($2.4M), Impressions (125M), CTR (4.2%, green up 0.3pp). Middle: CTR line with monthly points and tooltip: Month, CTR, MoM delta. Right: Stacked bar (Spend by Channel: Search, Social, Display), legend uses color + pattern. Left: Filters panel with Channel multi-select, Region single-select, Date range pill. Filter chips appear below header; keyboard tab order traverses chips, then charts. States: skeleton lines/bars on initial load, empty state copy "No data for the selected filters" with a quick clear. Error toast top-right with retry action. Annotations call out formats ($1.2M, 1 decimal for %), sort order (desc by spend), and selection behavior (click adds filter; click again removes).
Mini challenge
In 30 minutes, turn any chart into a component with:
- Title, helper text, and unit formatting.
- Two states (loading and empty).
- A documented hover tooltip with exact fields and formats.
Who this is for
- Data Visualization Engineers who need build-ready specs.
- Analytics Engineers preparing dashboards for stakeholders.
- Designers collaborating with BI developers.
Prerequisites
- Basic chart literacy (bar, line, area, scatter, table).
- Comfort with a design tool for layout, components, and styles.
- Understanding of your data model at a high level (metrics, dimensions, grain).
Learning path
- Draft low-fidelity wireframes for hierarchy and flow.
- Apply design tokens and real data to create the first hi-fi screen.
- Add interactive states and annotations for rules.
- Create a compact/mobile variant.
- Run a 15-minute usability check with two users.
Practical projects
- Operations Overview: KPIs + trend + incident log with severity encodings.
- Finance Forecast Review: range chart with scenario toggles and assumptions panel.
- Customer Health: cohort retention heatmap with drilldown to user list.
Next steps
- Translate the prototype into a BI tool using the same tokens.
- Create a shared components library for charts and cards.
- Plan a lightweight usability test script and capture findings.
About the Quick Test
The quick test below is available to everyone. Your progress is saved only if you are logged in.