Compass Card App Design

UX/UI Design
Project Overview
This case study is an app design for Compass Card, a smart payment system for Metro Vancouver based public transit operated by TransLink.
Design Challenge
Daily commutes can get stressful. Without an easy way to track and add funds, how can a Compass Card mobile app alleviate user stress and create efficiency for customers who commute religiously?

User Problem

Customers currently rely on Compass Card’s online web portal to add new cards, load funds, and to view previous transactions on their account. Not only are users forced to navigate this portal, they are prompted to sign in each time for the sole purpose of accomplishing one objective. This is a major point for commuters because they have no convenient way of adding and tracking their funds.
Scope of Work
User research, application validation, persona creation, onboarding, job stories, user flows, interaction design, wireframes, protoyping.

Design Research

After conducting user research and speaking with users who commute on a daily basis, I discovered one common user behaviour. Many commuters confirm using their transit app for two main reasons: loading funds, and viewing card activity. Learning these use cases, I built high-level user flow charts to help frame my app design.

Design Solution

To design a mobile app for Compass Card users that combines the aforementioned use cases and to ultimately improve a user’s commute by simplifying their transit card management.

My goals were to create an app that will help commuters:

Onboarding

User onboarding serves as an integral part in Compass Card’s app design. As the concept implies, user onboarding is a fundamental process that eases the user into using an app on a comfortable level. And for some, it is to educate them on their first use, explaining features that are readily available to them. Narrowing my focus towards user onboarding allows me to remove redundancies that can improve the overall experience of a user’s commute. For example, by suggesting the action of adding a payment method early on, users can benefit from the convenience of a ready-to-pay app.

Homescreen

Designing for efficiency, Compass Card’s homescreen enables users to benefit from a simple “3-tap" process to easily load funds onto their transit card. By reducing the amount of taps, the time required for users to accomplish their objective is also minimized. Users no longer have to open their web browser, navigate, and sign in just to manually complete one simple task.

linkedin