wikimove SaaS Dashboard
Project Background
Problem Statement
Project Goals
Background Context
The Process
Research
To design an effective mobility management dashboard, I analysed the wikimove Mobility Manager platform capabilities, reviewed operator workflows through the user handbook, and conducted competitive analysis of existing mobility dashboards.
Platform & Competitive Analysis:
Examination of the wikimove Mobility Manager platform revealed comprehensive data capabilities (fleet monitoring, trip analytics, provider management, zone coordination) whilst identifying critical gaps in data presentation and multi-jurisdiction navigation. Analysis of competitor solutions (Lime Operations Dashboard, Bird City Portal, TIER Fleet Manager) revealed key shortcomings:
- Real-time maps prioritised over aggregated analytics, forcing constant view-switching
- No seamless multi-jurisdiction switching—separate logins caused context loss for regional associations
- Cluttered interfaces with information overload hindered quick decision-making
- Provider comparison tools were absent or buried in complex reporting
Key Insights & Design Implications:
Research identified critical operator needs that directly informed dashboard design decisions. At-a-glance status requirements drove the persistent KPI bar, comparison data needs informed week-over-week trends and provider rankings, and visual hierarchy requirements led to colour-coded indicators (green/orange/red) for instant issue identification. Two insights shaped core features: associations managing 3-5 municipalities needed instant jurisdiction switching validating the prominent selector placement, and operators struggling with cluttered interfaces validated the widget-based modular architecture.
Design
Design System & Architecture
A widget-based dashboard was developed using Material-UI v7.2.0, implementing the wikimove brand palette as design tokens for visual consistency. A 12-column responsive grid enabled flexible widget sizing in 3, 6, and 9 column widths with critical metrics positioned in a persistent top bar. Component specifications documented exact MUI usage, colour tokens, spacing (16px padding/gaps), and elevation hierarchy for seamless developer handoff.
Widget Design & Iterative Refinement
Eight distinct widget types addressed specific operator needs: KPI tiles with colour-coded trends, line charts for week-over-week comparison, stacked bars for provider performance (STWL green, ZEUS blue, Donkey teal), and circular progress for zone occupation. Multiple iterations refined visual variety—shifting zone occupation from linear to circular progress based on feedback about bar chart repetition. Calibrated typography hierarchy (24px bold values, 11px semibold labels, 12px details) and colour-coded severity (green/orange/red) enabled instant issue identification.
Testing & Validation
Design System & Accessibility Validation:
All components were validated against MUI v7.2.0 specifications and WCAG 2.1 AA standards, verifying typography hierarchy, colour contrast ratios, touch target sizing (minimum 48×48px), and colour-blind accessible palettes for status indicators. The dashboard was evaluated against Nielsen's usability heuristics, confirming strong performance in consistency, visibility of system status, and aesthetic minimalism whilst identifying opportunities to strengthen visual feedback through colour-coded zone occupation levels and persistent KPI accessibility.
Stakeholder Review & Iterative Refinement:
Interactive Figma prototypes were reviewed with stakeholders, gathering feedback on information hierarchy and data visualisation clarity. Key improvements included shifting zone occupation from linear bars to circular progress indicators (reducing visual monotony), refining typography hierarchy (24px bold KPIs, 11px semibold labels, 12px regular supporting text), implementing green/orange/red severity indicators for instant issue identification, and elevating critical metrics to a persistent top bar ensuring operators maintain visibility of fleet availability, active trips, revenue, and NPS regardless of scroll position.
Solution
Multi-Jurisdiction Architecture
The wikimove Mobility Manager dashboard addresses the critical challenge of regional oversight through a seamless multi-jurisdiction architecture. A prominent jurisdiction selector in the bottom-left navigation enables public transport associations to switch between municipalities (e.g., Lichtenau, Paderborn, Gütersloh) with a single click, with all dashboard widgets—fleet status, trip analytics, provider performance, and zone occupation—instantly updating to reflect the selected jurisdiction's data. This eliminates context-switching friction, removes the need for multiple logins or separate dashboards, and enables efficient regional coordination for associations managing 3-5+ municipalities from a unified interface.
Widget-Based Operational Dashboard
Eight specialised widgets address specific operator needs whilst maintaining visual clarity through a 12-column responsive grid. A persistent KPI bar provides at-a-glance access to critical metrics (fleet availability 68%, active trips 127, revenue €12.5K, NPS 52) without scrolling, whilst the scrollable dashboard area presents detailed analytics: fleet status pie chart for immediate vehicle availability assessment, week-over-week trip comparison line chart for trend identification, provider performance stacked bars (STWL, ZEUS, Donkey Republic) for service quality oversight, colour-coded zone occupation indicators (green/orange/red) for instant capacity assessment, and prioritised support tickets for operational issue management. The MUI-based design system ensures consistency, accessibility (WCAG 2.1 AA), and efficient developer handoff through documented component specifications.
