Research and design for a Social-emotional education web-based game with the Melissa Institute.
Roles: UX research / UI designer
Overview
My team and I began a 3-month project with the Melissa Institute, a local nonprofit that endeavors “to prevent violence and promote safer communities through education and application of research-based knowledge.” This partnership aimed to create a “fun and engaging” experience to further their mission of violence prevention through education.
Opportunity Statement
For this project we wanted to create an interactive experience that would connect az younger “internet native” generation to the goals of an organization that was created before the internet was in so eubiquidous.
How do people learn to change behavioral patterns?
How can we make learning interpersonal skills fun?
How can we make a digital asset that supplements the organization's goals?
Choose your own character
PROCESS
Click image to enlarge
EMPATHIZE
HYPOTHESIS
Those educated on how to express themselves, and recognize nonverbal cues, can be key players in building positive interpersonal relationships and preventing violence.
Stakeholder mapping
Our client informed us of a concept called “Active Bystandership.” the act of being aware of when someone’s behavior is inappropriate or threatening and choosing to challenge it. After that, we started with stakeholder mapping to better understand who the primary users of a product like ours may be. We used the concept of “Active Bystandership.” to frame our stakeholder mapping exercise.
Stakeholder Interviews
After determining the stakeholders, we set up interviews to better understand these groupings and their experiences with “Active Bystandarship,” those interviewed included an assistant principal, a professor of psychology, and a nonprofit co-founder. As a UX researcher, I interviewed eight teachers also to understand their experiences with teaching empathy and using technology in the classroom to see what opportunities we may have to create a digital experience.
We came down to three large groups that we believe have an invested interest in “active bystandership,” education institutions, psychology organizations, and non-profit organizations similar to our client, focusing on violence prevention through education.
Voice #2
“Education is the foundation of preventing abuse and violence”
- Psychology professor at FIU
Voice #1
“Giving students the power to decide the rules and feel a part of the school culture creates a sense of responsibility that can lead students to be an active bystander when the time comes.’’
- Assistant Principal
Voice #3
“I run the ‘Peace Program’ Teaches teenagers the value of self-esteem and conflict management skills.”
- Co-Founder, Non-Violence Project
DEFINE
KEY TAKEAWAYS
Most teachers would like to incorporate more technology into their everyday classroom environment. Some state standards even require the use of technology in the curriculum.
Participants believed a lack of proper “social-emotional education” is a crucial reason for interpersonal relational distress.
Giving students the ability to decide on classroom rules or “culture” allows them to feel more invested in upholding that rules.
There are already tools in place that allow students to report incidents of violence that do not adhere to set rules.
User Personas
We created user personas to guide the ideation process using qualitative data gathered during the interviews. Creating four personas, "The Bully" (featured here), "The Victim," The Bystander," and "The Teacher." Each persona had personal goals and frustrations that were usually at odds with one another or prevented them from taking an active bystander role in conflicts. We would later use these goals and conflicts to influence the user's choices in the game.
Inspirations
Based on user interviews and research into behavioral change, we decided to look into game mechanics that relied on users making clear choices to teach lessons and move story narratives.
Chose Your Own Adventure (CYOA)
Popular in the '70s and '80s, these books take the reader on an adventure where the reader decides the protagonist's actions and how the story will end.
Telltale Games
The aspect of self-directed learning of TellTale games interested the team, effectively allowing players to craft their personalized take on the offered story.
Ideate
User flow diagram
After researching the gameplay mechanics of CYOA games and the psychology behind creating “behavioral change” in students, we divided the work into parts,
Interaction prompts
User flows
The users’ flow starts with a conversation with non-playable characters by approaching the avatar.
Then users get to choose from three options for answers.
After making their choice, the user is given immediate feedback on whether their choice built a “positive connection” or a “negative connection.”
Click image to enlarge
Sketches & Video
We created sketches and a short video to present to the clients to explain the user flows based on the interviews and using our personas.
Features List
Based on our user flows, we decided on 4 key features.
Feature # 1 Users can create a character that looks like them.
We decided to allow users to select their character's appearance to encourage an implicit connection between the user and the avatar, making it easier to relate to the experiences in the game.
Feature #2 Users can interact with non-playable characters with a multiple-choice selection.
Users’ main priority will be interacting with other virtual non-playable characters (NPCs) to go through the user process of talking and selecting an answer from the presented choices, each leading them down a different story path.
Feature #3 Users can explore their virtual environment using their desktop keyboard direction pad.
Users can explore a virtual school environment to recreate the familiar experience of formative years of learning to interact with others your age
Feature #4 Users will receive feedback through prompts by nonplayable characters and UI points gauge.
A gauge will be present during gameplay so users can have a visual cue for their choices' effects.
Game Play/Mock-up Demo
Using the Unity game engine, my teammates and I coded and created a “proof of concept” environment for the game. Below is the video of how the gameplay—demo was designed and coded by me.
Next Steps / Takeaways
Design is a constant iteration of improving the experience for the end user. I believe that the demos and designs of the game would benefit from a focus group of students in our target age range.
The game may benefit from looking into possible virtual and augmented reality features.
There may be an opportunity for post-game play discussion for students to reflect as a class with a counselor or teacher at the end of the game and discuss what they have learned. Maybe create a companion piece.
