Summary
Role: UI/UX Designer
Team: 1 Project Manager, 2 Directors, 4 developers
Methods: User Flows / Usability Audits / UI Design / UX Design / Mobile Design
Timeline: 2020
UASU Perks is an app where students can answer surveys/quizzes, attend events, and be rewarded with free stuff. The gamification of student engagement makes it a fun experience and brings awareness about what various services are offered by the Students’ Union. Moreover, it allows the UASU to interact and listen to students so that they can better advocate for them.
Originally, the gamification concept was developed by a group of University of Alberta students: Andy Li, Kean Weng Yap, Chase Buhler, Marissa Snihur, Ivan Tse, and James Jewitt for their CMPUT 401 class project. The Students’ Union then helped launched it as a beta web app in 2019 and then later released it as a mobile app for iOS and Android in 2020.
Note: I also created the branding and visual identity for UASU Perks, however this case study will cover only the UI/UX portion of it.
Deliverables
• Userflows
• Mobile wireframes
• Mobile Mockups
• Developer handoff
Goals
• Improve usability of completing tasks (filling out a survey, attending an event etc)
• Improve usability of redeeming prizes
• Restructure IA
Design Question
How might we create a sense of community and encourage student engagement among University of Alberta students through the Perks app?
Process
Pain Points:
• No cohesive branding system
• Information architecture of the web app was confusing and overwhelming
• Not optimized for mobile experience (ie. touch targets, responsive grid system)
Mini usability audit
Information Architecture
The way your website/app is organized plays a key part in setting up your users for success. The structure for the beta version of Perks was 1-level (everything was nested in a hamburger menu). My approach to making the IA better was based on grouping similar areas like Events, Surveys, and Quizes under the category Earn because those 3 types are related to earning points.
Revised IA
Persona Examples
Proto Personas
A series of proto personas were created by other team members. Referencing back to these personas became a guiding light on who I was designing for and personified the student body.
Userflow: User completes a survey
Userflow: User redeems a prize
User Flows
Classic pen to paper is usually my tool of choice when it comes to figuring out user flows quickly, but I've digitalized them for display purposes. A good place to start for any UX project is figuring out the happy path first and the edge cases will follow after.
Wireframes
Solution
Log In Screen
• Use of new UASU Perks brand (colour, typography, logo, illustrations etc.)
• Better colour contrast
Log In bonus
I decided to display the streak counter in a visual way. This is heavily influenced by video games as it incentivizes the user to come back everyday.
Home
• Utilizing a stickied nav bar (saves room, exposes areas for better findability)
• Cards are distinguished by icon type (better for scanning)
Event
• Better colour contrast of CTA button
• Cleaned up the UI in terms of spacing and hierarchy
• Added a Back button so it's easier to navigate back to the previous screen
Completing a quiz flow
Redeeming points for a prize flow
Impact
18,000+
unique users (as of 2022)
5,500
prizes redeemed yearly
$1M+
in student grants available (as of 2023)
11.5M points
earned by students (as of Fall 2024)
“[Perks] has made me feel more connected to campus and it has motivated me to share feedback on a lot of thought provoking issues surrounding student life as well as encouraged me to participate and attend several events happening on campus that I wouldn’t have otherwise.”
—Douglas, Undergrad UofA student
@uasu.alberta / Instagram
Reflection
Redesigning the UASU Perks app was an exciting challenge. With the global pandemic happening in 2020, like other universities, classes were virtual and so it was vital that our team shipped the UASU perks app in a timely manner. It was my first time working closely with developers and getting the launch something in the app store. I'm thankful to the Marketing and Development team at the UASU for trusting me with this project.
In retrospect, there are several areas I would improve:
Web Accessibility: My understanding of WCAG standards was very new, and I wasn't aware of certain exceptions with the guidelines. I think I tried my best to reach the low hanging fruit with proper colour contrast and touch targets, however, accessibility is so much more than that.
Design components as a design system: This would ensure consistency, provide an overview of different states, and have easier developer handoff.
User testing: Minor usability testing was completed but I was not included in the process and lacked knowledge of what was tested and how.
Dark mode: This was out of scope. If implemented, it would have given the user the choice to pick between dark mode and light mode depending on their preference.
iOS and Android: It would have been nice to distinguish and polish these 2 different platform experiences.
@uasu.alberta / Instagram