Turn a civic portal into a more direct service gateway.
Durham residents needed a more direct way to reach high-demand services without parsing a heavy government website.
Public sector
DurhamRegion
A civic UX/UI redesign for myDurham 311, focused on service discovery, payment paths, responsive behavior, and resident-first navigation.
- Role
- UX / UI Designer
- Service architecture, responsive interface direction, navigation, and civic page systems.
- Focus
- 311 services
- Help residents submit requests, find alerts, make payments, and track service status faster.
- Principle
- Findability first
- Make the most common municipal tasks visible before users need to search.
- Year
- 2024 – 2025
- Aug 2024 to Mar 2025 with the Region of Durham municipal team.
- Duration
- 8 months
- Eight-month redesign covering homepage, request entry points, payment paths, mobile behaviour, and reusable UI patterns.
Project arc8 months - Research, completed
- Personas, completed
- Data, completed
- Refinement, completed
- Done, completed
I reorganized priority actions around resident intent.
The work focused on homepage hierarchy, service request entry points, payment paths, mobile behavior, and reusable UI patterns.
Before and after
A more direct way into civic services.
The redesign shifted the page from a search-heavy municipal landing page into a resident task hub with three obvious starting points.
Information architecture
Navigation mapped around resident intent.
The sitemap clarified how broad civic categories could connect to high-demand request paths without making users understand internal departments first.
High-frequency categories like transit, water, garbage, and regional inquiries sit behind a task-led service request model.
Put resident tasks before organization structure.
Residents arrive with jobs to finish, not a department chart. The entry points lead with submit, track, and pay before the site asks users to choose a civic category.
Use accessible contrast and large, readable action targets.
Large targets and high-contrast states make the interface usable in rushed, mobile, or low-vision contexts.
Keep service status, alerts, and payment paths easy to recover.
Requests, payments, and alerts are recoverable from multiple moments, so users can return to the task instead of restarting.
Make responsive behavior feel like the same civic product, not a separate mobile site.
The same service model carries from desktop to mobile, preserving labels, priority actions, and content order across breakpoints.
Service journeys
Core paths became easier to scan.
The page system treats requests, tracking, and payment as sibling journeys, each with a direct entry point and supporting explanation.
Three starting points before any search box. Submit, track, and pay sit on the hero as equal cards, so residents act before they read.
Tracking sits above the catalog. A reference-number tracker leads the requests page; categories are grouped by what residents need, not by department.
Help is a page, not a search result. Popular topics and guidance are organized so the answer is one scan away, with the same header actions in reach.
Responsive system
Same civic product, smaller canvas.
Mobile and compact desktop states preserved the same service hierarchy, reducing the chance that residents would lose their place between devices.
Same hierarchy, narrower canvas. The three actions and the announcements keep their order at tablet width.
Actions stay first on a phone. Hero actions become three tall tiles; announcements and requests follow in the same sequence.
Categories reflow without renaming. The tracker stays first; category groups collapse to two columns with the same labels.
The tracker remains one tap away. Categories stack into a single column; the reference-number search keeps the top position.
Help topics stack, guidance stays scannable. The same topics as desktop, one column, no separate mobile site.
Design system
UI parts were treated as civic infrastructure.
Buttons, nav states, footer patterns, and service modules were organized so the portal could scale without each new page becoming a custom layout problem.
Outcome
A public service experience that feels easier to trust.
The Durham Region work brings hierarchy, accessibility, responsive consistency, and task-first navigation into one more usable 311 experience.