Relate: How an online interactive gaming platform can support community engagement
team
timeline
tasks
Dr. David Lee
Allison Truong
Kehua Lei
Jonathan He
Kamryn Callwood
Angelica Lopez
Yukti Malhan
Kevin Xie
Allison Truong
Kehua Lei
Jonathan He
Kamryn Callwood
Angelica Lopez
Yukti Malhan
Kevin Xie
Figma
8 months
Nielsen's Heuristic Evaluations
Usability Testing
Prototyping
Product Outreach
Pilot Study
Published Research Paper
Usability Testing
Prototyping
Product Outreach
Pilot Study
Published Research Paper
In January of 2021, I joined an HCI lab called Tech4Good, where I've been designing and researching for several projects that support the Santa Cruz community. I've been a part of the UX design team (summer 2021) and have been co-leading the UX research team (fall 2021) of Relate, a platform that uses online icebreaker games to get feedback from teams that are a part of a shared community. In addition, these games support team bonding, relationship building, and collective community engagement.
🤔 The problem:
The current model of collecting feedback, eliciting preferences, and brainstorming with team members is cumbersome and time consuming, like Google surveys, using social media, or receiving verbal feedback.
💡 The solution:
Creating interactive games allows communities to collect valuable feedback from teams, while teams have worked together to contribute their ideas, decisions, and thoughts about their community.
🤔 The problem:
The current model of collecting feedback, eliciting preferences, and brainstorming with team members is cumbersome and time consuming, like Google surveys, using social media, or receiving verbal feedback.
💡 The solution:
Creating interactive games allows communities to collect valuable feedback from teams, while teams have worked together to contribute their ideas, decisions, and thoughts about their community.
background
How did we design and research our product?
I joined the UX design team in the summer of 2021, where our team redesigned and created new interfaces for the entire Relate platform based on the past UX research team's evaluations. Our redesigns were iterated on with the heuristic evaluation violations the UXR team found in mind, and our new designs expanded upon Relate's overall goal to support community engagement-- all to be handed off to the development team to be coded in the fall.
After designing for Relate, I began leading the UX research team in the fall, where we evaluated the updated platform using Nielsen's heuristic evaluations and are currently outreaching for users to test out the developed platform. With our pilot users, our team will conduct a study to test the usability, feasibility, and usefulness of the platform. We are also in the process of writing a research paper to be submitted for publication in Winter '22.
Iteration & Design
how should we iterate Relate?
To efficiently iterate on and design new interfaces for Relate, Allison (co-designer) and I had to meet with stakeholders and created a design brief to understand the different goals and needs Relate had to achieve during our ten-week design period.
In order to grasp the UX issues the former Relate platform had and make sure the new platform would stay user-centered, our design team reviewed the user research team's comprehensive usability report and presentation, as well as their report on the 39 UX violations found (derived from Apple's Essential Design Principles and Nielsen's Heuristics).
In order to grasp the UX issues the former Relate platform had and make sure the new platform would stay user-centered, our design team reviewed the user research team's comprehensive usability report and presentation, as well as their report on the 39 UX violations found (derived from Apple's Essential Design Principles and Nielsen's Heuristics).
view usability testing presentation
After reviewing the research team's data, Allison and I understood that the main UI/UX issues with Relate included:
❌ Visibility of system status: no indication of error within the platform when a user fails to complete a task (e.g. submitting a form)
❌ Affordances: users are unable to complete certain tasks when setting up an activity due to missing buttons (e.g. deleting a team)
❌ Wayfinding: users are unable to navigate the interface properly due to missing buttons (e.g. back button)
❌ Oversaturated UI: too much text on each screen that is too big and takes up too much space, causing readability issues
❌ Inconsistent UI: the fonts and colors used are inconsistent across all interfaces
❌ Visibility of system status: no indication of error within the platform when a user fails to complete a task (e.g. submitting a form)
❌ Affordances: users are unable to complete certain tasks when setting up an activity due to missing buttons (e.g. deleting a team)
❌ Wayfinding: users are unable to navigate the interface properly due to missing buttons (e.g. back button)
❌ Oversaturated UI: too much text on each screen that is too big and takes up too much space, causing readability issues
❌ Inconsistent UI: the fonts and colors used are inconsistent across all interfaces
low fidelity wireframes
In order to collaborate efficiently and incorporate all of our ideas, the design team independently sketched out low fidelity wireframes, held a group discussion where we articulated our design decisions, and merged our ideas to turn into high fidelity wireframes.
This process allowed the team to have ownership over ideas, work on communicating why certain features or flows are important, and practice trading-off these features and flow ideas.
This process allowed the team to have ownership over ideas, work on communicating why certain features or flows are important, and practice trading-off these features and flow ideas.
high fidelity wireframes
After coming to an agreement with the UI (e.g. fonts & colors) and the general layout of the main screen (the dashboard), the team got to work in designing the entire platform (setting up an activity, survey forms, and survey response views).
We ended up designing a user-centered platform that addressed the previously mentioned user issues and successfully designed a new Relate: one that easy to navigate, aesthetically clean and minimalistic, consistent, and intuitive for all users.
We ended up designing a user-centered platform that addressed the previously mentioned user issues and successfully designed a new Relate: one that easy to navigate, aesthetically clean and minimalistic, consistent, and intuitive for all users.
design reflections
Our deliverable included an iterated and updated version of Relate based on the user research team's findings and the goals of Relate's stakeholders.
Specifically, we improved on:
✅ Making tasks within the platform more clear to the user
✅ Adding necessary buttons and assets that will allow users to navigate the platform with ease
✅ Condensing the overall copy and clutter, making a more clean and consistent interface that eases the user's cognitive load
We aimed to design a user-centered platform that is: 1) intuitive, 2) makes collecting feedback easier, and 3) encourages people to engage with their community in an engaging and authentic way.
Our designs have been handed off to the development team and are currently being brought to life!
Specifically, we improved on:
✅ Making tasks within the platform more clear to the user
✅ Adding necessary buttons and assets that will allow users to navigate the platform with ease
✅ Condensing the overall copy and clutter, making a more clean and consistent interface that eases the user's cognitive load
We aimed to design a user-centered platform that is: 1) intuitive, 2) makes collecting feedback easier, and 3) encourages people to engage with their community in an engaging and authentic way.
Our designs have been handed off to the development team and are currently being brought to life!
User Research
heuristic evaluations
As we know, product design is a non-linear, iterative process. Although Relate had undergone multiple tests and had been redesigned, there were new interfaces to be evaluated!
As the lead designer for the redesign, I had the unique opportunity to lead the new user research team for Relate. Similar to what the previous team did, I led my team through evaluating the platform using Nielsen's Heuristics.
My team spent two weeks evaluating Relate and found a total of 53 violations, rated them by severity using a scale of 0 (least severe) to 4 (most severe), wrote up a summary of recommendations for the next round of iteration, and created a presentation of our findings to present to the design team.
As the lead designer for the redesign, I had the unique opportunity to lead the new user research team for Relate. Similar to what the previous team did, I led my team through evaluating the platform using Nielsen's Heuristics.
My team spent two weeks evaluating Relate and found a total of 53 violations, rated them by severity using a scale of 0 (least severe) to 4 (most severe), wrote up a summary of recommendations for the next round of iteration, and created a presentation of our findings to present to the design team.
Having the opportunity to spearhead the research side of product design was a fruitful experience. I learned several UX principles, how to articulate designs in a way that centers the user, and how design goes beyond the aesthetics.
I gained plenty of UX research skills, such as conducting a comprehensive heuristic evaluation on an entire product, extensively assessing and analyzing data, recommending UX design solutions based on the found data, and collaborating with the design team.
I gained plenty of UX research skills, such as conducting a comprehensive heuristic evaluation on an entire product, extensively assessing and analyzing data, recommending UX design solutions based on the found data, and collaborating with the design team.
pilot study
After evaluating the platform internally, my team began to outreach to different organizations that would be willing to: 1) become pilot users of Relate and 2) allow us to observe the feasibility and usability of the platform via cognitive walkthroughs.
In order to effectively outreach and make Relate attractive to potential users, a team member and I worked on creating a slide deck that highlighted the value of our product. This allowed me to step outside of designing and researching to really reflect on the core impact and contribution of Relate. I found myself constantly asking, "How is Relate novel? Why do people want to use it? How can it help them?"
In order to effectively outreach and make Relate attractive to potential users, a team member and I worked on creating a slide deck that highlighted the value of our product. This allowed me to step outside of designing and researching to really reflect on the core impact and contribution of Relate. I found myself constantly asking, "How is Relate novel? Why do people want to use it? How can it help them?"
view full slide deck
11/04/21: This study is currently in progress, so no concrete insights have been formed. We are currently outreaching to gather pilot users to evaluate the usability and value of the platform.
Want to read more?
This study is ongoing and our research paper will be submitted for publication by Winter 2022. Check back later to see our progress!
like coffee or boba?
...or have any work related opportunities?
