(manufactured) realities

Project by: April De Zen, Veda Adnani and Omid Ettehadi
GitHub Link: https://github.com/Omid-Ettehadi/Manufactured-Realities

ezgif-4-61972ea3b4f0

Figure 1.1: Introduction screen, featured on projection screens and mobile devices

Project overview
“Falsehood flies, and the Truth comes limping after it,” Jonathan Swift
(manufactured) realities is a project created to step out of the status quo and truly evaluate whether our beliefs are based on facts. In order to do this, the team selected six news stories, three true stories, and three stories that were released and later on retracted or debunked by credible news organizations. The increase in conflicting information has fuelled much discussion. ‘Our inability to parse truth from fiction on the Internet is, of course, more than an academic matter. The scourge of “fake news” and its many cousins–from clickbait to “deep fakes” (realistic-looking videos showing events that never happened)–have experts fearful for the future of democracy.’ (Steinmetz, Time Magazine, 2018) The six articles are presented, and after each, the participants will be given a chance to submit a vote on whether they believe it or challenge it. Once all votes are in, the servo device will show the results of the poll as the projector reveals whether the story is true or fraudulent. Once all six questions are answered, we end the exercise on a result page which will show the overall accuracy of the group and also the accuracy of each question.

screen-shot-2018-11-24-at-8-17-50-pm

Figure 2.1: Veda, Omid and April on presentation day
Figure 2.2: (manufactured) realities on display, projection in back and servo device in front

Intended context
How we receive information is more complex than ever before. It used to be as simple as picking up a book or a newspaper to update yourself on the news, current events or specialized educational materials. These media sources are held to rigours ethical standards, and if they ever breach this code of conduct, a retraction must be printed and released to the public. The more retractions, the less credible the publication becomes. Nice and simple. In 2018, this simplicity has been turned on its head all thanks to the internet. Nowadays, we are constantly overwhelmed with information, some of it playful and useless, some educational and enlightening but some streams of information are created only to conflict and confuse the public. With all of this content being released hourly to various public channels, there is more emphasis on releasing the information first and less concern about releasing accurate information. There has been a shift from reading credible sources by publishers to consuming information by our favourite ‘content creators’. These new creators of content do not run by any rigorous code of conduct and simply publish what they believe to be true. They also share articles with their subscribers and/or followers, further amplifying the story without knowing (or caring) if it is in fact credible. ‘A false story is much more likely to go viral than a real story’ (Meyer, The Atlantic, 2018) Media awareness is a long-standing issue; it is very easy for the person with the microphone to sway a crowd in their favour. The time we live in now goes far beyond that; we simply do not know what to believe anymore.

Product video

Production materials
Our aim in this project was to use a combination of hardware and software to create a seamless and straightforward evocative experience to spark conversation. The following materials were used for this project:

  • 1x Arduino Micro
  • 1x Laptop
  • 1x USB cord
  • 1x Strip of NeoPixel Lights
  • 2x Servos
  • 1x Breadboard
  • 1x Plywood
  • 1x Parchment paper
  • 1x Projector

Ideation
During the ideation phase, the team came up with many exciting options. The focus of each of our ideas was to create something that is extremely relevant and pertinent.

Idea 1: Constructing communication systems in a collapsed society
Communication devices can be made of scraps, discarded plastic debris and e-waste
This can be a way to communicate levels of remaining natural resources
‘Citizen scientists can take advantage of this unfortunate by-product of “throwaway culture” by harvesting the sensor technology that is often found in e-waste.’ (link)
Our team went to watch the Anthropocene movie for inspiration

Idea 2: A better way to communicate coffee needs
Texting and slack is not a sufficient way to get the coffee needs of a large group
Create an ‘if this then that’ type app, with your regular order saved and ready
When someone asks the app if anyone needs coffee, instantly they receive the orders

Idea 3: Broken telephone game
Using the sensors, we already have on our phones
Create a game to pass messages from phone to phone
Somehow creating a way to scramble the messages

Idea 4: Digital version of a classic board game
Pictionary, a digital version that can be played in tandem, speed rounds?

Idea 6: Think piece, ‘Challenging assumptions and perceptions.’
There is currently no way to validate content and communications on the internet
Create a survey for everyone to do at the same time, generate live results on screen
Use this to gauge perceptions or bias

One we listed out all the ideas, we gave each other a day to think through what we feel most excited to do. We returned the next day, and unanimously agreed to proceed with our think piece ‘Challenging assumptions and perceptions.’ We were also mindful about the potential for the scalability of this experience. While the prototype itself was built for a small group of people, the intent was to set the foundation for a product that can easily scale to more extensive experience and audience in the future.

Process Map
Once the idea was finalized, the next step was to flesh out all the details, including the flow of the experience. We began the process by creating the user flow diagrams. We broke down the hardware, software, and API instances, and how each of them is interconnected. It was vital to iterate the different pieces of the puzzle and see how they fit together.

cnc_exp4-2

Figure 3.1: User flow diagram

Wireframes
Once the flow was set, we focused on information architecture across all the devices. We used Adobe Illustrator to create wireframes with placeholder content. This helped us visualize the skeleton for the experience. We decided to use the projector as the centrepiece and the mobile phones as a balloting device.

Projector Experience Wireframes
The Projector experience would hold the critical question screens, the response screens and the final result screen to conclude the experience.

newswireframe-1

newswireframe-2newswireframe-3

newswireframe-4

Figure 4.1: Projector Wireframes

Mobile Experience Wireframes
Mobile devices around the room will function purely as ballots, and the projector will take center stage as soon as the voting process ends. The team put much consideration into the flow of the participant’s attention. Since there would be three interfaces in play, we made sure to include as much visual feedback as possible to make sure participants knew where to look and when.

 

phonewf1

phonewf2

Figure 5.1: Mobile Phone Wireframes

Finding the news stories
The team took the selection of stories very seriously and took the time needed to research and find surprising news that shook the world when it was released. We remembered stories that had stood out for us in the past, and looked for current pressing issues that were creating news. We also divided the stories into true reports and false ones. For this project, we felt it was important not to make up false stories, but instead, find stories that were released as true before being retracted later. This was crucial for the overall project objective. The team checked multiple sources and created a database of 15 stories initially, before shortlisting 6 with a random order of fake and true stories and thereafter began the UI design process.

screen-shot-2018-11-25-at-2-31-34-pm

Figure 6.1: April and Omid searching for news stories
Figure 6.2: Veda and Omid searching for news stories

User Interface Design
We began the interface design process with the introduction screen. We didn’t want to create something that was static, so we went with a moving background. For the identity design, we wanted to create something striking and beautiful at the same time. We used Adobe Illustrator and Photoshop for all the designs. Another difficult problem we were facing was the use of three different interfaces. The team put much consideration into the flow of the participant’s attention. Since there would be three interfaces in play, we made sure to include as much visual feedback as possible to make sure participants knew where to look and when.

ezgif-4-61972ea3b4f0

Figure 7: Introduction screen, displayed on projector and mobile devices

The team thought it would be essential to add a disclaimer screen to ensure that the exercise is well accepted. While we tried to be as mindful as possible while picking the stories, we knew that it was equally important to respect our cohort and faculties sentiments. Then we shifted focus to the news article in question.

screen-shot-2018-11-25-at-11-29-47-pm

Figure 8.1: Top right, Screen which displays the article
Figure 8.2: Top left, Screen which displays whether article is true or not
Figure 8.3: Bottom right, Screen which displays disclaimer
Figure 8.4: Bottom left, Screen which displays final results and accuracy percentage

screen-shot-2018-11-25-at-2-45-19-pm

Figure 9.1: First draft of the User Interface
Figure 9.2: Veda hard at work designing two versions of UI, one for projector and one for mobile

ui-mobile

Figure 10.1: Right, Mobile Screen UI for ballots
Figure 10.2: Left, Mobile Screen, feedback to allow a user to know they have completed the vote

Programming
Controlling the flow of the experience was a high priority. To do this, we decided to create three different pages. A page to display the news articles and the answers on a projection screen. An admin page, giving a button to a ‘moderator’ who will keep track of what page will be shown and a user page which acts as a ballot for every person involved in the experience. We know how important it was to choose appropriate articles that are related to today’s world and also topics that people are very opinionated about. To have more time to find the right questions, we decided to start with a simple structure for the program.

Connection to PubNub
For our first step, we created the connection between the three pages to the PubNub and tested the communication between the three pages. The admin page sends data to PubNub commanding which page to be shown on the other two pages. The user page receives data from the admin page and transmits data to the display page regarding the votes of the user. The display receives data from the admin and the user page to display the number of votes. Once everything was working, we added all to the articles to the display page and tested the program to make sure everything goes correctly. We then added a final page to show the results of the survey and allow the users to reflect on the experience that they just had.

screen-shot-2018-11-25-at-2-28-19-pm

Figure 11.1: Connection to PubNub and testing
Figure 11.2: Veda and Omid working on UI and Coding
Figure 11.3: Testing of the final infrastructure

Servos and NeoPixel hardware
After creating the basic coding structure and testing it by sending messages from each page to other, we added the communication to the Arduino Micro by the Serial Connection. Initially, we wanted to use the Feather board and connect the board to PubNub, but because of the difficulties we found connecting our boards to the OCAD U’s Wifi connection, we decided to stick with the Arduino Micros that we have already gotten to know well. We tested the communication by sending angles for the servos to the board based on the votes received in each category. The original idea included the lights to transition into 3 phases; a standby state would have the white lights, polling state would use a colour library from adafruit to show a rainbow of colours. Finally, when the poll is complete, the lights will turn to green. Unfortunately, the coding for the pixel lights fought with the servo coding, so we had to replace the beautiful colour library option and opt for solid RGB colour, blue matched nicely with the final designs. The final use of the pixel lights only included one state, it flashed on and off with a 10 second delay for each.
Adding Sound
We wanted the users to be focused on answering, and we decided to add audio recordings of each news item to keep a good pace and allow the participants to ingest the content with ease. Adding the sound to the code wasn’t difficult, once it was recorded and edited.

screen-shot-2018-11-25-at-2-41-08-pm

Figure 12.1: Setting up the circuit for the servos and NeoPixel lights
Figure 12.2: Testing the servos before completing fabrication

circuit_bb

Figure 13: Final Circuit Diagram

As a final step to make sure the experience was smooth, we tested each component of the program and ran many trials to make sure everything worked correctly.

screen-shot-2018-11-24-at-8-38-11-pm

Figure 14.1: Running final tests before presentation begins, ballot and article screen working correctly
Figure 14.2: Servo device and article results screen working correctly

Fabrication
Although it wasn’t necessary for this project to have any hardware, we all wanted to add something tangible for two reasons. First, to utilize our student access to a maker lab and learn more about how to use the equipment. Second, we wanted this experience to only happen in person and not be a simple online survey that disappears from your mind the moment it is completed. Our team had an idea nailed down quite early, and we were eager to get the fabrication underway as soon as possible, knowing that other teams will be using the Maker Lab. The goal was to finish the fabrication process in the first week. We initially wanted to 3D print a casing for the servo motors since we knew the laser cutting machine was down. Using both Illustrator and Autodesk Fusion 360, we created an STL file that could be read by the printer. This was a big learning curve since no one on the team had ever used the 3D software before. On Wednesday we met with Reza, we were advised to wait for the maintenance of the laser cutting machine to be completed since the execution of our design would be better using that device. Base on Reza’s advice, we went back to the original illustrator file that could be used by the laser cutting software. Waiting for the laser cut machine to be fixed did through us of our schedule, but we were able to pull it all together.

screen-shot-2018-11-24-at-8-23-02-pm

Figure 15.1: 3D View of the design, front view
Figure 15.2: 3D View of the design, back view

The first attempt was cut on cardboard to check the dimensions of the design and the quality of the cut patterns. In this process, we realized how small the lines in the background pattern were once laser cut. Some of the lines broke as soon as they were touched. Some of this was due to the ripples in the cardboard. To make sure this would not happen in our final product, once again we went back to the design and increased the thicknesses of the problem areas.

screen-shot-2018-11-24-at-8-27-56-pm

Figure 16.1: Laser cutter in action
Figure 16.2: Prototyping on cardboard, pattern was to intricate and needed to be reworked slightly
Figure 16.3: Prototyping on cardboard, front of the design

We decided to go with a thin layer of plywood. Reza was concerned that some pieces would jump out during the cutting process and either hurt the machine or the design, so he set the depth of the laser incisions to not completely cut through. Since there was a natural curve to the piece of plywood, some pieces came out quickly but other parts needed to be cut out later on using a x-acto knife.

screen-shot-2018-11-24-at-8-31-46-pm

Figure 17.1: Assembling final wooden casing that will house the servo device
Figure 17.2: Cutting out the patterns on the wood body
Figure 17.3: Cutting out the patterns on the wood body, back view

For the final project, we decided to add an LED Strip to the design so that we could highlight the moments when the users had to look at the servos. To hide all the electronics in the design and further infuse the light, we added a layer of parchment paper behind the patterns.

screen-shot-2018-11-24-at-8-35-41-pm

Figure 18.1: Final circuit prototype, back view
Figure 18.2: Adding parchment paper to hide the circuit and diffuse the light more effectively
Figure 18.3: Fabrication of final product

Presentation & Critique
For the critique, we wanted to make sure that everything would go smoothly and started early in the day and made sure we had enough time to test the design after connecting everything in the Gallery. Once connected, we ran through a few tests and triple checked that the servo was working. Once the computer was connected to the projector, the display would not go to full screen when we were using the Firefox. To improve the presentation of the project, we decided to change to another browser. Unfortunately, the serial connection was left idle and disconnected before the actual presentation causing the servos not to move at all.
The feedback we received was positive. The topic was relevant, and many shared similar concerns. There was a concern for the mobile device to continue showing the timer after the vote was cast. There was shock from everyone seeing the final results page display the overall accuracy. It was quite low, sitting at a 41% accuracy rating. Two articles, in particular, were quite convincing although they were both untrue and most people had believed. Having done much research on fake news, we expected people to accept false ideas that fell into their own confirmation bias.

Reflection
Upon reflection, there are a lot of minor tweaks we would make to this project based on the flow of the first presentation to a large group of people. First, the sound coming from the computer was not loud enough, and many participants were straining to either hear or quickly read what was on the screen, a wireless speaker is required. Second, we tried to design the experience with little interaction by our team needed during the polling. Working off this assumption, when we noticed a silence in the room or a look of confusion from a participant we realized we needed to be more prepared to guide them through. Third, after the vote was cast, we moved on to reveal the truth behind the story. The issue we noticed was there was too much content provided, and we don’t think anyone read what was on the screen. This is a flaw in the UX that can be fixed with a bit of editing and altering the hierarchy of the content. Forth, and possibly the most important, we did not put enough thought into the interface used by the ‘moderator.’ This interface did not show the timer which the participants saw on their screen and wasn’t completely sure when to switch to the next article. Also, if/when the servo device decides not to work it would be a bonus for the moderator’s interface to see the voting results so at least it can be delivered to the participants verbally. The team learned a great deal about effectively providing a message to a group of people using multiple interfaces, effective communication feedback and the importance of presence upon delivery.

References
Steinmetz, K. (2018, August 09). How Your Brain Tricks You Into Believing Fake News. Retrieved November 26, 2018, from http://time.com/5362183/the-real-fake-news-crisis/

Meyer, R. (2018, March 12). The Grim Conclusions of the Largest-Ever Study of Fake News. Retrieved November 26, 2018, from https://www.theatlantic.com/technology/archive/2018/03/largest-study-ever-fake-news-mit-twitter/555104/

English, J. (2016, November 08). Believe It Or Not, This Is Our Very Own River Yamuna. Retrieved November 26, 2018, from http://english.jagran.com/nation-believe-it-or-not-this-is-our-very-own-river-yamuna-72099

“The Office” Women’s Appreciation. (n.d.). Retrieved November 26, 2018, from https://www.imdb.com/title/tt1020711/characters/nm0136797

McLaughlin, E. C. (2017, April 26). Suspect OKs Amazon to hand over Echo recordings in murder case. Retrieved November 26, 2018, from https://www.cnn.com/2017/03/07/tech/amazon-echo-alexa-bentonville-arkansas-murder-case/index.html

Gilbert, D. (2018, November 20). A teenage girl in South Sudan was auctioned off on Facebook. Retrieved November 26, 2018, from https://news.vice.com/en_us/article/8xpqy3/a-teenage-girl-in-south-sudan-was-auctioned-off-on-facebook

The truth behind ‘Fake fingers being used for orchestrating a voting fraud’ rumour. (2018, September 30). Retrieved November 26, 2018, from https://www.opindia.com/2017/02/the-truth-behind-fake-fingers-being-used-for-orchestrating-a-voting-fraud-rumour/

Sherman, C. (2018, November 21). Why the women suing Dartmouth over sexual harassment are no fans of Betsy DeVos. Retrieved November 26, 2018, from https://news.vice.com/en_us/article/d3b3dz/why-the-women-suing-dartmouth-over-sexual-harassment-are-no-fans-of-betsy-devos