Case Study 1
Highway 413 Public Consultation Website
OVERVIEW
PROJECT
Highway 413 Public Consultation Website
ROLE
UX / UI Designer: information architecture,
wireframing, responsive layouts, visual design, accessibility considerations, and content organization.
TEAM
Communications team, project managers,
developers, and transportation stakeholders.
GOAL
Help the public understand a complex
infrastructure project and easily find updates,
meetings, and ways to participate.
OUTCOME
Delivered a clear, mobile-friendly and accessible website that simplified technical information and supported public engagement.
KEY SKILLS DEMONSTRATED
Accessibility (WCAG)
Information Architecture
Content Simplification
Stakeholder Collaboration
THE PROBLEM
Design Challenge
Translate highly technical and content-heavy information into a clear experience understandable by non-technical users.
Public infrastructure projects involve long technical reports, environmental assessments, and timelines written for specialists.
• Does this affect my home or community?
• When is the next public meeting?
• How can I submit feedback?
Before the redesign, important information was buried inside document libraries and long pages.
Users often contacted the project team directly because they could not quickly find answers online.
On the other hand, because all materials were bilingual, I had to carefully plan layout spacing, component structure, and typographic hierarchy to accommodate both English and French without overwhelming the viewer.
UNDERSTANDING USERS
Users did not want to “study the project.”
They wanted quick clarity and reassurance.
This shaped all navigation decisions.
Key user needs
Quickly determine whether the project impacts them
Find meeting dates and locations
Submit questions or feedback
Access reports without feeling overwhelmed
DESIGN APPROACH
1 Structuring Content Around User Intent
I reorganized the site based on user questions instead of project structure:
About the Project
Cumulative Effects
The Environment & PTE
Timelines, Documents & Reports
Updates & Notices
This reduced cognitive load and allowed users to navigate without understanding technical terminology.
2 Simplifying Navigation & Accessibility
I designed mobile-first wireframes to ensure:
Readable text size
Accessible interaction patterns
Logical reading order
- Highlighted important actions (attend meeting, submit feedback)
Accessibility considerations included:
High contrast text
Clear headings
Structured content for screen readers
- Predictable navigation
3 Document Library Redesign
Instead of long, unstructured PDF listings, documents were:
Categorized by relevance
Organized with a side navigation system
Presented in scannable groupings
This improved information hierarchy and reduced the cognitive effort required to locate specific files.
Visual System & Accessibility Decisions
Design System & Visual Consistency
To support clarity and accessibility, I developed a simple and structured visual system.
The goal was not to create a visually complex interface, but to ensure consistency, readability, and trust.
Typography
Clear heading hierarchy to guide scanning
Generous line spacing for long-form content
Consistent sizing between desktop and mobile
Color & Contrast
High-contrast combinations to support WCAG standards
Limited accent colors to highlight actions (meetings, feedback, updates)
Avoided decorative colors that could distract from content
Components
Standardized document cards
Consistent button styles for participation actions
Structured content blocks to reduce visual clutter
SOLUTION
Tools
HOMEPAGE
The homepage communicates project status immediately and surfaces participation opportunities. Users can quickly see updates and upcoming engagement events without reading long descriptions.
Community Impact and Contact Us Pages
The content is structured to present essential information first. We organized the information into four main pages and six projects in the main submenu before guiding users to the technical documentation. This layered approach reduces cognitive load while maintaining transparency.
For users seeking additional clarification, they can easily contact the organization through a dedicated contact page, providing a clear path from information to action.
Participation & Meetings
All engagement-related content, including consultation meeting schedules, environmental assessment updates, PTE registration details, form completion, and contact information, is clearly organized and presented in a logical order across the respective pages.
By centralizing participation-related information, users can quickly understand how to get involved and take action without navigating across multiple pages.
Documents Library
Instead of presenting users with long, unstructured lists of PDFs, documents are organized into clear categories with a supporting side navigation menu.
This structure helps visitors quickly understand which documents are relevant to their needs, reducing the effort required to scan and locate specific information.
Result & Reflection
Impact
• Improved clarity for non-technical audiences
• Reduced confusion when navigating reports
• Supported accessible public participation
• Provided stakeholders with a reliable communication platform
What I learned
Designing for public audiences is different from designing for internal stakeholders. For bilingual materials, I carefully plan component and text spacing to accommodate both languages while maintaining clarity and accessibility
Clarity, trust, and transparency are more important than visual complexity, and this project taught me how to balance both effectively.
Good UX in civic projects is not about aesthetics, it is about helping people understand decisions that affect their lives.
