UX Research
UX Design

Social Hero

Fostering socialization through mobile games

Overview

The goal of this project as to understand how users currently navigate online spaces and therefore design such a space that they will feel comfortable in using and interacting with others.

Team Members

Yi Qing Khoo, Naomi Du, Francis Dominguez, Siddharth Subramanian, Rebeka Asryan

Skills showcased

Rapid Prototyping, User Testing, User Interivew, Focus Groups, Co-design, Qualitative Data Analysis

Problem

Introverts feel drained from over-socializing faster than extroverts (Jenn Granneman). With presence of unavoidable social situations, how might we help build resilience for such moments in a safe space?

User Interview

We had conducted exploratory user interviews with 3 graduate students who had identified as introverts that also enjoy games. Through these interviews, we wanted to introduce the idea of a gamified app that can help "fix" social anxiety by suggesting players task they can do in the real world and get feedback from the interviewees about how they see themselves using the application and some features that they would like to see.

From these interviews, we heard details such as "the idea of 'fixing social anxiety' gives a negative connotation and instead should look at the concept from a positive light" and it had opened a new avenue of thought - to foster social courage rather than to ‘fix social anxiety’.

Problem Statement Refinement

With the new perspective introduced from the user interivew, we pivoted our research from just looking at introverts to any individuals who might want to be more sociable.

Deep dive into online communities

Looking to better understand how people navigate online spaces, learn about their experiences and understanding what makes them feel safe, we decided to release an online survey and follow with an in-person workshop with willing participants.

Online Survey

We had successfully surveyed over 200 participants with age ranging from 18-43, majority being university students. We had released the survey on social media as well as share it through the university network.

Many respondents shared that they are motivated to continue using online spaces due to the community aspect as well as communicating with others. Participants also shared that having control of who they can talk to contributes to them feeling safe online.

In-person Workshop

The in-person workshop consisted of 2 parts - a focus group discussion and a co-design session. Each workshop consisted of 4-6 participants, with 1 team member leading each part.

Part 1: Focus Group

During the focus group, we introduced different scenarios, each looking into a different aspects of users in online spaces including community aspects that contribute to the feeling of safety, online activity influencing offline activity and their experinces in using online platforms for social interactions.

One thought that was commonly brought up amongst the different groups of workshops was that online spaces is a great place for social interaction and finding others of the same passion. Many agreed that having someone to faciliate these online interactions is also helpful.

Part 2: Co-design Session

During the session, we had participants discuss with their neighbour what elements that they have seen/been exposed to that is most effective in making connections on online games. After having them ideate, we had participants to design screens for a mobile game that would help faciliate socialization.

Many participants had drawn screens that showed player interaction in a game world and also in-game chats, working together to complete a goal.

Example of co-design session activity

Example of co-design session activity

Research Findings and Features

Through the interview, online survey and in-person workshop, the following major themes were defined.

Community

Need for human connection

Collaboration between users

Safety

Control of who they are interacting with

Control of who can see their information

Aesthetics

Reminiscent and colorful 8-bit art style

World style differing from real life (Escapism)

User

Ability to express themselves

Having a sense of accomplishment

Competitive Audit

A competitive audit was conducted on applications that gamified the experiences of doing tasks to understand features that are already successful with users as well as areas of improvements that could be applied to the design we were building. These applications include ‘Habitica’ and ‘Level-up Life’. For this competitive audit, we synthesized app store reviews as well as play-tested the applications.

Aspects of Habitica

Aspects of Level Up Life

Findings from the competitive audit corrorated with the research findings which led us to our finalized features.

Finalized Features

  • Separated spaces for close friends and all players with the option to be set anonymous
  • In-game chat for friends to communicate
  • Tasks linked to real-world actions which encourage social courage
  • A profile page to showcase player avatar and accomplishments
  • A shop where players can purchase items for character customization through in-game currency earned through tasks

Concept Designs

Each designer took it on their own to create different concepts coming up with the modern, fantasy and farm concepts.

Concept 1 - Modern

Concept 2 - Fantasy

Concept 3 - Farm

We eventually decided on a mix of all three concepts, taking in the brighter colors of the farm/modern concept whilst keeping the "escapsim/apart from reality" idea of the fantasy concept.

Wireframe

Creating a wireframe allowed the team to understand the user flow, faciliate early feedback internally and plan content for the hi-fidelity design.

Usability Testing

Usability testing with 5 users were conducted with the high fidelity figma prototype. We had users intuitively navigate the prototype and only give hints when users were truly stuck/unable to advance.

Findings

It led to 3 major findings.

  1. Users reported that certain features to be illegible due to small font size and images which led us to increase the font size to ensure the application is accessible to all.
  2. Users showed us that there was a lack of clarity when launching the application which led us to create a guide for users.
  3. Some interactions did not work as expected which led us to troubleshoot the problem areas.

High Fidelity Design

Landing Page

The guide was added to help first time users better navigate the application.

Profile

Profile screen allows users to showcase their progress/achievements and customize their avatar, display name and biography.

Tavern (Online Forum)

Tavern was created as a place for all users to interact. Posts can be sorted and filtered accordingly and can be anonymized as well.

Academy Log

Academy log showcases achievements and tasks-related posts with in-game friends only.

Store

The store allows users to buy items to customize their character from in-game currency earned through missions.

Outcome

This project resulted in high fidelity design and design suggestions of a mobile game that can act as a medium for promoting socialization in users. Through this project, I have furthered my technical abilities in ux research and design by designing research protocols, co-conducting in-person workshops and designing low to high fidelity designs.

With more time

The team would have liked to conduct more usability testing to gather more data and feedback on the current work, further research on understanding the types of tasks that can be included to motivate socialization and engagement as well as eventually creating our own design assets for the final product.