Dashboard
The main hub after sign-in, showing your most-recently-edited presentation, key engagement metrics, and links to every section of the app.
What the Dashboard shows
Overview of the redesigned Dashboard home: a personalised greeting, a time range selector, an attention list, a continue card, four KPI cards, an engagement chart, a latest comments panel, a reach panel, and a top handyouts panel — plus an analytics overlay when no handyout has been generated yet.
Dashboard overview
The Dashboard is the first page you see after signing in. It gives you a personalised snapshot of your account across a selectable time window.
Header
The header greets you by first name (for example, "Good afternoon, Sarah") and shows today's date. Below the greeting, a summary sentence reports how many times your handyouts were opened in the chosen period and, if any viewers are waiting, how many need an answer from you.
A time range selector sits in the top-right corner, alongside the setup progress bar. Choose from:
| Option | Period covered |
|---|---|
| 7d | Last 7 days |
| 30d | Last 30 days (default) |
| 90d | Last 90 days |
| 1y | Last 12 months |
Changing the range updates every chart and metric on the page.
If you have no handyouts yet, the header summary changes to "Overview of your presentations, engagement, and account."
Layout
The body of the Dashboard is a vertically stacked set of rows.
Row 1 — Attention list and Continue card
Attention list — shows items across your account that need action, such as handyouts with unanswered viewer comments. Each item links directly to the relevant page.
Continue card — shows your most recently edited presentation or handyout with a quick link to continue working on it.
Row 2 — KPI cards
Four metric cards sit side by side (two columns on smaller screens, four on large):
| Card | What it measures |
|---|---|
| Views | Total handyout opens in the selected period, with a small sparkline |
| Average view time | Mean session duration per viewer, for the selected period |
| Comments | Total audience comments left in the selected period |
| Found it helpful | Percentage of reactions that were positive, for the selected period |
Row 3 — Engagement chart and Latest comments panel
Engagement chart — a time-series chart of views and interactions across all your handyouts for the selected period. When the range is longer than 90 days, data is automatically bucketed by week rather than by day so the chart stays readable.
Latest comments panel — shows the most recent audience comments across all your handyouts so you can spot new activity without visiting the Comments page.
Row 4 — Reach panel and Top handyouts panel
Reach panel — shows how broadly your handyouts have been shared and accessed.
Top handyouts panel — a ranked list of your handyouts by engagement, showing up to five entries. Click any entry to navigate to its Presentation detail page.
When no handyout has been generated
The KPI cards, charts, and panels in rows 2–4 are covered by a single frosted overlay when your account has no published handyouts. The overlay shows an empty-state prompt whose call to action changes by situation:
- If you have a presentation but no handyout: "Generate a handyout from '[name]' and we'll start tracking every view, reaction, and comment in real time." The button links to the settings page for that presentation.
- If you have no presentations at all: "Generate your first handyout and we'll start tracking every view, reaction, and comment in real time." The button links to the Presentations library.
Success dialog
If you arrive at the Dashboard after a successful billing action, a confirmation dialog opens automatically to acknowledge the credit purchase. It closes when you dismiss it.
Dashboard navigation and feature map
Map of every section accessible from the dashboard sidebar and how they connect, helping users navigate the full product.
Dashboard navigation
The dashboard shell wraps every page except onboarding. A persistent sidebar gives access to all sections.
Onboarding
New accounts are taken through a one-time Onboarding wizard before reaching the dashboard. Once complete, onboarding is skipped permanently and you land directly on the Dashboard home.
Dark mode support across the dashboard
The dashboard now fully supports dark mode. Your last-used appearance preference is remembered between visits and applied instantly on page load with no visible flash.
Dark mode across the dashboard
The dashboard supports both light and dark appearances. Every section — Billing, Comments, Analytics, QR Code editor, Onboarding, Contact, and the subscription confirmation page — renders correctly in dark mode, with appropriate contrast and colour choices throughout.
How your preference is stored and applied
Your dashboard appearance preference is saved in your browser. When you return to the dashboard, the correct theme is applied immediately — before the page finishes loading — so there is no visible flash of light content before the dark theme takes effect.
Switching themes
Use the theme toggle in the dashboard interface to switch between light and dark. The change takes effect immediately across all open dashboard tabs.
The preference is stored per browser. If you use Handyout on multiple devices or browsers, you may need to set the preference on each one.
Dashboard interface style
Describes the clean, borderless visual design language used throughout the dashboard — borderless page containers, consistent rounded corners on cards and panels — plus the animated badge labels used for contextual status indicators and step counters.
Interface design language
The Handyout dashboard uses a consistent rounded, open visual style. All main page containers across every section — Dashboard home, Presentations, Handyouts library, QR Codes, Analytics, Billing, Contact, Profile, Referral, Onboarding, Presentation Detail, Handyout Editor, and QR Code Editor — are rendered without an outer border, so content extends to the full width of the viewport without visual frames around it. Individual cards, panels, form boxes, and dialogs carry their own borders; the page-level wrapper itself does not.
The radius scale used across the product:
| Element type | Corner style |
|---|---|
| Full-page hero banners and large content panels | Extra-large rounding (2xl) |
| Standard cards, tiles, and dialogs | Large rounding (xl) |
| Sidebar widgets (credits, tips) | Medium rounding (lg) |
| Inline boxes (URL display, error alerts, success banners) | Small rounding (md) |
| Small interactive elements (module drag previews, colour palette) | Subtle rounding (sm) |
Animated badge labels
Short contextual labels throughout the dashboard are displayed as small, pill-shaped animated badges — a subtle, softly-styled indicator that draws the eye without requiring heavy visual framing. These badges appear in the following places:
| Location | Badge text |
|---|---|
| Billing page (beta / waitlist mode) | Beta access |
| Onboarding — every step header | Step N/9 (e.g. Step 3/9) — animates on step change |
| Onboarding — final step | What's next |
The badge style uses a neutral-to-info tone that matches Handyout's visual system; the exact colour depends on the badge's status context (info, neutral, or danger) rather than a fixed orange tint.
Design decision flow
Guided tour and setup progress bar
Describes the interactive guided tour that walks new users through the dashboard, the setup progress bar that tracks which key features have been visited, and how the tour can be started, paused, and resumed. Includes details on how tour prompts load asynchronously so they never delay the dashboard from appearing.
Setup progress bar
A compact progress bar appears in the top-right corner of the Dashboard home and the Presentations page. It tracks how many of the key setup milestones you have completed — visiting Analytics, Comments, the QR Code editor, and other important sections for the first time. Once all milestones are marked, the bar shows 100 % and disappears.
The progress bar is a quick visual prompt that helps you discover the full product without needing to hunt through menus.
Dashboard guided tour
A step-by-step guided tour is available throughout the dashboard. It highlights specific parts of the interface — the presentation grid, handyout editor panels, QR code editor, analytics sections, and more — and explains what each area does.
Three components work together to deliver the tour experience:
| Component | What it does |
|---|---|
| Tour start prompt | Appears the first time a new account reaches the dashboard. Offers to start the guided tour. |
| Tour resume prompt | Appears on subsequent visits if the tour was started but not finished. Offers to pick up where you left off. |
| Dashboard tour | The tour itself — a sequence of highlighted sections with explanatory text, advancing step by step. |
The tour is optional. Dismissing either prompt skips it. Tour state is tracked per account, so it persists across sessions and devices.
How tour prompts load
The tour start prompt, tour resume prompt, and the tour overlay itself all load in the background — separately from and after the main dashboard shell and your content. This means:
- The dashboard navigation, your presentations, metrics, and all page content appear immediately when you open any dashboard page.
- The tour prompt (if applicable) appears shortly afterwards, once it has finished loading, without any visible spinner or placeholder.
- If the tour components take a moment to initialise, nothing on the rest of the page is delayed or held back.
Sections tracked as setup milestones
Visiting the following pages for the first time marks the corresponding flag and advances the setup progress bar:
- Analytics page
- Comments page
- QR Code editor (per-presentation)
Other setup milestones are marked by completing actions such as generating your first handyout.
