.png){kind=small}
Bubble Rewards
UX Design / Usability Testing / Figma
Role: UX Designer
Duration: 5 Months
Tools Used: Figma, Google Docs, Google Sheets, Slides, Padlet, Mural
PROJECT OVERVIEW
THE PROBLEM: Bubble tea chains each have their own app and reward system that can be confusing to make use of as each shop's app is different and each rewards system is unique.
THE GOAL: To create an app that streamlines the use of loyalty rewards across multiple bubble tea chains to make collecting points and redeeming rewards easier.
RESPONSIBILITIES: Conducting interviews and research, facilitating usability test sessions, creating wireframes, low and high fidelity prototyping, design iteration.
UNDERSTANDING THE USER
USER RESEARCH: SUMMARY
Firstly, I conducted user interviews to get a better understanding of users' perspectives and experience with current bubble tea apps. A user group that I discovered to be an important target market for the Bubble Rewards App is low-income earning students who would benefit from any opportunity to make their bubble tea purchases cheaper.
I also conducted a competitive audit and was surprised by how few Bubble Tea chains have apps. This demonstrated a market gap/opportunity for the Bubble Rewards App to potentially partner with Bubble tea chains that do not have a rewards app.
USER RESEARCH: PAIN POINTS
1
TIME
Bubble tea customers want to get their bubble tea and go as quickly as possible. Any hindrance that extends the time to get a bubble tea is a detriment to the user experience.
2
MONEY
Bubble Tea is already expensive and they only continue to increase in price.
3
EASE OF USE
Current Bubble Tea Apps require different and complex processes to get to a virtual rewards card to scan. This can make collecting reward points a hassle, time-consuming, and therefore not worth the time.
PERSONA
I created a user persona to gain a better understanding of user needs throughout the design process.
PROBLEM STATEMENT: Manuel Manson is a student who needs an effective way to save on bubble tea and use bubble tea deals because Manuel loves bubble tea but also has a tight budget as a student.
MANUEL MANSON
Manuel is a third year University student at the University of British Columbia studying Marketing. Manuel loves eating all sorts of food when going with friends and bubble tea it not an exception. Being a student, Manuel has a limited budget so he takes advantage of any promotion or deal that makes his cravings less strenuous on his wallet.
GOALS
- To excel at school with minimal effort.
- Have a good balance between social life and school life
- Save money on miscellaneous expenses, especially on food
Frustrations
- "Man, inflation is crazy nowadays"
- "I don't even bother using rewards apps because scanning a code from my phone can be so confusing"
- "I'd want the process of scanning to be quick, I feel a sudden pressure when I go through the app in front of the cashier"
USER JOURNEY MAP
Manuel Manson's user journey demonstrates opportunities in developing useful features for target users.
STARTING THE DESIGN
PAPER WIREFRAMES
The iterative process started with creating multiple versions of each key screen with paper sketches to determine how to best address user pain points in the most efficient way. For the home screen, I was focused on how to make the task of scanning a card accomplishable with 1 step. Another facet I was focused on is how to make redeeming and applying a card highly distinguishable to remove confusion
DIGITAL WIREFRAMES
I continued to reflect on the best features of the sketches, the initial feedback, and user research when creating the digital wireframes
Rewards cards are seen in the home screen for easy access
"Scan Card" Button makes scanning for points at the time of purchase quick and easy
Home screen
Card screen
Multiple points of access for scanning a card
Redeemable rewards can be applied before scanning
LOW-FIDELITY PROTOTYPE
The lo-fi prototype features important user flows such as scanning a card, adding a card, applying rewards, and searching for a nearby bubble tea shop.
USABILITY STUDY
I conducted a moderated usability study to evaluate the effectiveness of the prototype and identify major pain points a user encounters when completing key tasks.
The Key Performance Indicators for this study was:
1. How much time does a user spend opening and scanning a card
2. How often do user get stuck trying to complete a task
USER TASKS
1. Create a profile
2. Select a card to scan
3. Locate a nearby bubble tea shop to navigate to
4. From the home screen, apply a coupon to your card to scan
USABILITY STUDY: FINDINGS
Round 1 Findings
1. Users want to make points redemption quick
2. Users want to know what bubble tea shops are in the area
3. Users want effective ways to make Bubble Tea purchases cheaper
Round 2 Findings
1. Completion of scanning a card is not defined
Card Scanning Screen
"Did the card scan? I can't tell"
?
2. Users often lose track of task path
"Where do I go from here?"
3. Not all buttons are functional
"Shouldn't I be able to press the location icons?"
.png)
STARTING THE DESIGN
BRAND & DESIGN GUIDELINES
I created this sticker sheet so that the look and feel of the mockup is consistent.
MOCKUPS
High-fidelity mockups were developed after multiple rough iterations. The mockup features animations for scrolling between cards, finding bubble tea locations, and scanning a card. This eliminates the static-look felt from the lower fidelity prototypes. The mockups especially addresses the feedback raised by the users.
BEFORE
AFTER
.png)
Home Screen
Card Scan Confirmation
SECOND USABILITY STUDY
The second usability study revealed user pain points regarding search customization and the accessibility to the rewards card from the rewards shop.
BEFORE
AFTER
Search Customization
Rewards Card Accessibility from Shop
FINAL MOCKUPS
ACCESSIBILITY CONSIDERATIONS
1
Uses icons to make navigation bar easier to use
2
Colour is non-essential to using the functions of the app
3
Uses accessibility-friendly animation that helps users in using app features
GOING FORWARD
TAKEAWAYS
IMPACT: The app justifies a need for making Bubble tea rewards processes quicker and easier to use and solves this need via a unified one-step system for all Bubble Tea shops in one place
WHAT I LEARNED: I learned that no matter how good I find the design, there is always room to iterate and improve. I also discovered the importance of applying user feedback yet still have agency in choosing what to leave out and focus on more major areas that require iteration
NEXT STEPS
1
Conduct another round of usability studies to further justify the need for features and address current pain points
2
Take feedback from a new usability study and find better solutions to make applying and redeeming rewards faster and easier
3
Present to UX Design friends from TD for design critique