Project Overview
Client: OC Transpo
Project Type: Web Page Redesign
My Role: Technical Graphic Designer
Timeline: September - December 2025
My Role
During my co-op with OC Transpo’s Website and UX team, I redesigned multiple web pages with a focus on accessibility, usability, and user-centered design. My goal in each project was to identify real user pain points and transform them into intuitive, inclusive, and efficient experiences. To build the final pages in ExpressionEngine, I used a mix of existing code components and my own custom HTML, CSS, and JavaScript.
Vehicles - Trains
I redesigned the previous pages for the FLIRT and LINT trains and created a brand-new page for the Spirit trains, ensuring a consistent layout across all three. To make the pages more visually engaging, I designed custom train illustrations, carefully adapting an existing design style to match the actual vehicles as closely as possible. I also researched the specific features of each vehicle so I could provide riders with accurate, comprehensive details. Finally, I organized this information into clear, easy-to-navigate sections, highlighting interior features, exterior details, the specific lines each train operates on, and other essential tips so commuters have exactly the information they need at a glance with a sticky side navigation.
Designing for Everyone
I approach design not just as visual improvement, but as problem-solving ensuring that interfaces are easy to navigate, accessible to diverse users, and aligned with usability best practices.
About Alerts
To break up the wall of text, I separated the page into distinct color-blocked sections and added a side navigation menu so users can jump right to what they need. Instead of plain text and standard bullet points, I transformed the service updates into a clean grid and separated the sign-up steps into individual, easy-to-follow cards. I also highlighted information using a "Note" callout box and replaced the call to actions with new buttons style.
Rural Park & Ride
For a easier access and better quality, I replaced the map with a simple download link and added a side navigation menu so users can quickly jump to the section they need. Instead of making users scroll through a long list, I organized the parking lots into an easy-to-scan grid. Finally, to improve overall accessibility and user experience, I grouped the specific lot details into cards and added a contact section for any questions riders might have.
Station Accessibility Features
The original design relied on long, tiring bulleted lists with randomly sized and placed images. To fix this, I transformed the O-Train and Bus station features into a clean, modern grid of uniform cards, pairing each accessibility feature with a clear photo. I also added the side navigation menu. To clearly separate the different topics, I applied soft background colours to each block. Finally, I organized the contact information and related links at the bottom into cards.
Transecure
To break up the plain white background, I used soft brand colours separate different pieces of information. I added the side navigation menu for consistency across pages. To make the actions clearer, I updated the tabs, renaming the first one to a much more descriptive "Anonymous online reporting" and highlighting it with a bright, accent colour. Finally, I modernized the campaign graphics, changed the main "Submit an incident" button to a bold, brand-aligned red.