Case Study — User Research and Experience Design
Humans of the Internet
A vision of online conflict resolution
Overview
Summary: Humans Of the Internet is a global grassroots movement addressing the problem of online harassment by spreading kindness, positivity, and self-awareness— both online and offline.
My role: Experience Designer


Client: Self-designed Brief — Academic project
Duration: 2.5 weeks
Coach: Gill Wildman, Co-founder @plotlondon
Team: Kara Kane, Katie Shelly, Laura Morley, Sérgio Andrade and myself.

Keywords: empathic civilisation; future of conflict; civic tech.

Brief
The course assignment for the "Design and Creativity" module of the Digital Design Experience MA at Hyper Island. In this project, we had to self-design our own brief allowing freedom to choose a creative project of interest to all team members.

Under normal circumstances, in the industry projects start with a brief written by someone external to the team that will develop the project. This time, we got to determine what needed to be created.

The brief's goal was to create a new experience, where we could consider improving an existing situation, or developing something new altogether
Humans Of the Internet is our approach to the problem of online harassment.

Humans Of the Internet it's not an end in itself, it's not an outcome, it's not just another website of an academic project. It aims to be just the beginning of a collaborative answer to the problems that arise from communication conflicts. Humans of The Internet

It's is a global grassroots movement to spread kindness, positivity, and self-awareness— both online and offline.

How we did it — Design Process
Problem Statement
We started with some questions, like:
- What does this design need to achieve? What does it need to avoid? What does it need to connect with?
- Who will this be for? Who are we making this for? What does this experience need to do for them
- And the biggest question of all... Why is this important and why do we want to do it?

After going through the questions above, converging and diverging throughout the different stages of the design process (we followed the Double Diamond) we started realising the dimension of the problem we were to deal with.


1
Discovery — Ideation and Critique
To focus and structure to the ideation process we decided to follow the themes suggested by Tim Brown's in his text: "The Next Big Thing in Design" (see more here).

Working in individual sprints, we were able to generate a broader but well-defined list of potential ideas.

Later the dot-voted ideas were harvested using the Funnel of Focus, to kill the bad ideas and focus on the good ones more quickly. After the selection process, the team had a brief discussion and decided after to right down, individually, how the main research question could look like. Initially, we thought that the following research question was a good start:

How to turn online conflicts into something affirmative and constructive within a community
Later on the process, this question was reframed and refined. We took it apart and assess if any parts that made up the whole would be able to stand on their own.

2
Insights — Research and Analysis
To get a deep understanding of the problem and the audience we believe that discovering behaviors (what people do) is more efficient than asking for attitudes (what people say). However, since we were working in a self-designed brief, at this point talking with people would be helpful to get more clarity on the problem. We spoke to a mix of Facebook and Twitter users and experts in online communities, social media and behavioural science to conduct individual interviews.

We had a very interesting interview with Rob Morris (picture on the bottom), Ph.D. MIT Media Lab and Creator of Koko, an online community that uses cognitive reframing and crowdsourcing to help people deal with stress and anxiety. Rob said:

"Social networks, when you join, is sort of like showing up to a party where you don't know anyone. Your guide to behavior is the other people around you."
Ph.D. MIT Media Lab and Creator of Koko
From this point onwards the goal of humanising social interactions on the internet started to present itself as a solid direction to that we would follow.

Later we also conducted some contextual enquiries, simply watching and listening to people while they were using online communities and prompting questions to understand specific behaviors they were showing.

A couple of online surveys were also sent in order to get a deep understanding of people's online behavior, needs and frustrations.
One of the most insightful behaviors reported by the people who answered our survey

3
Synthesis and Opportunities — Reframing the brief
At this point, we downloaded (IDEO's expression for compiling data collected during research phase) a huge amount of data collected during the research stage, which was done both individually and with the group. Later, we used a simpler version of affinity diagramming to group the ideas and data into themes. We applied the Impact and Feasibility Matrix to understand what ideas could have the higher impact and the lower effort. This was particularly useful to create consensus around what opportunity areas were available and which direction should the project follow, by reframing the initial brief.

After this stage, we felt prepared to draw some "How Might We" questions out of the opportunity areas. The "How Might We" question selected for the final brief was the following:

How to turn online conflicts into something affirmative and constructive within a community
Detail on the flow of how to extract "How Might We" Questions from scattered ideas
After the reframing the brief and defining our final problem statement we were prepared to start developing possible solutions. On the root of the problem, one of our main findings goes as follows:
Human beings are more connected than ever before. Individuals are exposed to more diverse points of view from others around the globe.

The Internet currently helps to bring us together but also brings us apart. Online arguments lack a human face and the necessary sensory input cues for natural empathy.

Civility is needed online if we want to move our society forward.
Top left, top right and bottom right: insights and findings extracted from the research stage.

Bottom left: Image found during desk research that was used as unofficial motto from that moment onwards
We felt the need to create an ecosystem of tools and experiences with integrated subsystems, online and offline to tackle in a holistically way the problems of violent online communication in any of its multiple forms: harassment, bullying, trolling, etc.

4
Validating findings — Prototype and Test
At this stage, we were looking to validate or invalidate the insights and other qualified assumptions we extracted from the research stage.
So we started fast prototypes of many different ideas:
We wrote a manifesto
... and asked our colleagues to write us feedback about it (feedback installation in the image below). We wrote the manifesto because it was our desire to define a strategy supported on strong operating principles or ethos.
Read the manifesto
here
We prototyped an app
... a mobile native application (another prototype can be seen in the animated gif below). This app scans for the user's language in possible conflictive situations and suggests if the user wants to interact in a non-violent way, using text, images or video.
It was code-named as Pathos, since it stands"an appeal to emotion and is a way of convincing an audience of an argument by creating an emotional response".
We used data visualization
... to mockup a Dashboard for Kindness. A service that scrapes people's social media presence and analyses it for empathy and tone. People would be able to access a readout of their kindness level over time.
We mocked up a repotistory
at GitHub to make an open call for contributions from the design, code and hacking community.

We made letter templates an app
... for handwritten letters, to motivate people to enhance and develop analogue relationships with the people they care the most.
After developing and testing these prototypes we felt it was barely impossible to develop one fits all solution for this problem we proposed to solve. We need to narrow it down just to an angle. But we wanted to THINK BIG and Gill Wildman (our project coach) was encouraging us to do so! Thus instead of narrowing down to a specific angle, or dropping ideas just because they didn't solve the whole, we hacked the process. We gave a step back and started thinking of a system — constellation of products and services, both online and offline to help us " turning conflicts into something affirmative and constructive within a community".
Left: v1.0 of the mobile native application.

Right: Feedback installation for manifesto

5
MVP — Outcome and presentation
When the people starting entering the room to see the presentation they could read on the projection "Write a letter to a friend" and see different letter templates, branded with HOI, lying on every chair. To us, it was really important setting the stage and provoke the audience before starting the pitch. Most of the people in the audience shared that they didn't remember last time they have handwritten a letter to someone... That gave us the foundation to build a case around our brief's question: "How might we turn conflicts into something affirmative and constructive within a community?"

After getting people's attention, we knew they were more keen to understand our proposition. We presented the responsive website as our MVP but also walk them through our vision of creating a system — constellation of products and services, both online and offline.
Our vision for this project was aligned with the following goals:
  1. Be accessible — Your conflict resolution tool should be affordable and inclusive of all walks of life
  2. Inspire action — We're keen on moving beyond motivation to impact - on solutions that can be quickly tested and proven on a small scale. Your tool should change existing patterns of behavior
  3. Leverage empathy — Encourage your users to take a walk in each other's shoes as the mechanism of change
  4. Be fun — Let's keep things light and creative. While the issue is serious, solutions should be ultra-relatable and put a smile on the face of the end user
  5. Be nontraditional — We're aiming to think beyond the current landscape of conflict resolution and web civility tools
The Humans of The Internet constellation of products and services.
Retrospective
This was the first group project of my MA at Hyper Island. Humans of the Internet taught me a lot of lessons indeed.

The first lesson was about learning how culture is absolutely critical to build a strong team and develop a great work. I also learned while in the research stage that finding the right balance between individual and group tasks really increases efficiency and decrease the risk of team burnout.

Given the specific open characteristics of this brief, my biggest takeaway was definitely to see how comfortable I feel thinking and understanding BIG PROBLEMS in its overwhelming complexity.

It's extremely challenging, but motivating, what design can do to create better, simpler and meaningful solutions, taking into consideration the context of people's needs and behaviours, within specific cultures and markets.

It's extremely challenging, but motivating, what design can do to create better, simpler and meaningful solutions, taking into consideration the context of people's needs and behaviours, within specific cultures and markets.

Want to know more about our pitch
Team
My team was formed by a group of 5 Master's students of the Digital Experience Design programme at @hyperisland, Manchester, UK.

We all worked as Experience Designers for this project.

However, everyone was also accountable for specific tasks according to their comfort zone and experience. From Strategy and Project Management, User Research and Insights, Prototype and Test and, finally, Visual Design.

My main contribution for this project was given in the Insights, Prototype, Test phases and also Visual Design.

Made on
Tilda