Interactive installation that combats media-bias

To combat and empathize with media-bias, we created designs for an interactive installation that allow participants to learn about an emerging news event, craft a story to be published, and then be confronted with their media biases. We conducted research that included Mechanical Turk and prototyped in a webVR framework called A-Frame.

UX Designer, VR Specialist
March 2016 to April 2016
While At
M-ITI / Carnegie Mellon University
Tiffany Wang, Iris Wu, Ryan Huber


Project brief: Create an interactive public display that utilizes public information on the display and private information on users’ phones.

Hunt statements are guiding statements. This is ours, captured from one of our presentations I designed.

As a team, we decided to choose a meaningful topic and push the bounds of our comfort.

Top level perspective of ViewPoint. Participants walk through each room, completing tasks that build a news story. All rooms use floor to ceiling projected media.

Final Design

ViewPoint is an interactive installation where users act as a news editor. Participants learn about and craft a news story over the course of several immersive rooms (e.g. background events, interviews, choosing a journalist to write the story). After they submit their fictional story for publication, the participant is confronted with different forms of bias in their story. The installation ends by showing anonymized stories and statistics to further audience understanding.

To prototype and present our work, we use a 3D/VR environment made with A-Frame and a mobile prototype with Marvel.

3D/VR Prototype | Mobile Prototype

My Role

The team was effectively four UX designers, two of which also acted as prototype developers. We all contributed to each room and the overall experience, but we each led part of the design.

  • I led the design for the interview and author rooms, as well as the overall spatial layout.
  • I advocated for prototyping in 3D, especially in VR. Since we couldn’t setup a whole exhibit, a volumetric prototype would help us better understand spatial relationships. Using VR would help us understand the experience of being there.
  • When we needed survey data, I suggested using Amazon’s Mechanical Turk. We crafted the survey together and I facilitated its implementation on MTurk.
  • I led the development for the virtual space, having experience with Mozilla’s WebVR technology, A-Frame. Fellow collaborator Ryan Huber developed the interactive components.

Tiffany, Iris, and myself (from left) during one of our brainstorming sessions. Since some rooms are for individuals and others are for groups, we were talking about how the layout might change based on the throughput of different museums.

Process & Design Decisions

We worked in spurts through stretches of individual ideation and stretches of group refinement. This allowed us to inter-stitch divergent and convergent thinking throughout our timeline. Additionally, we decided early on that we wanted to stretch our skill set and try something new.

One of my early ideas in a divergent section of our work. In this design, users would stand across from each other and see some information highlighted on an augmented reality display. Then, users could use their phone to see more information about a person across from them that they select, ultimately trying to tag them with labels like an NSA agent might tag people they have their eyes on.

Building A Story Across Nine Rooms

As the the user walks through the exhibit, they go through several rooms, each with a singular purpose corresponding to a pieces of a news article. We designed the rooms in ViewPoint to be immersive with floor-to-ceiling interactive displays. Some rooms allow for multiple simultaneous participants, others are for one user at a time.

1. Entrance (individual): familiarizes the participant with the exhibit and prompts them to download the mobile app. Once their door is ready, their name shows up and they enter the press pass room.
2. Photo-Booth (individual): users get their photo taken and a press pass is printed, delivered through a slot on the wall. A press pass is the key participants use to move between rooms and it updates the system to where each user is.
3. Story (group): participants are familiarized with the fictional backstory as they walk down a hallway. Photos on the wall are representative of videos.
4. Interviews (group): after the participant has learned the back story, they are able to interview someone out a handful of people. The interview is conducted through the user’s phone’s microphone. The wall display updates as questions are asked and responded to. Each room in ViewPoint is accessible for a limited time, forcing the participant to make their choices quickly — similar to what a journalist has to do in the field.
5. Photos (group): in this room, participants may select a photo for their story using their phone’s camera. Each decision to focus on a particular element of the story (e.g. emotional, reactionary, political) alludes to the participant’s biases and shows the difficulty journalists face every day.
6. Author (group): in order to save the participants from a lengthy writing process, ViewPoint allows them to choose an author. Each author can pitch their version of the story with question/answer interactions similar to the earlier interview room.
7.1. Headline (individual): the user types a headline for their story on their phone. This live-updates the wall in the headline room. In the background, this headline will get analyzed for sentiment — to be used in the final analysis.
7.2. Publisher (individual): we assume that the participant is an independent editor. As such, they must submit their story to a publisher.
8. Private Analysis (individual): the user walks into the next room to see their private analysis which includes how structured the article is, the number and side of sources, the overall tone, and the overall political leaning. Publishers may decline the article if it doesn’t match particular viewpoints or styles. We present the overarching information on the wall with detailed information on the users’ phone.
9. Public Analysis (group): the final room showcases article snapshots and analyses including preferred publishers vs. style matches, trust levels by ideological group, and overall biases.

Research, Mechanical Turk, & Bias Analysis

Our initial research consisted of us finding and summarizing articles, both about media mias and about the FBI v Apple encryption case. Our literature review showed us possible pathways of media bias.

An initially centrist voter who watches an extra hour of Fox News per week would be up to 7% more likely to vote Republican, depending on the election.

Ali Yurukoglu of Stanford

Many Americans struggle to understand the nature and scope of data collected about them.

Lee Rainie of Pew Research

[Those] with the most consistent ideological views on the left and right have information streams that are distinct from those of individuals with more mixed political views — and very distinct from each other. […] It is virtually impossible to live in an ideological bubble.

Mitchell, Gottfried, Kiley, & Matsa of Pew Research

A diagram from Pew Research that inspired parts of our project. It shows how much individuals from different political ideological groups trust various news sources.

One of the articles from Pew Research showed how trust levels per news source changes based on the ideological group of an individual. This gave us the idea to test how headlines would be judged by individuals if they could or could not see the source of the headline. How much would agreeableness change?

We went to Amazon’s Mechanical Turk, a service that allows humans to complete small intelligence tasks — for instance completing a survey. Our findings suggested that

  1. Democrats trust headlines less when they know it is from Blaze.
  2. Republicans trust headlines less when they know it is from Slate.

Overall, we found the Pew data to be correct. This led us to create a design that would show users articles and the user would have to decide where it came from. We’d then confront the users’ bias by showing them where the article actually came from. This design direction was great for showing how users might be prejudiced against particular news sources, but it didn’t get to the deep human core of journalistic bias. So we re-designed our project into what ViewPoint is today, a short experience as an editor.

Ryan during one of our refinement brainstorming sessions. Here, we spent a few moments jotting our direction ideas down on Post-Its. Then, we voted yes/maybe/no on each note to compile a direction for our project.

The Benefits of Prototyping in 3D and VR

Left: early concept of stations and a sketch of an interview room. Right: isometric sketch of mine that shows a possible room layout. The isometric sketch sped up the creation of the first VR models.

Sketching ideas helps us move quickly and get the overall picture. However, sketching doesn’t give us the experience of being there. For such a spatial exhibit, we found it to be hugely helpful to our designs to stand in the exhibit experiencing it virtually. We got further confirmation that virtual reality strengthened our designs after we saw other teams present work which did not properly take into account a human-height vantage point.

To keep us designing at the same resolution and focal areas, I created a guide for the team based on tests I did with A-Frame and my Google Cardboard.
Back to Top