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

Your Key to Effortless
Travel in Metro Vancouver

Your Key to Effortless
Travel in Metro Vancouver

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.

Challenge

Challenge

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.

Solution

Solution

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.

Design Process

Design Process

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.

Navigate at a Glance with an Intuitive User Flow

Navigate at a Glance with an Intuitive User Flow

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.

Wirerames

Wirerames

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.

Lookin’ Fresh!

Lookin’ Fresh!

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

How to use the
Grid System

How to use the
Grid 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.

High fidelity

High fidelity

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.

Outcomes and Insights

Outcomes and Insights

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

91.5

91.5

System Usability Scale

100+

100+

Screens

40+

40+

Components

Copyright © 2024 Philippe Gabriel Hernandez. All rights reserved.

Copyright © 2024 Philippe Gabriel Hernandez.

All rights reserved.

Copyright © 2024 Philippe Gabriel Hernandez. All rights reserved.