UX case study

Tobe: A better friend

Media Innovation Lab IDC - final project

Team

3 UX designers

ROLE

UX Designer & Researcher

Responsibility

Leading the design until release .

TimeLine

20 weeks

The Problem

Cyberbullying has become a significant public health concern. 21st-century technologies have introduced new tactics for aggressive behavior. We took a deeper dive into this issue and tried to understand how we can affect this type of behavior. We quickly learned that one of the biggest problems with cyberbullying is that:

Children are unaware of how abusive they are in daily communication with their friends.

Research & Analysis

We dived into the problem and selected several “actors,” including
parents, teachers, professionals, and children (bullies, bystanders, and victims).
‍
We chose this category of people to understand the pain points and their day-to-day challenges. Our Research included user study and academic research.

Affinity diagram

We arranged the information in an affinity diagram that shows users' behavior, needs, and pain points.

Empathy map

We mapped the responses and thoughts to better understand their environment and emotional connection.

Key insights

Mainly over the phone: Children experience bullying 24/7 over their phones.

Easier than face to face: It's easier to hurt another behind the screen rather than face to face.

WhatsApp as the weapon of choice: among fourth- and twelfth-grade students, 31% reported being victims of cyberbullying in WhatsApp groups, insults, swearing, group removal, and posting offensive images.

Children lack awareness and empathy: Lack of awareness and empathy causes children to behave impulsively and insensitively

“Children do not always know what the red lights are”

How Might We...

We focus on children (bullies, victims, and passers-by) and educators. As part of the process to the solution, we began to ask how might we can help them.

HMW Prevent violent discourse between children on social networks?

The Solution

Tobe is designed to prevent offensive online discourse among elementary school-age children. Using a virtual keyboard that operates on every social media and recognizes offensive and positive words in real time. The children will learn how to behave optimally in front of their friends on. It combines a few important aspects:

Educational program: during a class discussion with the teacher, the children create a dictionary of positive words they would like to receive and a dictionary of offensive words they would like to avoid.

App: The dictionary is linked to the app and Tobe the character will appear on each child's keyboard. While writing a positive message, Tobe will strengthen the child and while writing an offensive word, Tobe will alert and suggest not to send it. If the child sends the message, Tobe will become sad.

Goals

The focus is on children in the fourth-fifth grade. These are young ages who are more likely to be affected. They just enter the digital world and usually get phones at these ages.

To stop and pay attention, think before you act

Reflect the nature of the discourse, and try to evoke empathy in the user

Design principles

After our research and user interviews, we have come up with a set of design principles to admit while designing.

Simple: The intact background of this app is simple to use. The users need not learn a new pattern

Freedom of choice: According to reaction theory when people feel coerced into a certain behavior, they will react against the coercion, often by demonstrating the behavior opposite to that desired. If so, the line that guides us is to give feedback that will not lead the children to an unwanted reaction. But will reflect to them the nature of the discourse.

Wireframes

This visual guide represents the skeletal framework of the app. It helped me arrange the interface elements while we focused on the functionality rather than what it looks like. Moreover, the simplicity of wireframes allows me to quickly test ideas without diving into the details.

Application opening screen, the child needs to enter his gender

The child needs to enter a minimum number of details

Enter the verification code provided by the teacher

The waiting screen showing the number of children entered the activity

A digital dictionary that the child needs to write positive words

A digital dictionary that the child needs to write offensive words

Introducing a character who will accompany the child through the process

When the child writes offensive words the character will be sad

When the child writes positive words the character will be happy

A Gamification model, with quantitative feedback, to encourage the child to write positive words.

Kids will be able to shop with the stars they earned gifts for the character

Home screen, which shows the child's progress towards a star, showing the character and the number of stars the child has earned

Big Feedback, stops the flow, and leads the child to think before sending

Small feedback, which reflects to the child the discourse and does not stop the flow

Positive feedback, which will strengthen the child to continue to write positive words

Guerrilla Usability Testing

We made guerrilla usability testing to evaluate how effective a functionality and general message on its intended audience and capturing their responses.

Feedback
‍The big feedback can lead the kids to an unwanted response, a load of big feedback can cause the kids to act contrary to what we expect and abandon the app.

Character Colors
‍We have come to the understanding that we need a marker for the character's condition. The different colors are another feedback that will reflect to the children the nature of the discourse

Final Prototype

Based on the feedback we received from usability tests and experts at HCI, we made a number of changes.

Feedback
We have figured out that there should be a "delete" button colored red in the keyboard whenever it identifies an offensive word. With this button we combine the "big feedback" which we loved but were not so sure about it's efficiency, with the "small feedback" that is displayed in the keyboard itself.

Self Report
Allowing the victim or bystanders to report a message. Reporting an abusive message will put it in the DB of the app for future abusive recognition.
‍

Character Colors
The color and facial expression of the character vary depending on what the user is writing

Purple signifies neutrality word
Green signifies a positive word
Red signifies a Offensive word
Orange indicates that it is not known whether it is a negative or apositive word

Dashboard for educator

The educator is an integral part of solving the problem. So we designed a dashboard for her that would show her data that would reflect her discourse among her students.

We have written a number of usage scripts to understand which data will be relevant to the educator:

Use of curses by gender
Offensive words by hour / date
Red signifies a Offensive word
Offensive words versus positive words
Class Dictionary - Positive words, offensive words and reported words
Popular offensive words
Engagement level: deleting words, reporting abusive words and receiving feedback (negative\positive).

Wireframe

Final dashboard

For prototype, you are welcome to click here

Takeaways

Based on the interviews with the participants and the researchers, we created a defined pattern, which aims to create an empathic interface that reflects children the nature of the discourse. There is a lot more to bring to life in this product. I believe that investing in this product can lead to a positive change in our society

What can I do better?

Research on the features
Selection of participants from different regions
Test the usability of the prototype with Children's (victims, bullies and bystanders)
Design direction according to the data
MVP development

Thank u for your time to look into my project!