WorkAboutResume

Social Hero

The fun way to tackle social anxiety

Project Objective
Social Hero gamifies the process of tackling social anxiety through social "quests" that involve socializing, stepping outside one's comfort zone, and engaging in self-help practices. Inside the world of Social Hero, users can explore a virtual world, make friends, and personalize their characters to immerse themselves in a virtual self-improvement community.
Outcomes
Completed Figma prototype, supplementary research paper submission.
Client
UCSC Misfit Lab
Team
2 Researchers
2 Designers
My Role
Research
Visual Design
Interaction design 
Success Metrics
in progress :) 
Methods Used
Literature Review
Interviews
Usability Testing
Group-Ideation
Effort-Impact Analysis
Timeline
October 2023 - December 2023
Problem
Socializing isn't easy!
Talking to strangers is hard! Being university students (and introverts), our team found it difficult to make friends in unfamiliar environments, and from our research, we are far from the only ones that feel this way: recent studies report that more than 1 in 3 surveyed participants meet the criteria for nontrivial social anxiety.
[1] Jefferies P, Ungar M (2020) Social anxiety in young people: A prevalence study in seven countries.
Solution
Your very own hero's journey
Social hero is a fun and interactive virtual playground that encourages users to practice socializing by offering in-game progression and rewards. Social hero takes heavy inspiration from popular social games, as progression inside social hero is directly influenced by your own progress gaining social courage in real life. 
  • Social hero is also a thriving online community with opportunities to anonymously communicate feelings, form friendships, and share sentiments on socializing with others.
A day in social Hero
How to complete a goal
Click the red circles to navigate through this flow to get a snapshot of what Social Hero is like. A full-game prototype can be viewed farther down below.
Research
Introvert secrets... revealed!
We interviewed 7 graduate students to understand their experiences with engaging in new social environments and strategies for coping with the anxiety of talking to strangers. From our interviews, we observed three common themes:
  • Human Connection: Participants were motivated by connecting with others.
  • Social Courage: Garnering social courage is more motivating than tackling social anxiety.
  • Safety & Trust: Participants can socialize easier in environments they feel safe in.
Roadblock
Very pressed for time
For this project, our team had less than a month to go from project ideation all the way to prototype deployment. Because of this, it was impractical to complete Social Hero in a sequential, waterfall-like fashion. To overcome this hurdle, our design team began ideating on solutions and creating basic components while the research team was finishing conducting interviews.
ideation
Our collective visions
To meet deadlines, our design team began our ideation phase before our researchers had fully completed their interviews. We read several academic papers on virtual spaces and online safety to better understand existing solutions, followed by researching existing socially-driven multiplayer games to better understand gamification. Finally, we independently ideated on design solutions that we believed would contribute towards a pro-social game experience.
[1] Ringland, K.E., Zalapa, R., Neal, M., Escobedo, L., Tentori, M., and Hayes, G.R. “SensoryPaint: AMultimodal Sensory Intervention for Children with Neurodevelopmental Disorders.”
[2]Ringland, K.E., Wolf, C.T., Boyd, L., Brown, J., Palermo, A., Lakes, K., Hayes, G.R. (2019, October).“DanceCraft: A Whole-Body Interactive System for Children with Autism.”
[3]Ringland, K.E., Nicholas, J., Kornfield, R., Lattie, E. G., Mohr, D., Reddy, M. “Understanding MentalIll-health as Psychosocial Disability: Implications for Assistive Technology.”
[4]Burgess, E.,Ringland, K.E., Nicholas, J., Knapp, A., Eschler, J., Mohr, D., Reddy, M. “’I think peopleare powerful’: The sociality of individuals managing depression.”
Comparison
Finding common grounds to avoid biases
Following our individual drafts of the gameplay experiences in social hero, our design team met up to compare and contrast our visions to identify common ground. By comparing our individual visions, and focusing on the ideas that we had all shared, we were able to create homogeneous design solutions that were less representative of any one designer's individual biases or preferences.
Feature Selection
Putting all the pieces together
Following this, our research team had completed our user interviews, and to maximize our team's remaining time, we paired each of our ideated features with the major research themes to ensure that the features we choose to design were reflective of user needs. Afterwards, we approximated the amount of time investment each of the features would require, and how impactful they would be on maximizing the well-being of our users. By doing this, to decide which features to implement while being cognizant of our individual bandwidths.
Designing
Retro game design components
We opted for a blueish color palette, as blue is reflective of communication, clarity, and openness, all of which are values we wanted to foster in our users through the usage of Social Hero. We opted for the retro typeface "Share Tech Mona" to add to our video game aesthetic.
world-building
Our virtual playground
One feature we wanted to prioritize was a fully virtual world that users could explore and engage with. We opted for a retro pixel-art style with lighter colors to provide a sense of warmth, comfort, and video game nostalgia. We were also greatly inspired by the game “Stardew Valley”.
Layouts and Heirarchy
Don't Reinvent the wheel
To stay within class deliverable timelines, the majority of our interface layouts were directly influenced by other popular mobile games, allowing us to complete our screens more efficiently.
Usability Testing
Making our world more habitable
Finished Product
Welcome to Social Hero
Prototype
Full Game Experience
Outcomes
Research paper submission!
Social Hero was selected out of a pool of approximately 10 student submissions to be sanctioned as an official research project under the UCSC Misfit lab. Our prototype and user research eventually manifested through a publication at the 2023 DIS conference, exploring online resilience and safety through technology.
‍
We also recruited new collaborators along the way :)
Future work
Advanced Figma logic
This project was started before Figma had released it's conditional logic and variable prototyping features. But we would love to explore modifying the prototype to include these, giving the prototype game-like mechanics such as increasing gold and experience points while testing.
Reflection
Figma can make games as well!
Before this project, we had never considered the possibility of using figma as a game prototyping tool. From interactive maps to character customization, our eyes were opened to the possibility of figma being used for other forms of interactive media outside of the common mobile and desktop prototypes. With the addition of figma's new logic and variable features, we are confident that we can work in figma for future projects requiring advanced prototyping.
Thank you for reading! Here are some of my other works
Kainos Studios
GoalMates
back to top
Made by Siddharth Subramanian © 2024