Back

Dashboard Global Shell

Stay22 · New dashboard rollout (stealth release) · 2025

The dashboard foundation and home overview: KPI tiles, trend modules, latest activity lists, timeframe switching, and a first-run empty state—built with responsive behavior and light/dark parity.

Senior UX/UI DesignerB2B SaaSDashboardData visualizationResponsive designLight/Dark themeDesign system migration

Problem

The dashboard home sets the tone for the redesign and is where partners build confidence. It needed to answer “How am I doing?” quickly, support repeat check-ins, and work equally well for brand-new partners with no data and active partners with rich activity—across devices and themes.

Users

Stay22 affiliate partners who need quick visibility into revenue, transactions, commissions, and recent activity across desktop and mobile.

Approach

  • Established a scan-first hierarchy: top KPIs → mid-page trends → bottom operational lists.
  • Designed a stable timeframe switcher (daily/weekly/monthly) that changes aggregation without changing layout.
  • Created a first-run empty state that replaces charts with guidance and next actions to drive activation.
  • Maintained theme parity and responsive behavior as part of the design-system migration.

Component Sheet

Overview of KPI tile variants, chart modules, and list components used throughout the dashboard home.

Component sheet showing dashboard home modules.

Home Overview (Data Present)

A scannable layout that progresses from status → trends → recent activity.

Scan-first dashboard overview layout.

Open

First-Run / Low-Data State

Empty states that feel intentional and include clear next actions.

First-run experience designed to drive activation.

Open

Mobile Overview

A responsive stack that keeps KPIs and timeframe switching usable on small screens.

Mobile dashboard layout prioritizing status cards.

Open

Outcomes

  • Established the dashboard home layout and module system used as a foundation across the redesign.
  • Improved first-time clarity with an empty state that explains what will appear and provides activation CTAs.
  • Delivered responsive and light/dark parity for consistent behavior across devices and themes.

Screens shown as design work samples. Product details may be simplified.