KPU coursework
Healthy City Dashboard: Mode Share
An accessibility-driven redesign of a City of Vancouver open-data indicator, from static tables to an interactive dashboard.
- Role
- UX and visual designer (design lead)
- Timeline
- 12 weeks, 2025
- Team
- Two-person team, design lead
- Tools
- Figma, Chart.js, HTML, CSS, JS, JSON
- Type
- KPU coursework
The problem
The Mode Share indicator, how residents bike, walk and take transit, shipped as static tables with weak hierarchy, limited filtering and inconsistent accessibility. Built on City of Vancouver open data.
My role and constraints
As design lead I ran the redesign from content audit to coded dashboard, owning the visual system and the accessibility pass while staying aligned with the existing city look.
Process
A 12-week plan with a roadmap, work breakdown and risk log: content audit, lo-fi wireframes, hi-fi Figma prototype, then a build wiring JSON data to Chart.js. Accessibility checks ran before integration, not after it.
12 weeks, five phases
Content audit
Static tables, weak hierarchy, thin filtering, contrast gaps.
Lo-fi wireframes
Structure first, before any styling.
Hi-fi prototype
Consistent type and colour system in Figma.
Build
JSON data wired to Chart.js with tooltips and filters.
QA
Accessibility checks before integration, then multiple test rounds.
Live interaction
What I learned
Treating accessibility as a build-time gate kept it from becoming an afterthought, and made the visual system stronger: contrast and hierarchy are the same problem.