Role
UX Design
UX Research
Animation
Timeline
March 2020 - June 2021
Tools
Figma
Adobe After Effects
Team
Design Team (4)
Research Team (5)
Professor David Lee
How can we capture the emotions of receiving a gift and translate it into a digital realm?
UC Santa Cruz's Tech4Good Research Lab is dedicated to exploring the intersection of computational systems and social interaction.
When the pandemic hit in March 2020 the Tech4Good Research Lab wanted to find a way to show thanks and uplift members of the community in a safe, socially distanced manner.
The Problem:
Finding a way to normalize sharing thanks in the workplace where it can be forgotten and ignored due to lack of recognition culture.
The Solution:
A platform that allows users to easily and efficiently share praise for others to help cultivate the habit of expressing gratitude within communities.
Step One: Define
User Research
Going into this project we had two distinctly different users to design for, the card creators and the card receivers.
Key Focuses
Based on this, we narrowed down two key priorities to hone in on.
Simplicity: Professors should have the least amount of blockers possible in accessing the cards
Creating an immersive experience: How can we make something digital have the excitement of an in-person interaction?
Step Two: Ideate
Initial Designs
With this in mind we started working on some user flow sketches playing into the idea of a stack of cards wati
Visual Designs
The first designs for this project incorporated the most popular landmark of Santa Cruz in the background (the beach). We wanted the user to feel excited and welcomed to use Gratitude to customize their card decks for different guests.
Though these designs well represented Santa Cruz, they were missing a sense of human touch, so we began iterating a new design.
In the next version, we added customizable header images to each thank you card.
This allows users the ability to add elements they felt matched the thank you card best and show the receiver the diversity within the cards.
We also chose to omit the beach theme since it was overpowering and caused constraints for customizability.
Onboarding Experience
In times where we are socially distanced we want to show that emotionally we are still close.
Making it a goal to harvest as many of the emotions of a physical thank you as possible into the receiving card experience we decided to create an animation that combined the feeling of opening a present with the feeling of being flooded with notifications on social media.
To help curate these emotions I animated an extravagant opening animation. We decided to show the receiver small snippets of the messages with a preview of the person giving the comments to show the faces behind the gesture.
It was my first time animating something of this sort but having some visuals was immensely helpful for showing engineering what the goal for our product was.
Step Three: Evaluate
Usability Testing
Around 3 to 4 months after handing off our designs to the engineering team, we began our second phase of user research. The research team led heuristic evaluations and usability testing of the deployed designs to assess our previously made design decisions. We went through and labeled these findings with our initial wireframes.
Key Findings:
"Where do the cards save to? It's a little confusing I can't really tell..."
Overall from the evaluation, 24 violations were found from the severity of 1-5. In specific we found three key categories to be our key focuses.
User Control and Freedom
Visibility of System Status
Flexibility & Efficiency of Use
These are what we chose to focus on for our next round of iterations in the designs.
Step Four: Iterate
Iterating the User Flow
After reviewing the evaluation violations, I found a common theme of wayfinding issues. To reevaluate I decided to create a customer journey map with my team to help pinpoint some areas of vagueness.
Creating this map as a team helped us start raising questions and brainstorming some new user flows.
Gallery mode
After reviewing the evaluation violations, I found a common theme of wayfinding issues. To reevaluate I decided to create a customer journey map with my team to help pinpoint some areas of vagueness.
Creating this map as a team helped us start raising questions and brainstorming some new user flows.
We started off with a whiteboarding session of how this new gallery mode could function and then started walking through low fidelity versions of what this could look like.
A feature we specifically found helpful was the gallery mode to quickly view individual cards. This among a couple other changes were what we chose to incorporate in the next version of our designs.
Final Solutions:
Onboarding Experience
Majority of this project was worked on during the COVID-19 pandemic. We wanted to replicate the feelings of opening an unexpected gift from a friend as virtually as we could. What better way than through an extravagant opening animation!
Customizable Views
We wanted the viewing experience to be as tailored to the receiver as the cards themself. With three different views, the card receiver can choose to skim a large deck of cards or individually read and cherish each card based on their preferences.
Cherishing Old Decks
One of the new features we added after user testing is a review decks page. This is a space for users to view all the previous decks they have received and think back to all the wonderful times they've been appreciated for their hard work.
Takeaways and reflections
Iterate, iterate, iterate!
Gratitude is one of the longest projects I worked on in Tech4Good it taught me the value of constantly iterating to reach product and user goals.
I also learned I love to constantly try new things and push the limits of my design capabilities.
Animating was something outside of my comfort zone looking back I'm glad I pushed my limits to help our broader team understand the UX goals of this product.
Currently, this project is in phase 2 of being deployed and I'm excited to see the UCSC community using it in the future!