In this project we explored the realm of public displays, especially the intersection between public and private spaces (mobile phones). And we designed for interaction dynamics under both personal and group settings. We also leveraged emerging technologies such as Google Cardboard and Mozilla A-Frame to enrich the experience.
Type Interactive Display Design, Mobile App
Date Spring 2016, 6 weeks
Course Interaction Design Studio
Tools Sketch, A-Frame, inVision
Skills Scenarios, Storyboarding, Visioning, Interface Design
Roles Researcher, Designer
Team Andrew R. McHugh, Ryan Huber, Tiffany Wang
phone image.png
 

For best experience with the interactive display, please use a VR-compatible browser or mobile phone. If you are using a computer, please use "WSAD" to navigate, and use your mouse to move the focal point.


Problem Framing and Design Statement

We want to study the 2016 iPhone encryption dispute to understand how media bias affects the debate surrounding privacy and encryption so that we can design an interactive public display that raises awareness and encourages critical thought.

Research

Case Analysis: FBI v Apple

Various ideological groups have different trust levels to news sources (Source: Pew Research)

We followed the progression of the case closely, paying attention to how different media sources reported this issue. More specifically, we looked for whether they covered the key facts of the case, and whether they presented both sides of the story.

Literature Review: Pew Research and news article

Another focus of our research is on the relationship between political leanings and media trustworthiness. A survey conducted by Pew Research Center presented an intriguing view on how the trust levels of news sources by different ideological groups.

Data findings: Surveys & Mechanical Turk

We then drafted a survey on media perception and deployed it through Mechanical Turk. The results showed that when knowing the source of the publication, viewer's agreeableness with the content would be affected.

 

Personas

When designing our personas, we wanted to cover a range of ages, occupations, and political beliefs, and also consider the needs and wants of customers who are very different from ourselves. We developed four personas: Kenzi, Amber, Raymond and Billy, who ranged in age from 20-70.

Amber Jones was ultimately selected as the persona we would demo during our final presentation. More than 60% of the respondents to our initial survey were female, and close to 30% were in the the 28-33 age range. Additionally, we worked with knowledge that we would be able to test our prototype with a user matching Amber’s customer typology.

 We developed four personas, covering a range of ages, occupations, and political beliefs

We developed four personas, covering a range of ages, occupations, and political beliefs

 

Final Design - A walkthrough

1. Intro Room – Participants are introduced to the interactive experience here. They are prompted to download the accompanying mobile app, and enter one of the photo booths for their press pass. 

2. Photo Booth – Participants enter this room to get their photos taken. They will get a press pass with a photo and a bar code, which will be used to open subsequent door – also a way for us to log and track user interactions during the experience.

3. Story Hall – Participants familiarize themselves with the storyline. Here they learn about the proceedings of the kidnap and some critical events associated with it as they walk down the hallway.

 ddWrite here...

4. Interview Room – Here participants choose one or more people to interview based on the interviewee's background and relationship with the kidnap. Since time is limited (we wanted to create the same pressure for an actual news report), participants need to choose carefully – interviewing too many people would risk limited conversation depth for each one of them.

ViewPoint_Picture_Room

5. Picture Room – Participants use their mobile phone to snap a picture to be used in their final report. The pictures presented here shed different lights on the tone & style of the would-be article.

ViewPoint_Select_Writer

6. Writer's Room – Participants choose a writer for their story. Since the actual time participants have for the interaction is limited, we ask them to pick a writer based on the writer's experience, instead of writing the story themselves.

 

ViewPoint_Write_Headline

7. Publishing Room – Participants write a headline for their story and submit it to a chosen publisher. Studies indicate that most news readers only read the headlines, hence its critical importance. Of course, the publisher matters, too.

ViewPoint_Private_Analysis

8. Private Analysis Room – Participants are revealed the actual purpose of this interactive experience. A bias analysis is presented to them based on their previous selections of interviewee(s), picture, writer, headline & publisher. Participants can use their mobile app to learn more on how the metrics are devised.

ViewPoint_Public_Analysis

9. Public Analysis Room – Participants learn more about media bias and would have a chance to interact with other participants. Here we show the aggregate result of all participants: what are the top publishers people submitted their articles to, and how many of them are actually accepted. In addition, we also show snapshots of articles so participants can see what others have created.

The Process

Summary of Design Process

  1. Ideation and Visioning - explore potential topics and discuss what message we want to convey
  2. Sketches & Wireframes – create and revise wall displays and the mobile counterparts
  3. Envisioning the Space – imagine and design an interactive space that is engaging
  4. User Testing & Feedback– test our concept and improve based on user feedback
  5. Hi-Fi Iterations & 3D Prototype - refine our final design and build it with A-frame

Ideation and Visioning

We cycled through stages of drafting ideas and critiquing them. Each cycle increased in specificity and production quality.

Narrowing down ideas with voting & scamping

We put up sticky notes with ideas on them and read them out when we stick them on the board. After a 10 minutes ideation session, we voted for ideas worth exploring vs. ideas that are “inspirations”. 


 

Individual brainstorming

From top to bottom, left to right:

  • Andrew: tag user with labels based on their online presence
  • Iris: 4 digit pin code to track user’s interaction through the whole engagement
  • Ryan: walking experience with gesture-voted preferences
  • Tiffany: create headlines based on newspaper articles

Upon discussion, we decided to let participants walk through an exhibit, stopping at multiple wall displays, reading articles, and writing headlines. At the end of the exhibit, text analysis would be used to inform the participants of their biases.

We decided against reading full articles.

We decided participants could craft a story of their own, acting as a sort of editor.

Sketches & Wireframes

After choosing a direction, we all sketched out interactions for parts of the story (e.g. interviews, photos, authors, headlines)

We decided to create a more immersive experience by turning each part of the story into its own room. Participants will be focused on the section they are in and the section will fill their field of view.

 

Envisioning the Space

As we evolved our individual room designs, we worked on tying them together for a unified experience. We increased specificity and made sure information from one room was utilized in the subsequent rooms.

 A sketch of the exhibit room layout, progressive and malleable

A sketch of the exhibit room layout, progressive and malleable

 Wall layout guide to help us design the best viewing experience for participants

Wall layout guide to help us design the best viewing experience for participants

 A sketch of how we guided the user through the exhibition during testing

A sketch of how we guided the user through the exhibition during testing

User Testing & Feedback

We tested our prototype with a user who is similar to the Amber Jones persona. She was engaged with the interaction process, and was pleasantly surprised with the final revelation of the purpose.

In the second phase of user testing, we were able to show the user with a more complete design that reflected the final product we wanted to present. And we tweaked design details to make the experience more intuitive and seamless for the participant.

 

Hi-Fi Iterations with 3D Prototype

We continued to iterate on the 3D prototype, including interactions. We simultaneously finished the mobile interactions. We walked through our exhibit until we were satisfied.

 An example of our final design to show the interactive interface when participant is standing in front of the interviewee

An example of our final design to show the interactive interface when participant is standing in front of the interviewee

Final Flat Designs

For the complete Hi-Fi flat designs for the interactive exhibition and mobile app, please visit this Google Drive folder.

Interactive Display (A-frame)

For best experience, please use a VR-compatible browser or mobile phone. If you are using a computer, please use "WSAD" to navigate, and use your mouse to move the focal point.

 The interaction space of our final design

The interaction space of our final design

 

Mobile App (Marvel)