NORTH JS TECH
Skip to content
North Js Tech
Analytics & Reporting

Daily Summaries & AOV

AOV Comparison UI – Screenshot Spec

Design a dashboard section that clearly compares Bundle AOV vs Non‑Bundle AOV, highlights AOV Lift, and shows a daily time‑series trend.

1. Layout Overview

  • Top row (KPIs) – three side‑by‑side metric cards:
  1. Bundle AOV
  2. Non‑Bundle AOV
  3. AOV Lift
  • Middle row – date range selector + period‑over‑period comparison label.
  • Bottom row – dual‑line time series chart (Bundle AOV vs Non‑Bundle AOV) with daily granularity.

Use a clean analytics style: light background, subtle grid, clear typography, and color‑coding (e.g., blue for bundle, gray for non‑bundle, green/red for lift changes).

2. KPI Cards (Top Row)

Place three cards horizontally with equal width.

Card 1 – Bundle AOV

  • Title: Bundle AOV
  • Primary value: $85.20
  • Subtext (period label): Last 30 Days
  • Period‑over‑period change:
  • Text: +12.5% vs previous 30 days
  • Style: green text with small upward arrow icon.

Card 2 – Non‑Bundle AOV

  • Title: Non‑Bundle AOV
  • Primary value: $55.10
  • Subtext: Last 30 Days
  • Period‑over‑period change:
  • Text: +3.2% vs previous 30 days
  • Style: green text with upward arrow icon (less prominent than Bundle AOV change).

Card 3 – AOV Lift

  • Title: AOV Lift
  • Primary value: +54.5%
  • Subtext: Bundle vs Non‑Bundle
  • Period‑over‑period change:
  • Text: +8.7 pts vs previous 30 days
  • Style: green text with upward arrow icon.
  • Optional helper text (small, below):
  • Bundles are increasing order value by over half compared to regular orders.

Last updated March 23, 2026

Let's talk
Daily Summaries & AOV | North Js Tech