NUDGE - GREEN KEYBOARD
A keyboard app that aims to change people's behavior by adding friction to the process of sending hate speech and preventing people from engaging in online disputes
Opportunity
I synthesized the insights from my primary and secondary research. I discovered a demand for my product since users often feel frustrated once they engage in online disputes. On the other hand, a common thread between my user research was that ignoring and then giving up the chance to engage in online arguments is one way to de-escalate the negative impact brought by online disputes. With this knowledge in mind, I formed an HMW statement so I can translate the insights into an actionable design solution:
Design Approach
I conducted secondary research to help me establish a set of features that I could implement into my app. I looked into the Social Pattern Library again since it provides a good amount of knowledge regarding online hate and how to mitigate it. One pattern called "Hateful Post Interstitial" caught my attention. It introduced a hate-mitigating method by adding friction to the posting process, prompting users to rethink their decision to post, which mitigates the overall creation of hateful content on the platform.
Though, it does have its limitation such as:
1. Users who have formed a substantial prejudice would continue posting the hateful message and ignore the "friction" (notification, pop-up, alert, etc.);
2. Users who try to post hateful content might attempt to game the system by manipulating words to dodge the word detection (source: https://socialpatterns.adl.org/patterns/hateful-post-interstitial/).
CHALLENGE
SKILLS
TOOLS
TIMELINE
Designing an app that cultivates behavioral change in novice cyber citizens or those who wish for a change.
User research, usability test, concept mapping, secondary research, interviewing, concept testing, wireframing, FTUE design, UI design, prototyping, video editing, storytelling.
Figma, Adobe Illustrator, Adobe Premiere Pro
4 weeks, Fall 2021
A Demo Video of Nudge
Personas
I developed two personas to match my target audience archetype. To give a short description of them, Steve is a high school student tired of online arguments, and Valen is a mom who wishes to give her child a guide to interact with others in online forums. These two personas helped me empathize with my target audiences and gave me directions when making design decisions.
Inspiration
Inspired by the Social Pattern Library developed by adl.org, I decided to design an application that forms a behavior around sending less hateful messages and actively withdrawing from online disputes. By addressing a real and important topic, I will have a solid bone for this project.
The mind map below shows my primary exploration on the topic of online disputes:
.png)
Provide an inclusive and easygoing space for users to get educated and change their old behaviors
.png)
Implement the use of nudges over "warnings" before users posting potential hateful message
Give users full autonomy to ensure a natural behavior-changing process and protect their freedom of speech
Features
Since the stage before posting any online messages is typing in the textbox, I decided to implement nudges at that stage. With this premise in mind, I came up with a list of main features to implement into my app. These features serve the purpose of slowing down the message sending process and eventually cause users to rethink their choice and give up sending the potentially harmful message.
1. A push-notification sender whenever the app detects harmful message;
2. A keyboard that suggests better word choice to replace harmful words;
3. A terms of service reminder;
4. A quick action button to delete harmful words once it got detected;
5. A notification appears whenever users ignore the features above and send a potentially harmful message.
I also came up with two ancillary features to complete the "hook model" framework to make my app an effective habit-forming product:
1. A growth chart that shows how well the user is performing in online forums;
2. A word of the day push notification to immerse the users in a mindful and peaceful environment.
UI Sketches
With my main and ancillary features settled, I started to develop concept UI sketches for each feature. These concept sketches helped me figure out the low-fidelity wireframes for my app, and they will be helpful when I conduct concept testing later on.
01. Exploratory Research
Wireframes
I ran a concept testing session with my colleague and instructors to figure out if the user flow and the functionality of my app were clear. The result is that the onboarding flow is clear and well constructed, but the testers suggested that I should implement more brand identity into my app, like a logo, even if it's a keyboard app. On the one hand, it can be a constant reminder for my users to use mild language when the app is on. On the other hand, it could also enhance the feedback stage whenever the users type a harmful message or follow the instructions to make their text better.
Onboarding Experience
The first-time user experience, particularly the onboarding experience, plays a crucial role in introducing the product usage and helping users set up. Without this experience, users would have minimum knowledge regarding how my app function.
Style Guide
I created a fresh and endearing interface and I want to establish a positive connotation throughout. When designing the style guide, I used green and light grey as the primary color palette. I used Quicksand as the primary font family for typography and Roboto as the secondary font family.
Final UI Design
Taking what I learned from the wireframe usability testing session, I made some changes to the final design. Changes to the overall user flow included adding an extra step to let users set up and combining some main features together to establish a more streamlined flow. You can also view this prototype on Figma.
What I Learned
This project strengthened my skill in designing micro-interactions, FTUE, and developing an experience that aims to change users' behavior. On the other hand, it also improved my concept testing, usability testing, and wireframing skills. All these skills would help me become a more professional UX designer. I am also proud that this project addresses a real issue, and according to my instructor, the solution I provided is relatively strong.
My design process follows a double-diamond design process. From initial ideation and conducting user research (diverging) to establishing a problem statement (converging); from setting my design visions (diverging) to designing the experience and the UI for Nudge (converging). I was able to walk through a complete and past-paced double-diamond design format and eventually produce a high-fidelity UI design along with a demo video.
Let's work on something exciting together!
Framework
Then with the "Hook Model" framework in mind, I ideated an initial habit-forming pattern for my app that will increase its effectiveness and help my users cultivate a behavioral change in the long run.
.png)
Key Insights
I started by conducting user research to determine if there was any demand for such a service. I made a questionnaire to help me validate the user's needs and gather the initial user insights regarding online disputes and online hate. How often does one encounter online arguments? Where do online arguments take place? What are the users' motivations, goals, and expected outcomes?
To find the answers to these questions, I established a survey and sent it to 15 of my provisional target users. Through the survey results, I observed the pattern regarding the negative factors that push people to engage in online disputes that usually end with high user dissatisfaction.
Main Pain Points
Using the survey results, I validated the fundamental demand of my project since engaging in online disputes will frequently bring adverse emotional outcomes, and more than half of the interviewees mentioned that they wish to avoid such consequences. I also learned that the typical approach for them to deal with online disputes is either ignoring the other sides' opinions or not engaging in the argument in the first place.
Switch to Nudge
Users can follow the instructions to set up and switch to Nudge from their default keyboard
Language/Context Detector
Nudge can point out the potentially offensive language in a comment/post on various online fora
Quick Fix
Users can easily delete or change the potentially harmful message in their comments based on the suggestions
User Growth
Users can track their growth based on their online performance and immerse themselves in a positive environment
Social media platforms encourage users to adapt to polarizing & impulsive behaviors to boost virality.
The depression rate has risen by greater than 70% due to unhealthy online behaviors in the past 20 years.
02. User Research
03. Synthesis
"How might we improve each cyber citizen's online satisfaction by guiding them to engage in fewer online arguments?"
04. Design Vision
05. Early Development
06. Final Design
07. Evaluation
Product Features
The Solution
Project Overview
Online Hate Speech
Hate speech and toxic communication online is on the rise. Many social media nowadays are trying to exploit hate speech to gain user traction. By privileging incendiary content and setting up a stimulus-response loop that promotes outrage expression, these platforms could cultivate a feedback loop that maximizes virality hence generate more profits.
The Problem