kai凯

OCT 2024-DEC 2024 · IMPLEMENTED MVP

Analytics Dashboard

design and development

01Overview

an analytics dashboard for charge point operators (CPOs) and e-mobility service providers (eMSPs). i led its design and development to help customers monitor operational activity, investigate charging sessions, identify trends, manage partner relationships, and reconcile payments. self-service access reduces reliance on manual support and gives customers greater operational autonomy.

pm scope
reset

02Decision Rationale

challenge

Customers depended on internal teams to access fragmented operational data and complete routine monitoring, investigation, and reconciliation tasks.

key decision

I prioritized a role-based, self-service dashboard that combined shared interaction patterns with metrics and workflows tailored to each customer type.

03Product Strategy

  1. define

    translated recurring customer needs into prioritized requirements and a focused MVP.

  2. tailor

    designed role-specific metrics and workflows within one shared dashboard.

  3. scale

    established reusable components and patterns to streamline engineering delivery.

04Design System

i created a reusable design system to keep a dense operational dashboard consistent, legible, and scalable across monitoring and configuration workflows.

typography · satoshi

  • H1

    satoshi bold · 36px

  • H2

    satoshi bold · 24px

  • H3

    satoshi bold · 18px

  • Section heading

    satoshi bold · 16px

  • Supporting text

    satoshi regular · 16px

  • Body

    satoshi regular · 14px

  • Label

    satoshi regular · 12px

colour system

neutral

blue

purple

red

yellow

green

teal

components and states

buttons

primary · default
Negotiate cost
primary · hover
Negotiate cost
primary · disabled
Negotiate cost
secondary
Cancel
with icon
Send request →
ticket entry
Submit support ticket here →

confirmation

Confirm

Are you sure you want to deactivate Simplenight?

CancelYes

text inputs

default
Type here
hover
Type here
active · filled
11/07/2024
disabled
Type here
text area
Add your reason here

select menus

default
Select here
hover
Select here
selected
Simplenight
disabled
Select here

radio buttons · checkboxes

radio · default
Pending
radio · selected
Completed
checkbox · default
checkbox · checked
checkbox · disabled

toggles

off
on
off · disabled
on · disabled

chart legends

session status
PendingCompletedFailed
series
Number of API CallsAverage Session Cost

time range tabs

today selected
TodayDayWeekMonthYear
month selected
TodayDayWeekMonthYear

pagination · icons

123

system in use

Filter

Date

11/07/2024

eMSP

select here
November 2024
sunmontuewedthufrisat00000123456789101112131415161718192021222324252627282930

Start Time

00:00:00

End Time

00:00:00

Status

PendingCompletedFailed
Reset filtersSave
structured filtering
eMSP Configuration
Service ProviderStatus
  • 1Caremiles
  • 2Parkopedia
  • 3Simplenight
  • 4Autel
  • 5Enode
  • 6Monta
  • 7Sheeva
  • 8SWTCH
123
repeatable configuration controls
API Call VolumeTodayWeekMonthYear

Number of API Calls

604530150
17 Nov 202421 Nov 202425 Nov 202429 Nov 2024
consistent data visualization

05Final UI

role-based analytics

shared dashboard foundations with metrics and workflows tailored to each customer role.

operational workflows

charging-session investigation

search, filter, and review individual charging-session outcomes.

payment reconciliation

track payment records, methods, amounts, due dates, and statuses.

built with love 2026