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|
|Team||Andrew R. McHugh, Ryan Huber, Tiffany Wang|
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.
Case Analysis: FBI v Apple
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.
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.
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.
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.
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.
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.
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.
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.
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.
Summary of Design Process
- Ideation and Visioning - explore potential topics and discuss what message we want to convey
- Sketches & Wireframes – create and revise wall displays and the mobile counterparts
- Envisioning the Space – imagine and design an interactive space that is engaging
- User Testing & Feedback– test our concept and improve based on user feedback
- 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”.
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.
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.
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.
Mobile App (Marvel)