I reimagined the Compass Card by turning it from a website-based system into a mobile app. My goal was to make transit management easier and more accessible for daily commuters. I handled the entire design process—from user research and wireframing to prototyping and usability testing—ensuring that the app translates the existing website into a more practical and user-friendly experience. By focusing on simplicity and clarity, I aimed to improve fund loading, balance checking, and student pass renewal while keeping the familiar look and feel of the Compass Card system.
PRODUCT
Translink - Compass Card
ROLE
UI/UX Designer
TIMELINE
Sept 2025 - Oct 2025
6 Weeks
SKILLS
Design System
•
UI/UX Design
•
Prototype
•
Branding
•
Visual Design
TOOLS
Figma
•
Trello
•
Adobe Photoshop
•
Adobe Illustrator
The Compass Card is Metro Vancouver's go to for effortless transit. With 1.5 million taps daily, it's the simple way to pay for your trip across buses, SkyTrain, SeaBus, and West Coast Express trains. Offering convenience and efficiency, it's transforming the way commuters navigate the city.
The current transit management system for Metro-Vancouver commuters presents several challenges. Fund loading procedures are a long process, balance checking is not readily accessible, student pass renewal poses difficulties amidst hectic schedules, and inconsistencies between UPass BC and Translink websites create further frustration for users.
Furthermore, the branding aspect adds another layer of complexity, as many users are already familiar with the current branding. It's crucial to maintain this familiarity while introducing changes to ensure continued connection with the users.
Create a unified mobile app for Metro-Vancouver commuters. This app will simplify fund loading, balance checking, and student pass renewal. We aim to rebrand the Compass Card and U-Pass under a unified branding approach while ensuring familiarity with the original branding to maintain user recognition and comfort.
We aim to provide a comprehensive solution that eliminates the need for multiple website visits, improving the overall transit experience for all users.
Feature
Optimize Card Management
Measure how often users engage with key features such as roommate filters and the in-app chat to assess usability and their impact on the overall experience.
Strengthening User Experience
Collect feedback through surveys to measure user satisfaction with roommate matches, features, and overall app experience.
My design process aligns project goals with business needs, crafting solutions that are simple, intuitive, and impactful. By focusing on user feedback and addressing challenges strategically, I create user-centric experiences that are designed for everyone.
The user flow is designed with a focus on efficiency and simplicity, ensuring commuters can easily load funds, check balances, and renew student passes with minimal effort. Familiar branding is maintained for a seamless user experience.
My design process aligns project goals with business needs, crafting solutions that are simple, intuitive, and impactful. By focusing on user feedback and addressing challenges strategically, I create user-centric experiences that are designed for everyone.
The user flow is designed with a focus on efficiency and simplicity, ensuring commuters can easily load funds, check balances, and renew student passes with minimal effort. Familiar branding is maintained for a seamless user experience.
Design System & Tokens
My design process aligns project goals with business needs, crafting solutions that are simple, intuitive, and impactful. By focusing on user feedback and addressing challenges strategically, I create user-centric experiences that are designed for everyone.
Tokenization Overview
Color System
Spacing System
My design process aligns project goals with business needs, crafting solutions that are simple, intuitive, and impactful. By focusing on user feedback and addressing challenges strategically, I create user-centric experiences that are designed for everyone.
My design process aligns project goals with business needs, crafting solutions that are simple, intuitive, and impactful. By focusing on user feedback and addressing challenges strategically, I create user-centric experiences that are designed for everyone.
Flow
Deal Scheduler
Merchants can schedule deals linked with menu items in the form of redeemable, time-limited coupons. These coupons will appear on customers' home and search screens as well as restaurant profiles. Merchants have the flexibility to customize the coupons’ dates, hours, discounted menu items and discount rates.
Flow
Deal Scheduler
Merchants can schedule deals linked with menu items in the form of redeemable, time-limited coupons. These coupons will appear on customers' home and search screens as well as restaurant profiles. Merchants have the flexibility to customize the coupons’ dates, hours, discounted menu items and discount rates.
Flow
Deal Scheduler
Merchants can schedule deals linked with menu items in the form of redeemable, time-limited coupons. These coupons will appear on customers' home and search screens as well as restaurant profiles. Merchants have the flexibility to customize the coupons’ dates, hours, discounted menu items and discount rates.
Flow
Deal Scheduler
Merchants can schedule deals linked with menu items in the form of redeemable, time-limited coupons. These coupons will appear on customers' home and search screens as well as restaurant profiles. Merchants have the flexibility to customize the coupons’ dates, hours, discounted menu items and discount rates.
Flow
Deal Scheduler
Merchants can schedule deals linked with menu items in the form of redeemable, time-limited coupons. These coupons will appear on customers' home and search screens as well as restaurant profiles. Merchants have the flexibility to customize the coupons’ dates, hours, discounted menu items and discount rates.
Flow
Deal Scheduler
Merchants can schedule deals linked with menu items in the form of redeemable, time-limited coupons. These coupons will appear on customers' home and search screens as well as restaurant profiles. Merchants have the flexibility to customize the coupons’ dates, hours, discounted menu items and discount rates.
Flow
Deal Scheduler
Merchants can schedule deals linked with menu items in the form of redeemable, time-limited coupons. These coupons will appear on customers' home and search screens as well as restaurant profiles. Merchants have the flexibility to customize the coupons’ dates, hours, discounted menu items and discount rates.
The project delivered a successful MVP with a System Usability Scale (SUS) score of 91.5, highlighting its intuitive and user-friendly design. Over 100 screens and 40+ components were developed to create a comprehensive and scalable solution. As the lead designer, I guided a team of three, developed a cohesive design system, and ensured high-quality results were delivered on time.
Design in Numbers
System Usability Scale
Screens
Components
