Bradford Bypass Website
Project details
Description
https://bradfordbypass.ca/
Designed and prototyped the full UI/UX system in Figma and built the website in WodPress, creating an accessible and intuitive platform for the Ontario Ministry of Transportation’s public engagement. The layouts were later adopted as design references for future MTO projects due to positive client feedback. I also maintained the site and provided regular content and visual updates, ensuring accurate, timely, and user-friendly information delivery.
-
Status:
Completed -
Client:
Bradford Bypass -
Location:
Canada
Progress and Challenges
One of the main challenges was organizing a large volume of project documents. I needed to find an effective way to categorize and display the information clearly, while also saving space and improving overall user experience.
Solutions
To manage the large volume of documents efficiently, I designed a categorized document structure with clear labeling and logical hierarchy. I implemented collapsible sections and tab-based navigation to save screen space and make browsing intuitive. This allowed users to quickly find the information they needed without feeling overwhelmed, significantly improving usability and readability.
Role
UI/UX Designer
Website Developer
Tool
FIGMA AND WordPress
Style Guideline
I began by establishing a style guideline that aligned with the project’s existing branding, logo, and highway signage colors to strengthen public recognition and consistency across communication materials. Using these foundations, I created a clean, accessible layout that clearly presented project updates, maps, and reports for public engagement.
Maintenance screen
After defining the style guideline, the client requested that the Maintenance screen design reflect the visual language of their existing highway signage. To meet this requirement, I carefully analyzed the colour palette, typography, and iconography used in the signage system and translated them into a digital interface that maintained consistency while ensuring accessibility and readability on web platforms.
Once the design direction was approved, I began transforming the concept into a functional experience. I first built a UI/UX system in Figma, ensuring every element reflected the Ministry of Transportation’s (MTO) visual identity. From typography and colors to iconography and grid spacing, every choice aimed to keep the interface consistent with MTO’s brand while maintaining a modern, accessible look.
I then created interactive prototypes to visualize the user journey and refine key interactions through testing. The site’s responsive layouts ensured accessibility across devices, particularly for mobile users tracking project updates on the go.
Organizing large volumes of technical documents was a major challenge, so I designed a clear information architecture with tabs and categorized sections to simplify navigation. This structure helped users to quickly find updates, maps, and construction notices without feeling overwhelmed.
I also designed and tested a fully responsive mobile version, ensuring a seamless and accessible experience across all devices.
The result received strong positive feedback, and my design framework was later adopted as a reference for future MTO projects.
