OneCard Mobile Application

Re-imaging the university Onecard experience as a modern system meeting student needs for accessing their funds and campus locations.

OneCard Mobile Application

Re-imaging the university Onecard experience as a modern system meeting student needs for accessing their funds and campus locations.

Project Overview

Re-imaging the university Onecard experience as a modern system meeting student needs for accessing their funds and campus locations. I was the UX Lead primarily, but with extensive UI experience, I played a key role in high-fidelity designs, prototyping, and creating the design system.

Re-imaging the university Onecard experience as a modern system meeting student needs for accessing their funds and campus locations. I was the UX Lead primarily, but with extensive UI experience, I played a key role in high-fidelity designs, prototyping, and creating the design system.

My Role

Lead Researcher, Designer

Lead Researcher, Designer

Team
Project

Academic, 4 months

Academic, 4 months

Tools
Miro, Canva, Figma, Google Form, Zoom

x3

Rounds of Testing

10

Participants

Group Image, for class presentation
Group Image, for class presentation
Group Image, for class presentation
User Insight
User Insight
“...this app is fantastic to see everything in one place...”

“...this app is fantastic to see everything in one place...”

Discovery
A unified platform that is accessible at any point for students to manage all OneCard related services.
A unified platform that is accessible at any point for students to manage all OneCard related services.

We began by mapping the current system with a service map, identifying four separate platforms students must navigate for profile management, course selection, financial management, and information gathering. This fragmented system often leaves students struggling to remember which platform provides specific services. Some services overlap across platforms, redirecting users due to an ongoing university system update, further adding to the confusion. As a result, many students rely on trial and error to complete tasks or locate information, with some avoiding services altogether.

Persona: Emily, a traditional student, uses the OneCard to access buildings and facilities. Her goals include navigating the campus and accessing resources. Her challenges involve limited awareness of access information and the inability to spend time researching errors. Her motivation for using this service is to feel confident while accessing the campus.
Persona: Emily, a traditional student, uses the OneCard to access buildings and facilities. Her goals include navigating the campus and accessing resources. Her challenges involve limited awareness of access information and the inability to spend time researching errors. Her motivation for using this service is to feel confident while accessing the campus.
Persona: Emily, a traditional student, uses the OneCard to access buildings and facilities. Her goals include navigating the campus and accessing resources. Her challenges involve limited awareness of access information and the inability to spend time researching errors. Her motivation for using this service is to feel confident while accessing the campus.
Planning
Comparing other digital OneCards, enabling students to access buildings, receive real-time campus updates, and manage funds via digital wallets.
Comparing other digital OneCards, enabling students to access buildings, receive real-time campus updates, and manage funds via digital wallets.

To design the OneCard app, we analyzed the system’s key features and identified fund management and building access as the most frequently used services by students. We pinpointed critical gaps and compiled a detailed list of issues to address, spanning minor inconveniences to larger systemic challenges. Drawing inspiration from best practices in other applications, we aimed to align our solution with existing student mental models for a seamless user experience.

Diagram showing a high-level view of the new task flow, with a focus on the sequence of information displayed to the user.
Diagram showing a high-level view of the new task flow, with a focus on the sequence of information displayed to the user.
Diagram showing a high-level view of the new task flow, with a focus on the sequence of information displayed to the user.
Modernizing the university fund management and building access features.
Modernizing the university fund management and building access features.

The Wilfrid Laurier OneCard is a versatile tool for students, serving as identification, a payment method, and a gateway to university services. However, its current design falls short in addressing inclusivity and providing user-friendly management features. Our goal is to create a modern, mobile application that supports on-the-go functionality, streamlines planning and task completion, and enhances students' confidence in the Laurier brand.

Understanding Client Needs: Designs should follow Laurier's design system and integrate seamlessly into the larger ecosystem.
Timely Communication: Notifying users of key steps, changes, or actions is essential to building trust and minimizing confusion.
Focus on User Experience: The current UI/UX fails to prioritize user needs, with outdated flows that violate fundamental UX principles.
Quality & Attention to Detail: Duplicate, missing, and scattered information make it difficult for users to find what they need.
Flexibility & Adaptability: The two main on-the-go tasks aren't mobile-friendly, reducing the product's flexibility and requiring extra effort to complete.
Innovative Design: Students have outgrown clunky forms, and desktop only design. Let Laurier products match their academic excellence.
UX Research Results
75% of participants mentioned they would love to use their phone for building access & fund mangement.
75% of participants mentioned they would love to use their phone for building access & fund mangement.
Most Liked Features

Minimalist design: 80% of students had no trouble completing tasks.

Fund management: Of the users currently using the fund management feature 50% agreed the app would greatly enhance their experience.

Building access: All students agreed this would benefit them.

User’s Suggestions

Clear Navigation: Make the structure of the app more clear, switching between pages caused confusion for 30% of users.

System & Real World Match: Improving the visual language to be more accessible, using clear icons and color hierarchy to guide users.

Live Updates: Students mentioned this as a desired feature to make purchasing decisions easier.

UX Research Results
We tested our mid-fidelity designs with 10 users, sought input from the OneCard office, and presented our findings to 20 classmates for feedback.
We tested our mid-fidelity designs with 10 users, sought input from the OneCard office, and presented our findings to 20 classmates for feedback.
Mid-Fi
Mid-fidelity design of a dashboard displaying the user's current account balance, a list of recently accessed locations, and a section for important updates, all presented in a visually organized layout.
Mid-fidelity design of a dashboard displaying the user's current account balance, a list of recently accessed locations, and a section for important updates, all presented in a visually organized layout.
Mid-fidelity design of a dashboard displaying the user's current account balance, a list of recently accessed locations, and a section for important updates, all presented in a visually organized layout.
Hi-Fi
High-fidelity design of a dashboard displaying the user's current account balance, a list of recently accessed locations, and a section for important updates, all presented in a visually organized layout.
High-fidelity design of a dashboard displaying the user's current account balance, a list of recently accessed locations, and a section for important updates, all presented in a visually organized layout.
High-fidelity design of a dashboard displaying the user's current account balance, a list of recently accessed locations, and a section for important updates, all presented in a visually organized layout.

8/10 users found the dashboard intuitive.

40% of users were confused by 'Campus Access' title. And did not find the shortcut useful.

In the ‘Updates’ section, participants wanted to see the university news or learn about the OneCard.

UX Research Results
We conducted A/B testing for the confirmation screen, and most participants preferred Design B for its clear information, intuitive navigation, and flexibility.
We conducted A/B testing for the confirmation screen, and most participants preferred Design B for its clear information, intuitive navigation, and flexibility.
Mid-fidelity design of the Digital OneCard scanning page, featuring a scannable barcode, with instructions for use and a clean, minimal layout.
Mid-fidelity design of the Digital OneCard scanning page, featuring a scannable barcode, with instructions for use and a clean, minimal layout.
Mid-fidelity design of the Digital OneCard scanning page, featuring a scannable barcode, with instructions for use and a clean, minimal layout.
Design A

Feedback Toast Missed

Unexpected shift to digital OneCard from fund management.

Users felt like this was a forced action.

Mid-fidelity design of a check-out confirmation screen, showing the amount added, current balance, and two buttons: one for 'Confirm Purchase' and another for 'Return Home.
Mid-fidelity design of a check-out confirmation screen, showing the amount added, current balance, and two buttons: one for 'Confirm Purchase' and another for 'Return Home.
Mid-fidelity design of a check-out confirmation screen, showing the amount added, current balance, and two buttons: one for 'Confirm Purchase' and another for 'Return Home.
Design B

Clear feedback message.

Isolated task completion was preferred.

Users appreciated the breakdown of added funds, current funds.

High-fidelity design of the purchase confirmation screen, displaying the amount added to the balance, the updated account balance, and two clear buttons: one to 'Make Another Purchase' and one to 'Return Home.
High-fidelity design of the purchase confirmation screen, displaying the amount added to the balance, the updated account balance, and two clear buttons: one to 'Make Another Purchase' and one to 'Return Home.
High-fidelity design of the purchase confirmation screen, displaying the amount added to the balance, the updated account balance, and two clear buttons: one to 'Make Another Purchase' and one to 'Return Home.
Design B (Final Design)

Branded

Purchase button easier to reach.

Content hierarchy established.

Fund Management
We designed an intuitive and efficient form to enable seamless on-the-go student transactions.
We designed an intuitive and efficient form to enable seamless on-the-go student transactions.

Currently students have to go to the Laurier website, find the fund management page and fill out a 10 step form to add funds. Our design reduces the steps to just two, utilizing saved information and adding intuitive feedback like confirmation messages and displaying their balance.

Dashboard
Dashboard
High-fidelity design of a dashboard displaying the user's current account balance, a list of recently accessed locations, and a section for important updates, all presented in a visually organized layout.
High-fidelity design of a dashboard displaying the user's current account balance, a list of recently accessed locations, and a section for important updates, all presented in a visually organized layout.
High-fidelity design of a dashboard displaying the user's current account balance, a list of recently accessed locations, and a section for important updates, all presented in a visually organized layout.
Payment Form
Payment Form
High-fidelity design of the purchasing screen, showcasing a clean layout with product details, pricing, payment options, and a prominent 'Confirm Purchase' button.
High-fidelity design of the purchasing screen, showcasing a clean layout with product details, pricing, payment options, and a prominent 'Confirm Purchase' button.
High-fidelity design of the purchasing screen, showcasing a clean layout with product details, pricing, payment options, and a prominent 'Confirm Purchase' button.
Confirmation Screen
High-fidelity design of a purchase confirmation page, displaying a clear confirmation message, order summary, payment details, and a call-to-action button for additional options.
High-fidelity design of a purchase confirmation page, displaying a clear confirmation message, order summary, payment details, and a call-to-action button for additional options.
High-fidelity design of a purchase confirmation page, displaying a clear confirmation message, order summary, payment details, and a call-to-action button for additional options.
Transaction History
Students lack a reliable way to manage transactions, leading to distrust and a significant number opting out of the system after their first year.
Students lack a reliable way to manage transactions, leading to distrust and a significant number opting out of the system after their first year.

Students currently rely on the OneCard office or their personal financial accounts for accurate information. During testing, users found the transaction tracking feature highly appealing, though they deemed the filter function less useful. They valued the ability to view individual transactions and report incorrect charges directly through the app. This feature fosters trust between students and the OneCard office by offering transparency in refund procedures and account management.

Transaction History
Transaction History
Transaction History
Mid-fidelity design of the Transaction History page, featuring a list of past transactions with details such as date, amount, and description, displayed in a structured and user-friendly layout.
Mid-fidelity design of the Transaction History page, featuring a list of past transactions with details such as date, amount, and description, displayed in a structured and user-friendly layout.
Mid-fidelity design of the Transaction History page, featuring a list of past transactions with details such as date, amount, and description, displayed in a structured and user-friendly layout.
Transaction Filter
Transaction Filter
Transaction Filter
Mid-fidelity design showcasing the transaction filter open, with options to select date range, transaction type, and categories for refined search results.
Mid-fidelity design showcasing the transaction filter open, with options to select date range, transaction type, and categories for refined search results.
Mid-fidelity design showcasing the transaction filter open, with options to select date range, transaction type, and categories for refined search results.
Individual Transaction
Individual Transaction
Individual Transaction
Mid-fidelity design displaying the details of a single transaction, including the date, time, amount, and transaction description in a clean and organized layout.
Mid-fidelity design displaying the details of a single transaction, including the date, time, amount, and transaction description in a clean and organized layout.
Mid-fidelity design displaying the details of a single transaction, including the date, time, amount, and transaction description in a clean and organized layout.
Building Access
Implementing feedback messages for the building access system helps students resolve errors independently while reducing the OneCard office's workload by offering self-service options like deactivating or reporting a lost card.
Implementing feedback messages for the building access system helps students resolve errors independently while reducing the OneCard office's workload by offering self-service options like deactivating or reporting a lost card.

Student’s are often running to class in stress, fleeing the Canadian weather or simply chatting to friends. The ideal system would be one where they don’t have to think, they know when the door is unlocked. The current system provides feedback through terminal colors (red for denied access, green for granted, and blue for error), but most students in user testing were unaware of this. Our redesigned system achieved a 100% success rate in user testing, with all students expressing enthusiasm for this design.

Digital OneCard
Digital OneCard
Digital OneCard
Mid-fidelity design of the Digital OneCard interface with the settings dropdown open, displaying options for 'Deactivate Card' and 'Report Lost Card.
Mid-fidelity design of the Digital OneCard interface with the settings dropdown open, displaying options for 'Deactivate Card' and 'Report Lost Card.
Mid-fidelity design of the Digital OneCard interface with the settings dropdown open, displaying options for 'Deactivate Card' and 'Report Lost Card.
Access Denied
Access Denied
Access Denied
Mid-fidelity design of a Digital OneCard pop-up message displaying 'Door Locked,' featuring a straightforward layout with a lock icon for clarity.
Mid-fidelity design of a Digital OneCard pop-up message displaying 'Door Locked,' featuring a straightforward layout with a lock icon for clarity.
Mid-fidelity design of a Digital OneCard pop-up message displaying 'Door Locked,' featuring a straightforward layout with a lock icon for clarity.
Access Granted
Access Granted
Access Granted
Mid-fidelity design of a pop-up message indicating 'Door Unlocked,' with a simple layout and clear confirmation icon.
Mid-fidelity design of a pop-up message indicating 'Door Unlocked,' with a simple layout and clear confirmation icon.
Mid-fidelity design of a pop-up message indicating 'Door Unlocked,' with a simple layout and clear confirmation icon.
Holistic Design Thinking
Orientation Booklet: Guiding students through the OneCard app and system based on insights from user interviews.
Orientation Booklet: Guiding students through the OneCard app and system based on insights from user interviews.

Alongside the app, we also designed an orientation booklet to support new and international students in navigating the OneCard system. This booklet serves as a practical and impactful onboarding tool, providing clear guidance on essential services such as healthcare, course registration, and other critical resources. Distributed with the OneCard, it aims to simplify the student experience from the start.

Additionally, the university could adopt a proactive approach to addressing student concerns about fee breakdowns, fostering ensuring transparency.

Empowering students should be a central goal of the OneCard system. Many students currently spend significant time piecing together basic information, leading to frustrations that contribute to a less positive university experience. By embracing a holistic approach to system redesign—not limited to digital solutions—we can better meet students’ needs and significantly enhance their overall experience.

View Booklet

Cover page of the Laurier OneCard booklet, featuring the Laurier logo, a vibrant design, and the title prominently displayed.
Cover page of the Laurier OneCard booklet, featuring the Laurier logo, a vibrant design, and the title prominently displayed.
Cover page of the Laurier OneCard booklet, featuring the Laurier logo, a vibrant design, and the title prominently displayed.
Future Considerations
To continue making a meaningful impact on student lives, we envision this app becoming a central hub for information.
To continue making a meaningful impact on student lives, we envision this app becoming a central hub for information.

The app will include features such as screen reader support, high-contrast mode, and a language selector to accommodate diverse user needs. Usability enhancements will provide detailed service information pages and options for alternate campus access. Personalization tools will allow students to manage their funds, activities, and notifications with ease. Functional expansions, like mobile food ordering and contactless payments, will offer added convenience. To support sustainability, the app will provide digital receipts and eco-friendly prompts to reduce waste. Continuous improvement through in-app feedback and analytics will ensure the platform adapts to evolving student needs, remaining innovative and future-proof.

The app will include features such as screen reader support, high-contrast mode, and a language selector to accommodate diverse user needs. Usability enhancements will provide detailed service information pages and options for alternate campus access. Personalization tools will allow students to manage their funds, activities, and notifications with ease. Functional expansions, like mobile food ordering and contactless payments, will offer added convenience. To support sustainability, the app will provide digital receipts and eco-friendly prompts to reduce waste. Continuous improvement through in-app feedback and analytics will ensure the platform adapts to evolving student needs, remaining innovative and future-proof.

Group Image 3
Group Image 2
Group Image 4
Group Image 1

Conference Planning App

Empowering Indiegenous youth to sign up and begin their career planning.

Saas Reporting Software

Make reporting intuitive and engaging, so caseworkers can spend less time on paperwork and more time connecting with participants

Get the Conversation Started

Thanks for stopping by! If you’re thinking, “Wow, I need to work with this person,” you’re absolutely right. Let’s make it happen—reach me on LinkedIn or drop me a line. I promise I’m as cool as this footer makes me sound. 😎

Medium

LinkedIn

Download Resume

Get the Conversation Started

Thanks for stopping by! If you’re thinking, “Wow, I need to work with this person,” you’re absolutely right. Let’s make it happen—reach me on LinkedIn or drop me a line. I promise I’m as cool as this footer makes me sound. 😎

Medium

LinkedIn

Download Resume

Get the Conversation Started

Thanks for stopping by! If you’re thinking, “Wow, I need to work with this person,” you’re absolutely right. Let’s make it happen—reach me on LinkedIn or drop me a line. I promise I’m as cool as this footer makes me sound. 😎

Medium

LinkedIn

Download Resume