R'Wallet is a prototype app designed during the UCR Cutie Hackathon 2022-2023 that acts as a convenient and efficient ID replacement for the students of UCR with various other functions that assist students in school navigation.
I came up with the idea to design R'Wallet and helped create multiple high-fidelity frames to include in the app. I implemented interactions to parts of the final frames and helped write the demo script during the 12-hour hackathon.
Josalyn Chow, Anjaline Singh, Betty Hoang
Figma, Procreate
In case students forget their physical ID card, they access their R'card online to check-in to facilities and make purchases. Students can also check in to school events using their online ID without having to wait in long lines on campus.
Access your student ID and school events.
Access your student ID profile and resources.
By clicking on their profile, students can access all the UCR services, emergency numbers, and emails provided on the back of their R'card.
For increased efficiency and rushing students, they can mobile order their meals from the dining options offered on campus. After placing their order, they can pay with their mobile R'card.
Access HUB dining across the UCR campus.
Access your transaction history.
Students can view their transaction history regarding any purchases they make through dining services, the bookstore, and more using their mobile R'card. When they run low on dining dollars or bear bucks, a form is implemented that allows students to replenish their card.
The inspiration for this concept arose when we noticed that UCR utilized multiple platforms to manage student life, which became a hassle for students to search and login to the various websites used each time as well as a struggle to keep track of where all the information was located. In addition, requiring students to carry their physical R'cards in order to check-in for utilities and attend events often created confusion and inefficiency.
While student self-services corresponds with R'web. checking meal swipes or dining dollar balance is located on R'card services, and accessing the student recreational center requires the UCRSRC app.
Locating different online platforms to access student-related services is difficult and confusing.
Requiring physical R'cards to check-in to school events is unorganized and inefficient.
Some students our team interviewed…
Long lines stretch across campus while ASPB staff check physical student R'cards that allow them to obtain wristbands for school events.
Forgetful students without physical R'cards cause delays and lag the lines.
Wristband pickup times often conflict with student schedules, making it difficult for students to present their R'cards.
Created confusion leads to students to leave many event-related questions and comments under the UCR ASPB Instagram account.
"The lines for the ASPB school events are so long I have to wait up to an hour sometimes, and when I forget my R'card, I have to go all the way back to my apartment! It can be really annoying."
"I tend to forget where I'm able to check for how many dining dollars I have left because it's not like it's a commonly used website. I only login into R'card when it's necessary."
Early Stage Brainstorm
Information Heirachy
Low-Fidelity Wireframes
Design System
Color Scheme
Logo
Typography
After deciding on our track concept, our team utilized FigJam to brainstorm the features we wanted to include in our prototype.
#3D78DC
#5EA6FF
#93C3FF
#A9CFFF
#ECF3FF
#FFD371
Inter Regular
Inter Medium
Inter Semibold
Oswald Medium
R’Wallet
Icons
Two-Factor Authentication or Face ID Login
Do it all in one place.
Check-in anywhere.
The online R'card on the homepage can be used to check-in to any facility or school-hosted events and make any purchases on campus.
Utilize resources.
All major UCR emergency emails, numbers, and services are located in the profile section of the app.
Mobile order meals.
Online R'cards on the homepage can be used by rushing and busy students to mobile order from the dining services in the HUB.
View purchases.
Use the transaction history section to see past purchases and meal swipe or cash balance. Forms to reload money are available.
Homepage Student ID Check-in
UCR Resources & Services
Mobile Order
Transaction History
Challenges
As my first design project and first hackathon, one of the biggest challenges faced was time management and utilizing Figma fully. There were many features that our team wanted to include in the final project, but the time limit restricted us from being able to implement every detail and instead forced us to focus on the necessities that would make the app the most efficient and functional. In addition, it was my first time creating a flow and building interactions on Figma, adding to the pressures of needing to learn the interaction tool under the time constraint.
Future
Despite the challenges our team was posed with, it was a beneficial growing and learning experience as an aspiring UI/UX designer. By the end of the project, my team and I had an increased understanding and comfortability in using the provided Figma tools. For the future of R'Wallet, my team and I would like to develop more functions for our prototype and spend time perfecting the smaller details that may need fixing so the app can reach full potential.
Reach me at josalynchow@gmail.com.
Try it out yourself!
Watch our demonstration!