Skills:

UI/UX Design

Digital Prototyping

Site mapping

Wireframing

_

Principle for Mac

Adobe Creative Suite

 

Skills:

UI/UX Design

Digital Prototyping

Site mapping

Wireframing

_

Principle for Mac

Adobe CC

 

Skills:

UI/UX Design

Digital Prototyping

Site mapping

Wireframing

_

Principle for Mac

Adobe CC

 

Skills:

UI/UX Design

Digital Prototyping

Site mapping

Wireframing

_

Principle for Mac

Adobe CC

 

Team:

Personal project

Summer 2018


 

 

Team:

Personal project

Summer 2018

3 Weeks

 

 

CLASSPORT UNIVERSITY COMPANION APP 


An All-in-one Companion App for College Student Services.

CLASSPORT UNIVERSITY COMPANION APP 

An All-in-one Companion App for College Student Services.

Classport is a mobile app that connects both worlds of mobile payments and student identification for universities. Students can pay for goods and services utilizing the apps mobile wallet and use fingerprint authentication to activate their student ID.

Problem

Problem &

Problem &

Goal

Goal

The current university debit card programs limit students on how they manage finances and pay for goods/services. Also, students have no incentive to use the debit card program outside of university only services. This can result in missed opportunities for local business partners and students looking to utilize the program.

Design a mobile app for universities that optimizes the college student services and purchasing experience across campus.

classport-final-01
classport-export-02
classport-final-03
classport-final-4
account-pg

Background Information

For this project, I am using the University of Oregon as a use case scenario.

UO uses a system called Duck Bucks (formally Campus Cash), which is a dollar-based program offered through ID Card Services that can be used at multiple locations across campus and at local businesses as an alternative to cash. Some insights about the program are the following:

1. There is a myriad of local business partners who gladly accept Duck Bucks on campus. Some bigger businesses include Subway, Chipotle, Panda Express, Starbucks and many more.

 2. Students can only make in-person deposits in 2 locations on campus (Knight Library and Erb Memorial Union building). In addition, students can only make deposits online via QuikPay account, a web-based payment system.

3. Students can only view their transaction history a couple ways, viewing their QuikPay account online or at the cash register monitor after a purchase. 

4. Students can only use Duck Bucks with an active UO ID card. Furthermore, about 25% of all current UO students have had to replace their UO ID card and 40% of those students have lost more than one. In 2018, that is a little under 5,000 students. The first initial card is free, but each replacement card costs $22.

Duck Bucks

(Image courtesy of the University of Oregon)

Survey

I created a survey in Google forms to gain insight about the needs among students who have experienced college student services. Students who responded to the survey came from different majors, backgrounds and ages, both current and alumni students at UO. We only had 9 responses, so I took a general consensus of the answers to better focus the scope of the project. 

I created a survey in Google forms to gain insight about the needs among students who have experienced college student services. Students who responded to the survey came from different majors, backgrounds and ages, both current and alumni students at UO. We only had 9 responses, so I took a general consensus of the answers to better focus the scope of the project. 

User Interviews

I interviewed both current students and alumni to have a more in-depth conversation about their college student services experience. Here are some highlights:

"I just ended up memorizing my student ID number because I couldn't keep track of my ID card. I paid for two replacements my sophmore year." - Peter, 21, UO Alumni

"I didn't even know that stores accepted Duck Bucks, I only use it at the computer labs to pay for printing." - Carly, 20, Current UO Student

"I mostly remember guesstimating how much I had in there (Duck Bucks account)." - Sam, 23, UO Alumni

Persona: Meet Sophie

persona-sophia

After conducting one-on-one interviews with students at UO, I had a better idea of the gap between college students and the student services provided at the university. 

Sophie is a 19-year-old business major from California at the University of Oregon. She is very outgoing and loves to explore campus shops with her peers. She has parted ways with her physical credit cards and uses a digital wallet for the convenience. After losing her student ID at a track meet, she decided to memorize her student number for the SRC to avoid paying the $22 card replacement fee. For printing assignments, she simply asks her peers to pay for her printing and copying needs and she pays them back later.

 

 

Conclusion

After research, I identified a number of opportunities within the current program that could use improvement.

Problem

  • Students are limited to how they access their Duck Bucks account. 
  • Students are not knowledgeable on where to spend their Duck Bucks. 
  • Students have no incentive to spend Duck Bucks for goods/services from local businesses when they can use a traditional payment methods instead.
  • 1 in 4 students will lose their UO ID card. Without a card, you cannot participate in the Duck Bucks program. 


Takeaways

  • Students would benefit from more accessibility to the program.
  • Students need to be educated about all the opportunities in the program.
  • Local businesses need a way to engage business from students.
  • Students would benefit from a digital student ID.

 

 

Concept

Classport will be a mobile companion application that helps students at universities bring the student service experience directly to their smartphone. It will it focus on 4 milestones specifically:

  • Digital wallet for accessible financial management with their university's debit program among other digital payment methods.
  • Digital scanner for hassle-free digital payment experience.
  • Dedicated screen for local merchants where they can connect with students through a loyalty program.
  • An authenticated digital student ID.  
classport-venn

Competitive Analysis: Mobile Payment Apps

I studied the features, colors, and overall language of the landscape of digital wallet apps available to gain knowledge how they presented themselves. I wanted to design an user interface that felt modern, friendly and familar but had a more playful touch. Dealing with financial systems is serious business so I thought I would offset that emotion by using a color system that incorporates a pastel palette and lighter tones.

quik-comp

Site Map

classport-site-map

Wireframe Explorations

After using the site map to break down how the app would navigate, I mocked up ideas on how each individual screen should look. Using a program called Balsalmiq helped me produce a rough visual very quickly to get a better sense of the aesthetics and features of the companion app. 

low-fi-wireframes

Final Design

Some of the aesthetics of the final concept changed quite a bit from the inital mock up but the features and milestones I highlighted earlier are still intact. Below are thoughts and details behind some of those changes.

 

 

Verification Process

Initially, I had the idea of using a digital passcode to enter in order to view the student ID. But instead, I opted to use a fingerprint authentication feature since most smartphones have that component built within in their operating system. Alternatively, students will still have the opportunity to access their student ID by entering their university student number.

Transaction Details

Using a hold down gesture, a transaction detail window will appear and users will have the opportunity to see specifics from a purchase or a deposit. From there, they will see details on time, payment type, amount, etc. Also, they have the options to dispute a transaction or contact the app if they have further questions. 

Rewards Program

The loyalty program will feature rewards and deals exclusive to students using Duck Bucks to redeem them. There is a social proof element to each deal from local merchants that day that details how many students have claimed each offer. This will drive awareness through  a sense of scarcity to exlusive deals. They can also add stores to a favorites tab.

Mobile Payments

Not only will students get to use the app like a mobile bank for Duck Bucks, but they will get to add and manage other credit cards as well. Students will naturally use the Duck Bucks program more if they are already using the app for mobile payments. This is especially true if there is an incentive from the rewards program. 

new-layout
classport1505x889

Selected Work

Classport University Companion AppUI/UX Design, Mobile App Design, Case Study

Pocket Parking Smartwatch AppUI/UX Design, Mobile App Design, Case Study

Camp Yakety Yak T-Shirt DesignGraphic Design, Typesetting

Storm-FIT Tech PonchoIndustrial Design, Case Study

hello@robinsonchan.com | © 2018 Robinson Chan. All Rights Reserved.