Final Project Documentation

1. Project Summary and Research Question.

1.1 What

For my final thesis project, I will represent story interactively and dynamically. I plan to use D3.js and CSS animation to create a web-based interactive data visualization.

1.2 Research questions-WHY

If it is possible to use data visualization with qualitative data to evoke the audience’s emotion.

How can we use data visualization as a meaningful tool to represent a vivid story of human self?

What is the best approach for representing the data of real bodies, systems and structures of power in the more full world?

What role does sentiment analysis play in the data storytelling?

How to mix quantitative analysis with sentiment and emotion data?

What is the best technique/most appropriate approach to humanizing data through a data visualization project?

1.3 How

For my final thesis project, I will represent story interactively and dynamically. I plan to use D3.js and CSS animation to create a web-based interactive data visualization.

1.4 So what

Emphasizing on the demonstration of the public media overstating the fact about Britain Mad Cow Disease Outbreak and the indirect political and economic impact, my project aims to use Britain Mad Cow Disease Crisis as a lense to encourage people to reconsider the correction of the information communication and the functions of the mass media.

2. Review of 3 Related Digital Projects

2.1 A more perfect union by R. Luke Dubois

rld_05ca_area1-441

Figure 1: The map of the bay area.

What:  A More Perfect Union is a data visualization artwork based on online dating and the United States Census. This is a map that provides an alternate version of the 2010 census and reveals how the inhabitants of particular cities understand themselves, based upon personally-descriptive data provided through dating websites. In this project, the data artist, Dubois, collected words provided by 16.7 million people describing themselves and those they desire.

How: In the summer of 2010, Dubois joined 21 different online dating services and collected their contents, downloading 19 million profiles of single Americans. He sorted these profiles by zip code and analyzed for significant words. He designed a set of prints shows a road atlas of the United States, with the city names replaced by the word used by more people in that city than anywhere else in the country.

Why: He started this project in 2008. He attempts to create an alternative census, based not on socio-economic fact but on socio-cultural identity. The final outcome which consists of more than 200,000 unique words, and gives an imperfect, but extremely interesting, perspective on how Americans describe themselves in a forum where the objective is love. In his documentary film “R. Luke DuBois: Running Out of Time,” he said he is interested in “how we accumulate the vocabulary for describing ourselves and where that comes from.” He always tries to use data as a tool that can tell us who we are and what is our personality.

So What: I like the idea of not analyze the data from a socio-economic side but from the more human side. This project is an excellent reference for visual designer considering of the humanity of data. This project also provides a hint guiding the visual designer how to represent a non-measurable concept, such as humanity and personality, through data visualization.

2.2 Bear71 by Leanne Allison and Jeremy Mendes

bear-71-3

Figure 2: Bear71’s interface.

What: Bear71 is an interactive documentary about a grizzly bear in Banff National Park, who had been monitored by the wildlife conservation offices for over a decade. Users are invited to follow Bear 71 through her life journey, from the moment she is tagged to the moment of her untimely death, in a virtual experience. This web documentary explores the connections between the human and animal world and the far-ranging effects that human settlements, roads, and railways have on wildlife. This project allows the user not only follow her movements by scrolling over the cameras but also listen to the audio story which narrative the story of her life.

How: Optimized for the Google DayDream, Bear71 works across platforms in WebVR without the need for a download. This project uses VR data-visualization to explore the connection between humans, nature, and technology. Bear71 encompasses 1 million photos and pieces of content that helped contribute to the creation of the data grid.

Why: This project uses the latest technology to deeper explore the connection between humans, animals. The story of Bear 71 is not an isolated case. The similar story happens in places all over the globe where humans and wildlife intersect. This project also highlights how human growing dependence on technology divorces us from nature. The idea of being monitored raises questions about how we view nature, how we view ourselves in relation to technology and nature, and the nature and validity of surveillance both in the wild and within human society.

So What: After being released, this project achieves significant accomplishment. This was considered as a pioneer project that defines the term “interactive documentary”. Schools across Canada have adopted the use of Bear71 in their classrooms for educational purposes. Parks Canada and CP Rail started making changes to help protect wildlife partly due to awareness raised by Bear 71. The combination of “documentary”, “interactive technique” and the “data visualization” present us a very new but nonlimited area for humanizing data and evoke emotion.

2.3 We Feel Fine by Jonathan Harris

wefeelfine

Figure 3: We Feel Fine.

What: We Feel Fine is an Interactive website created by Jonathan Harris and Sep Kamvar. This project searches the internet every 10 minutes for expressions of human emotion on blogs and then displays the results in several visually-rich dynamic representations. Through collecting the world’s newly posted blog entries for occurrences of the phrases “I feel” and “I am feeling,” this project sorts the data recording the full sentence and context in which the expression occurs into various polarities (happy, sad, depressed, etc.). From these, they also obtain metadata related to the poster which includes the author’s gender, age, location and local weather conditions.

How: To create this project, Harris, and Kamvar had recorded nine million feelings from 2.3 million blogs, with 15,000 – 20,000 entries added daily. They created a series of playful interfaces which allow the user to click the data particle to view the full sentence/photograph of it contains.

Why: This project reflects what’s on people’s blogs, what is in people’s hearts and minds. By using “I feel” and “I am feeling” this emotional tag, the stranger people are bond very closely and reveal the beauty in everyday ups and downs of life.

So What: This project shows me a way of humanizing the data. As a visionary artist-storyteller, Jonathan Harris always wants to make the virtual web world reveal the emotional world of human. In this project, he shows me a way of representing data in a quantitative way but also with text/photograph contexts. This way help us to deepen comprehension of the human condition and find out what we’re all feeling and looking for.

3. Image Documentation of Prototype Process

3.1 The first prototype

My initial research questions were:

Are there human insights missing from today’s big data and selective algorithms? If so, how can we reduce this quantification bias?

As a visual design, if it is possible to create a tool/sample to represent not only the quantitative data but also the qualitative data?

How can we use data visualization as an essential tool to represent a vivid story of human self?

What is the best approach for representing the data of real bodies, systems and structures of power in the more full world?

img_6660

Figure 4: The research questions poster.

Above image is a poster which contains a lot of suggestions from my colleague and Emma. All of them are very useful and inspired me. I took the one “a map of a day in your life” for my first prototype. To shape the idea further, we made a mind map. Below is the image of my mind map. This step helps me to clarify the critical aspects of this prototype.

img_6659

Figure 5: My mind map for the first prototype.

In this stage, I plan to use my email connecting history as the data set. By translating this data set into a visual language, my story of social status, geographic changing, and other aspects of my life can be represented from the information visualization.

For this prototype, I want to use personal data as a lens to check if digital technology can be a tool to tell the story/context behind the data. With this goal, I design my first prototype which is a map visualizing my email information from July 01 to July 10 in 2017.

img_6673

Figure 6.1: My first prototype.

img_6677

Figure 6.2: My first prototype.

img_6676

Figure 6.3: My first prototype.

img_6675

Figure 6.4: My first prototype.

img_6674

Figure 6.5: My first prototype.

  • Name Tag. I made name tags for myself and people who contacted me at that time. I put all the name tags on the floor. The distance between my name tag and others’ stands for the relationship between us. The closer our name tags are, a closer relationship we have. To tell tester my name tag is the starting spot, I draw a pink star behind of my name to distinguish it from others.
  • Black Strings. My name is linked with others’ by black tapes which stand for the number of emails sent and received between us.
  • Small Cards. For each name tags, I put a few small cards around. These small cards contend some detailed information about who this person is, where he/she is, and what brief context is in our emails. All the information are provided in the form of the phrase.
  • The Period: July 01 to July 10 in 2017. There are two reasons for choosing this period of data. Firstly, there were a lot of things happening at that time, and my social connection was complicated. A sophisticated data set will leave more space for my tester to guess the narrative behind the data. Secondly, the date of testing this prototype is June 6th. If the tester knows me, they can compare my current situation with what happened a year ago.
  • Email. In this prototype, I choose my email as the data set. The first reason for using my email as the data set is easy to get. And other reason to chose it is because email is the social media which reflect parts of the people’s reality. Different from Facebook, Instagram, and other social media, the connection through email are mostly real connection. And through the email data, we can easily find a person’s employment status, married or not, financial situation and so on. So many stories can be found through emails. Therefore, I choose email as my data set for this prototype.

fullsizerender

Figure 7: User Journey.

Based on the comments from Ana and Emma, I did some adjustment. Instead of making a paper map, I will make the name tags and put them on the floor to create a map. The user flow in this prototype should be:

  1. Start from my name tag to view this visual as a whole and gain a general idea of the story.
  2. Move to any spot interest to them.
  3. Check the detailed information around this spot and organize the story behind this information.
  4. Find the next exciting spot and move there.
  5. Repeat the actions of step 3 – step 5.
  6. The experience will be finished after the user checks all the information.

Before the user finishes this experience, I won’t explain the story to users. After the tester completes the process, I will make a short interview asking some questions about this data map.

The questions will include but not limited with:

  • Based on the information you got from this map, can you briefly describe what is happening to me?
  • Does the storytelling of personal data interest you? If yes, can you assume what the reason is? If no, can explain why and provide a suggestion topic?
  • Did you feel the interaction/process of digging the information trigger your interests of the data?
  • What is the reason you choose to check the information in this order?
  • What is the most interesting things for you in this experience? Why?

By asking those questions, I want to test:

  • If the map will be a useful narrative method for data visualization + storytelling.
  • What will trigger people’s interest?
  • Does everyone feel interested in personal data? If not, what topic are they interested in?
  • How people collect and analyze the data in this experience?

The first prototype PART 1: https://youtu.be/TOBSljAPbIA

The first prototype PART 2: https://youtu.be/5rxu-x3hNMg

The first prototype PART 3: https://youtu.be/LPXr4T2wNQ0

3.2 The second prototype and its revision.

My second prototype is the information graphics of the historical facts about UK Mad Cow Disease Crisis. One of the primary feedback I got from thesis 1 in last week was figuring out a methodology which can help me to structure the network of data since my data set seems to be a complex data source. Based on this feedback, I tried to involve the mapping as the research methodology and the method of blending big-thick data into the produce my second prototype. This methodology and method help me to structure the complex data sources which are from different perspectives and were presented in various medium. In this way, I intentional achieve a holistic view of the data structure. Here is what I got after working with the mapping as research methodology and the method of blending big-thick data.

inforgraphic

Figure 8: The second prototype.

This information graphic contains three types of data:

The left side is two curves presenting the emotional reflection of UK Mad Cow Disease. One of them is for the public’s fear of Mad Cow Disease (which is also called bovine spongiform encephalopathy, shorted for BSE). Another is for the intention of developing the “green industry.”

The middle is presenting the timeline (18 century to 1992 ) of how/when the Mad Cow Disease start and when this disease was ended.

The right is presenting the reaction and policy which the UK and the European Union made to response the Mad Cow Disease.

I am interested in how people find out /feel about the fact that the most UK government reaction and policy of killing and burn millions of cattle have nothing to do with the prevention of the disease but try to rebuild the people’s confidence in government only.

In this prototype, I will test the following questions:

1). How my tester reflect the narrative I provide in this data set? Does this story about Mad Cow Disease Crisis trigger their interesting? What contemporary relevance (a political issue, an economic issue, the human-self, or even ecosystem) my tester can possibly get from this testing?  

2). Does the interaction I designed boot the understanding of data story? If the purpose of “deepening” the knowledge of data was accomplished through testing? If not, what suggestion would be?

3). [ I also have some self-driven questions to answer through this prototype ] How do I structure the data source based on the methodology I choose to use (mapping as research and blending the big-thick data)? Do I feel I did mix the quantitative data and also qualitative data in the process of creating/structuring this information graphic? If so, what will be the next context to add in? If not, what is missing (quantitative data or qualitative data) and what is the possible reason caused this missing?

Through testing/working with all above questions, my prototype will help me understand how the methodology and method I chose working in creating a network of my dataset and analyzing the data in a holistic view. It will also lead to think if the current data set (the story about mad cow disease) can be used as a lens to answering my research questions which are mainly about how to use data visualization to represent quantitative data and also qualitative data and how to use data visualization to reveal a cultural/human story.

I designed to conduct this testing in the following way:

  • The first step. Instead of showing my tester the whole information graphic I created, I only show my tester the middle part of it ( The middle are presenting the timeline (18 century to 1992 ) of how/when the Mad Cow Disease start and when this disease was ended. )
  • The second step. Then I will show the tester the right part of the data which was isolated, and the date of data was removed.
  • The third step. I will have a brief introduction about what this prototype is about. I will introduce the timeline presents the period (18 century to 1992 ) of how/when the Mad Cow Disease start and when this disease was ended. And I will also let my tester know all the isolated paper tags are the reactions/policy made by the UK government and European Union.
  • The fourth step. I will ask the tester to match the paper pieces( the reactions/policy made by the UK government and the European Union) with the timeline of the Mad Cow Disease. After observing how my testers to organize the information, I will show them the whole information graphic I made and lead them to compare what they feel the history is and what the real history is.
  • The fifth step. I will start a conversation to figure out how they feel about this prototype and how they feel about the story I present in this prototype. Then I will include the above survey (which I mentioned in “What questions I want to get the answer through this testing?” section) into the conversation. Through the interview to gather the feedback and response from the testers.

img_6718

Figure 9: The user checks the second prototype.

img_6719

Figure 10: The user finishes the prototype.

After discussing the feedback I collected through Tuesday’s testing with my primary supervisor, I decided to move on making a revision which will try to add more additional information sources and “transfer” the data into a visual metaphor. The below is the revision I created for Thursday’s final presentation:

01

Figure 11: The revised second prototype.

In this revised prototype, I design the timeline horizontally in the middle of the image. From left to right, it shows the starting point which is 18 century to 2001. Each red cow stands for 100,000 infected cattle, and each blue cow stands for 100,000 killed cattle. The purple curve stands for the public’s fear of mad cow disease, and the green curve is for the development of “green industry.” The spots are some additional data sources (links to related news websites, videos about mad cow disease, the articles about this outbreak, etc.). All the date and icons (the cow icons and the circle icons) should be clickable which will expand into a popout box showing more information.

In this time, I didn’t design any dynamic interaction for the audience. I assumed that this prototype will be an interactive website on which all the dates and icons should be clickable and linked to the additional information. When I tested this revised prototype, I encouraged my testers to check the figures and dates. When they “clicked” any of these dates and icons, I would show them the linked information. After my testers finished viewing the website, I asked them to discuss what story they got from this website. And then, I showed them my preview version and asked them to compare which one works the best for this story. And why (visual metaphor, horizontal layout, hidden information, etc.)?
Here is the video of the CFC final critique.

4. Project Roadmap

The below is the steps completed in this summer term (before and through the CFC)

1). Find out my exciting research area(immersive design, data visualization, visual design, human’s emotional expression in digital artwork, etc.) and meet with Kate Hartman, director of the digital future graduate program.

– Find out what is expected by my program.

– Talk about potential research areas and suitable faculty members who might be available to support me in the completion of a research project.

2). Look for references and related works that provide an introduction to the basic concepts.
3). Find a research supervisor.

In this stage, I imaged my final project would be delivered as “an immersive experience of data storytelling.” After discussing my idea with DF faculty, I found the research areas of Isabel Meirelles and Haru Ji is relevant to my field of interest, and they would love to devote their time and effort to supporting and supervising my study.

4). Pose a focused and specific research question.

In this summer term, my research questions were reformatted based on the discussion in Thesis 1 and feedback collected from CFC prototyping.

  1. a) Thesis question 1.0 version.
  2. b) The first prototype testing in CFC media lab.
  3. c) Based on the feedback received in the CFC prototype testing and discussion in Thesis 1, I formatted the research question.
  4. d) Discuss the thesis questions 2.0 version with my supervisor and polish/fix the questions further.
5). Find out the methodologies and methods for my research project.

In Thesis 1, we were asked to conduct a thorough literature search. In this way, I was able to find out the suitable methodologies and methods. It helps me to determine which study design is the best fit and the most practical approach to framing my research project.

6). The second prototype testing (CFC final presentation).

– Refine the study’s primary objective.

– Discuss the anticipated data collection and analysis methods.

– Discuss the tools/technique that will be appropriate for my project.

7). Created an expanded/polished version of the research proposal.

The proposal should contain as much detail as possible and provide the framework for the following works in Thesis 2 and ultimately drafting a manuscript. Include details on:

– Research questions

– Research methodologies and methods

– Literature review

– Expected outcomes

– Bibliography

Starting from here will be a rough roadmap which may be adjusted according to the actual deadline and requirements.

[Before November]

8). Collect and analyze the data. Come out a narrative plan based on the collected data.

According to the testing result, if appropriate, reformat the primary and any secondary research questions.

9). Make the third prototype to present my story.

– User Testing the story.

– Explore the possible presenting tools/technique further.

10). Starting the first draft of my thesis paper which should include:

– Introduction

– Research questions

– Literature review

– Context review

– Research process: the first prototype, the second one, and the third one.

[Before February]

11). Finish the thesis draft and start to modify the writing based on the feedback gathered from step 9.
12). Start to make the fourth prototype.

[Before March]

13). Finish the fourth prototype and conduct a user testing with it.
14). Finish the most part of writing except for the conclusion.

[Before April]

15). Polish the fourth prototype and create out a final project. Improve the following components:

– Visual design

– Function design

– Animation (if necessary)

– Other design elements: title/logo design, flyer/poster design, a demonstration video…

16). Come out an appropriate exhibition plan include the following details:

– A sketch of how to presenting: side view, front view, top view, etc.

– The illustrated user visiting flow

– Light and space requirement

– A list of requirement devices: the laptop, tablet, monitor, desk, chair, adopt cable, HDMI cable, charge cable….

– Some special requirements: a quiet environment, the limited visiting over a period of time, a comfortable sitting environment…

17). Finish the writing.

[April – May]

18). Finish everything, defense, and open show.

5. Flowchart of User Experience

The user flow for the first prototype should be:

  • Start from my name tag to view this visual as a whole and gain a general idea of the story.
  • Move to any spot interest to them.
  • Check the detailed information around this spot and organize the story behind this information.
  • Find the next interesting spot and move there.
  • Repeat the actions of step 3 – step 5.
  • The experience will be finished after the user checks all the information.

The user flow will be the below.

user-flow

The user flow for the second prototype should be:

  • The first step. Instead of showing my tester the whole information graphic I created, I only show my tester the middle part of it ( The middle are presenting the timeline (18 century to 1992 ) of how/when the Mad Cow Disease start and when this disease was ended. )
  • The second step. Then I will show the tester the right part of the data which was isolated, and the date of data was removed.
  • The third step. I will have a brief introduction about what this prototype is about. I will introduce the timeline presents the period (18 century to 1992 ) of how/when the Mad Cow Disease start and when this disease was ended. And I will also let my tester know all the isolated paper tags are the reactions/policy made by the UK government and European Union.
  • The fourth step. I will ask the tester to match the paper pieces( the reactions/policy made by the UK government and the European Union) with the timeline of the Mad Cow Disease. After observing how my testers to organize the information, I will show them the whole information graphic I made and lead them to compare what they feel the history is and what the real history is.
  • The fifth step. I will start a conversation to figure out how they feel about this prototype and how they feel about the story I present in this prototype. Then I will include the above survey (which I mentioned in “What questions I want to get the answer through this testing?” section) into the conversation. Through the interview to gather the feedback and response from the testers.

The user flow will be the below.

user-flow-002

For the revision of the second prototype, I didn’t design any dynamic interaction for the audience. I assumed that this prototype will be an interactive website on which all the dates and icons should be clickable and linked to the additional information. When I tested this revised prototype, I encouraged my testers to check the figures and dates. When they “clicked” any of these dates and icons, I would show them the linked information. The user flow will be the below.

user-flow-003

6. Test Report

6.1 The Feedback and Comment of the First Prototyping

note02

Figure 12.1: The notes for this testing.

note01

Figure 12.2: The notes for this testing.

Here is the feedback I gained from this prototype testing.

  • The attitude of privacy information. During this testing, I found most of my testers show a passion for my private information. One of the reason is that I was standing there and they knew me already. However, they pointed out that peeping at private details may come from a part of human nature, especially peeking at someone you already know. They mentioned that most of them used to ( or have a tendency to) make a background investigation when they know someone new. The most common choice for gathering the information is social media, such as Facebook, Instagram, Twitter and so on. The background investigation can help us get a better comprehensive understanding of this people. In some context, it also comforts the anxiety to socialize with a stranger.
  • The checking order. In the after-interview, I asked my testers the same question “What is the reason you choose to check the information in this order?” I wanted to discover what is the first thing knock their attention and what is their exciting point when checking an information map. Most of my testers choose Lauren Robert as the first spot to gather information. The reason why they choose her is also undeniable: there are the most connecting between Lauren and Feng while the distance between us is far. They are curious about why this situation happened here. The second choice for most of my testers is Josh Paglione who most of my testers know already. Since they are also familiar with Josh, they are interested in the intersection between participants themselves and I.
  • Summary a story from the information in the form of the phrase. Even all the information I provide in this map are by way of the words, I surprisingly found all of my testers can correctly organize all the information together and come out a detailed story.
  • Physically moving boots the experience? Most of my testers give positive feedback to this question. The interaction, “moving from one spot to another and flipping the information card laid on the floor,” made my tester check information with purpose and gain a feeling of actively generating the story. In this case, they are not the listen, but a creator. This shifting of position emerge them into this experience further and lead them to obtain a deeper understanding of the information.
  • Mental location and geographic location. One interesting suggestion I got is from Natalie and Joseph. They suggested me to involve more information in this map. In my first prototype, the distance between my name tag and others stands for the relationship between us and the black strings stands for the email sent and received through us. They suggest me to consider how to represent the mental distance and geographic location in my second prototype. The comparison of these two concepts will be interesting. The way of serving could be a different color, weight and texture of the strings, and different sizes of the name tag (font size of name tag). With the geographic location data involved in this project, this map will become a more complex representation, from the physical world and also the mental world(self-identification side).

6.2 The Reflection from the First testing

The original goal of this prototype is testing the narratology of using data to tell a human story. However, there are a few other interesting topics raised during this testing.

In my first section of user testing, Dikla and Jad discussed with me about the human nature of peeking others’ private information. Their opinion is gathering the information as much as possible comes from human nature which will comfort people’s anxiety of facing the stranger and changing the environment. That may be the reason why so many people are addicted to social network software.

In the second round of testing this demo with Natalie and Joseph, they pointed out the potential of representing the comparison of mental location and geographic location. Because of digital technology, human’s communication is not limited by physical distance. I can facetime with my parent in China anytime. This is entirely different from what human used to without digital media. Today, it becomes possible that we are bonded very close without meeting in person. The phenomenon of building a mental relationship off geographic limits is a unique event generated in a digital age.

In the two testings, I only get an answer to my designed user questions, but also gain fresh opinion from different perspectives. All those opinions open my eye and lead me reconsidering this project. They also provide tremendous potential for this thesis project.

6.3 The Feedback and Comment of the Second Prototyping (The First Version)

  • Self Testing. In the process of making this prototype, I just put the data/information I collected into the below module(Modes Model: Mapping as Cultural Research Practice). However, through the making, I realize each axis of the below model needs to be more specific. This module show me an excellent way to explore the network of all the information I collected, but I need to clarify what is “abstract/concrete, distribute/undistributed” in my project.
  • The choice of data source. One of my questions is “does the story about Mad Cow disease interested you?” Most of the response I got from this question is yes. All my testers seem to surprise to learn the fact in history. My prototype presents an interesting story to them, and they seem happy to know this fact. However, the contemporary relevance wasn’t naturally revealed in this testing. Why did my audience need this knowledge? This prototype didn’t clarify the answer to this question, and I need to think about it and improve this in my next prototype.
  • Some of my testers wish I can give some background information before I let them start the testing. Since they may have different knowledge about this historical event, some background introduction will help them to know what was happening and what they supposed to do.
  • In the process of testing, I asked my tester to compare the information structure they created and the information structure of the real history. My testers felt the comparison deepen the understanding of my story, and they also give me handy suggestions.
    • One of the inspiring feedback is since my testers knew they didn’t have an expert level knowledge of the UK history, they knew they “didn’t do it right.” Then I started to consider if the fourth step (ask the tester to match the paper pieces( the reactions/policy made by the UK government and the European Union) with the timeline of the Mad Cow Disease) is necessary for my research. It seems to be a redundant step for my project, and I decide to remove this step from my project.
    • Another useful feedback I get through the testing is about how people love the animation in a data visualization. So far I just manually show (after my tester come out an information graphic, I use my laptop to explain what it is in the real history) my tester how different it is between the information structure they created and the information structure of the real history. Jad commented that “it will be cool to see all the UK government and European Union reaction slowly move to the right period.” Even though the dynamic animation seems not possible for me with such a limited time, I can use Adobe XD, After effect and other prototype tools to mimic this effect (instead just handing my user another image).
  • Present more information. So far, I only present an information graphic showing the timeline of UK Mad Cow Disease Crisis. To polish this prototype, I will convert this information graphic into an interactive-able and digital version. I am considering to move the whole thing to a web prototype. All the time and events should be clickable and more information (the source of the data, video of an interview, another website, image, information chart, and graph, etc.) should be accessible.

6.4 The Feedback and Comment of the Second Prototyping (The Revision)

  • Through sharing my revised prototype with CFC guests, I get the answer to the questions “what is the contemporary relevance for this project?” In this testing, I introduced the fact that millions of cattle were killed to calm the public’s fear of mad cow disease when mad cow disease had been prevented already. In the process of making this prototype, I discover the modern value for this project which is how the massive media overstate/mislead the information which caused unexpected results. In the discussion on Thursday, Nataly mentioned my project remind her of the US election in 2017. Their response to my work proves the existence of the contemporary value of my project.
  • Find out the right phrase which may lead my study to different directions: Sentiment data or emotion data. When I present my revised prototype to the CFC guests, Ana pointed out that I seemed to express some sentiment analysis in my prototype. This comment is very helpful to me. As an international student, sometime I will have a problem of finding the right phrases to describe my thesis. Through sharing my prototype with CFC guests, they provide me with a lot of possible words to explaining my research questions.
  • In the CFC courses, I made three different versions of the prototype: my first prototype, my second prototype and also the revised prototype. There is a lot of difference between them (presenting on different media, giving different stories, design different interactions). The purpose of designing them in such different ways is comparing how the various media, stories, and interactions impact the storytelling in data visualization. Through the comparison, I got a better understanding of dataset choice and data analysis. This also helps me to move to the next prototype and find out what method/approach/media/story will work the best for my research questions.

6.5 The Reflection from the First testing

For my next iteration, I will try to figure out what will be the most appropriate tools/techniques for my project. My current prototype is designed as an interactive web-based data visualization. In this testing, I imitated how the audiences would interact with my prototype. Most of my tester present interests of “clicking” around to check the story. However, a paper prototype couldn’t wholly simulate the experience of actually clicking around on a website. Some design elements, such as the design of pop-out boxes, the font size/color choice, how to reference the audio information and movie materials, will impact the experience of understanding the information. Therefore, creating a functional prototype will be one of my goals in the next step.  In the next step, I will focus on learning and testing existing data visualization tools (D3.js, Raw, Envision.js, Visualize Free, etc.). Hopefully, my next prototype will be a functional/interactive demo. During the process, I will gain more knowledge of how to analyze information and how to create data visualization.

Moreover, I will emphasize the storytelling in my next prototype. Through this testing, I felt some time my visual design didn’t transfer the story entirely. In the next iteration, I will improve this part. A better visual metaphor will enhance the expression.

Besides, to explore the visual metaphor and technique, building a more holistic story will also be one of my goals for the next iteration. In my second prototype, all the feedback I get from the testers and CFC guests prove the potentials of the mad cow disease outbreak. However, I still need to explain part of the story to my testers. I felt the design deficiencies of my prototype. For example, I didn’t emphasize the story of how media overstated the information which caused millions of uninfected cattle were killed, and the UK‘s economy was hit for six. With testing my current prototype, I realize a good data visualization work should present the author’s attitude toward this data. To tell a better story, I need to more focus on finding the best narratology for my story.

7. Installation Plan

The below is an installation plan for my first prototype.  I made the name tags and put them on the floor to create a map. There were a few cards which contained some detailed information, around each name tag. I used black tape to create the links between each name tag, that stands for the frequency of the communication(between Feng and the person of the name tag)n and distance between us.

user-flow-004

img_6673

For my second prototype, my plan is quite simple. I just need a table to present my prototype. The below are the images of how I present my work.

img_6718

screen-shot-2018-08-05-at-2-57-09-pm

8. Reflection

8.1 What learned

What I learned during the CFC prototype process is mostly making a practice-as-research project, including how to design prototype simply and quickly focusing on a single research question ( or just a few questions), how to conduct a user testing, how to interview appropriately, how to make the next iteration based on the survey, etc. Even though the CFC only last for a few weeks and we just conducted tow prototype testing, it presents me a looping circle which the testing results always leads to the next iteration, and show me an idea for what of working on the thesis project in the following 8 months should look.

I also really enjoy sharing my ideas/confusion with my colleague and the CFC guests. Since I am still at the stage of formatting my research questions., sharing the knowledge with them helps me to open my horizon and also find the appropriate research direction.

Except for the knowledge of the research methodology, I also tested my methodological approach while making the prototype and also checking the prototype. Through the testing, I also gained a better understanding of the methods/methodologies I have chosen.

8.2 What worked & what didn’t

The dataset works. In my second prototype testing, I found the most of my testers felt interested in the story revealed in my infographic, and they could find modern value through this project.

My project needs more works on the narrative. I should find out the appropriate narrative method which could be either time-based storytelling or interaction-based storytelling.

8.3 The next steps

To find out what will be the best narrative method for my project, I will look for more data visualization and storytelling examples. Through making the literature review for these excellent project, I can get a better understanding of data storytelling and mirror the appropriate methodologies and methods from these projects.
Another goal I would like to accomplish before my next iteration is wholly structuring the data of UK Mad Cow Disease. I will collect more materials on this facts (reading more articles, documentaries, and image materials). Through a better understanding of this fact, I will find the best position for myself to the narrative of the story.

To be continued…..

Blog Post 6 – Reflection on prototyping process and next steps

What is my revised second prototype?

On Tuesday, I presented my second prototype which is an information graphics of the historical facts about UK Mad Cow Disease Crisis. I tried to involve the mapping as a research methodology and the method of blending big-thick data into this prototype. Here is what I got after working with the mapping as research methodology and the method of blending big-thick data.

inforgraphic

Through this testing, I gathered some feedbacks include: (All these feedbacks was mentioned in my Blog Post 5-Test Report. The blow is the highlight of the response.)

1) The need to clarify the mapping model. During making the preview version, I realized each axis of the model needs to be more specific. This module show me an excellent way to explore the network of all the information I collected, but I need to clarify what is “abstract/concrete, distribute/undistributed” in my project.

2) The contemporary relevance of my project. My preview prototype presents an interesting story to the audiences, and they seem happy to know this fact. However, the contemporary significance wasn’t naturally revealed in this testing. I need to think about it and improve this in my next prototype.

3) Visualization. Another useful feedback I get from the experiment is about how people love the visual expression in a data visualization. For my next prototype, I plan to design some visual metaphor for this data. It will also be good to test how to visually appeal audiences in my prototype testing.

4) Present more information. In the first version of my second prototype, I only present an information graphic showing the timeline of UK Mad Cow Disease Crisis. To polish this prototype, I will convert this information graphic into an interactive-able and digital version. All the time and events should be clickable and more information (the source of the data, video of an interview, another website, image, information chart, and graph, etc.) should be accessible.

After discussing the feedback I collected through Tuesday’s testing with my primary supervisor, I decided to move on making a revision which will try to add more additional information sources and “transfer” the data into a visual metaphor. The below is the revision I created for Thursday’s final presentation.

01

In this revised prototype, I design the timeline horizontally in the middle of the image. From left to right, it shows the starting point which is 18 century to 2001. Each red cow stands for 100,000 infected cattle, and each blue cow stands for 100,000 killed cattle. The purple curve stands for the public’s fear of mad cow disease, and the green curve is for the development of “green industry.” The spots are some additional data sources (links to related news websites, videos about mad cow disease, the articles about this outbreak, etc.). All the date and icons (the cow icons and the circle icons) should be clickable which will expand into a popout box showing more information.

What questions I want to get the answer through this testing?

In this revised prototype, I tried to get an answer to the following questions:

  1. How my tester reflect the narrative I provide in this data set? Does this story about Mad Cow Disease Crisis trigger their interesting? What contemporary relevance (a political issue, an economic issue, the human-self, or even ecosystem) my tester can possibly get from this testing?
  2. If the purpose of “deepening” the knowledge of data was accomplished through testing? If not, what suggestion would be?
  3. [Self-testing questions ] Working with the big-thick blending method, do I mix the quantitative data and also qualitative data in the process of creating/structuring this information graphic?

(Most of them are the same questions I testing in my first version of this prototype. Since the media and also the way of representing the data have a big difference, I plan to make a comparison between these two versions. For this purpose, I design to test with the same questions.)

How I conduct the testing?

In this time, I didn’t design any dynamic interaction for the audience. I assumed that this prototype will be an interactive website on which all the dates and icons should be clickable and linked to the additional information. When I tested this revised prototype, I encouraged my testers to check the figures and dates. When they “clicked” any of these dates and icons, I would show them the linked information. After my testers finished viewing the website, I asked them to discuss what story they got from this website. And then, I showed them my preview version and asked them to compare which one works the best for this story. And why (visual metaphor, horizontal layout, hidden information, etc.)?

Here is the video of the CFC final critique.

Feedback

  • Through sharing my revised prototype with CFC guests, I get the answer to the questions “what is the contemporary relevance for this project?” In this testing, I introduced the fact that millions of cattle were killed to calm the public’s fear of mad cow disease when mad cow disease had been prevented already. In the process of making this prototype, I discover the modern value for this project which is how the massive media overstate/misleading the information which caused unexpected results. In the discussion on Thursday, Nataly mentioned my project remind her of the US election in 2017. Their response to my plan provides the existence of the contemporary value of my project.
  • Find out the right phrase which may lead my study to different directions: Sentiment data or emotion data. When I present my revised prototype to the CFC guests, Ana pointed out that I seemed to express some sentiment analysis in my prototype. This comment is very helpful to me. As an international student, sometime I will have a problem of finding the right phrases to describe my thesis. Through sharing my prototype with CFC guests, they provide me with a lot of possible words to explaining my research questions.
  • In the CFC courses, I made three different versions of the prototype: my first prototype, my second prototype and also the revised prototype. There is a lot of difference between them (presenting on different medias, giving different stories, design different interactions). The purpose of design them in such different ways is comparing how the various media, stories and interactions impact the storytelling in data visualization. Through the comparison, I got a better understanding of dataset choice and data analysis. This also helps me to move to the next prototype and find out what method/approach/media/story will work the best for my research questions.

Reflection and Next Steps

For my next iteration, I will try to figure out what will be the most appropriate tools/techniques for my project. My current prototype is designed as an interactive web-based data visualization. In this testing, I imitated how the audiences would interact with my prototype. Most of my tester present interests of “clicking” around to check the story. However, a paper prototype couldn’t completely simulate the experience of actually clicking around on a website. Some design elements, such as the design of popout boxes, the font size/color choice, how to reference the audio information and movie materials, will impact the experience of understanding the information. Therefore, creating a functional prototype will be one of my goals in the next step.  In the next step, I will focus on learning and testing existing data visualization tools (D3.js, Raw, Envision.js, Visualize Free, etc.). Hopefully, my next prototype will be a functional/interactive demo. During the process, I will gain more knowledge of how to analyze information and how to create data visualization.

Moreover, I will emphasize the storytelling in my next prototype. Through this testing, I felt some time my visual design didn’t transfer the story entirely. In the next iteration, I will improve this part. A better visual metaphor will enhance the expression.

Besides, to explore the visual metaphor and technique, building a more holistic story will also be one of my goals for the next iteration. In my second prototype, all the feedback I get from the testers and CFC guests prove the potentials of the mad cow disease outbreak. However, I still need to explain part of the story to my testers. I felt the design deficiencies of my prototype. For example, I didn’t emphasize the story of how media overstated the information which caused millions of uninfected cattle were killed, and the UK‘s economy was hit for six. With testing my current prototype, I realize a good data visualization work should present the author’s attitude toward this data. To tell a better story, I need to more focus on finding the best narratology for my story.

 

Blog Post 3 – Project Roadmaps

The below is the steps completed in this summer term (before and through the CFC)
1. Find out my exciting research area(immersive design, data visualization, visual design, human’s emotional expression in digital artwork, etc.) and meet with Kate Hartman, director of the digital future graduate program.
– Find out what is expected by my program.
– Talk about potential research areas and suitable faculty members who might be available to support me in the completion of a research project.
2. Look for references and related works that provide an introduction to the basic concepts.
The below is a list of interesting works may be related to my project:
Dubois, R.Luke. “Self-Portrait, 1993-2014.” 2014. Inkjet on paper. bitforms Gallery, New York.
Dubois, R.Luke. “More Perfect Union.” 2010 – 2011. Print. bitforms Gallery, New York.
Harris, Jonathan. “Network.” 2015. New Inc. Web. Network. <http://networkeffect.io/>
“How We Can Find Ourselves in Data.” Performance by Giorgia Lupi, TEDNYC, TED, Mar.
2017, www.ted.com/talks/giorgia_lupi_how_we_can_find_ourselves_in_data.
Lupi, Giorgia. “Data ITEMS: Exploring the Power and Depth of Soft Data for the Museum of Modern Art.” Medium, 2 Oct. 2017, medium.com/@giorgialupi/data-items-exploring-the-power-and-depth-of-soft-data-for-the-museum-of-modern-art-e5f40a82943.
Wang, Tricia. “Why Big Data Needs Thick Data.” Medium, 30 Jan. 2016, medium.com/ethnography-matters/why-big-data-needs-thick-data-b4b3e75e3d7.
3. Find a research supervisor.
In this stage, I imaged my final project would be delivered as “an immersive experience of data storytelling.” After discussing my idea with DF faculty, I found the research areas of Isabel Meirelles and Haru Ji is relevant to my field of interest, and they would love to devote their time and effort to supporting and supervising my study.
4. Pose a focused and specific research question.
In this summer term, my research questions were reformatted based on the discussion in Thesis 1 and feedback collected from CFC prototyping.
a) Thesis question 1.0 version.
b) The first prototype testing in CFC media lab.
c) Based on the feedback received in the CFC prototype testing and discussion in Thesis 1, I formatted the research question.
d) Discuss the thesis questions 2.0 version with my supervisor and polish/fix the questions further.
5. Find out the methodologies and methods for my research project.
In Thesis 1, we were asked to conduct a thorough literature search. In this way, I was able to find out the suitable methodologies and methods. It helps me to determine which study design is the best fit and the most practical approach to framing my research project.
6. The second prototype testing (CFC final presentation).
– Refine the study’s primary objective.
– Discuss the anticipated data collection and analysis methods.
– Discuss the tools/technique that will be appropriate for my project.
7. Created an expanded/polished version of the research proposal.
The proposal should contain as much detail as possible and provide the framework for the following works in Thesis 2 and ultimately drafting a manuscript. Include details on:
– Research questions
– Research methodologies and methods
– Literature review
– Expected outcomes
– Bibliography

Starting from here will be a rough roadmap which may be adjusted according to the actual deadline and requirements.
[Before November]
8. Collect and analyze the data. Come out a narrative plan based on the collected data.
According to the testing result, if appropriate, reformat the primary and any secondary research questions.
9. Make the third prototype to present my story.
– User Testing the story.
– Explore the possible presenting tools/technique further.
10. Starting the first draft of my thesis paper which should include:
– Introduction
– Research questions
– Literature review
– Context review
– Research process: the first prototype, the second one, and the third one.
[Before February]
11. Finish the thesis draft and start to modify the writing based on the feedback gathered from step 9.
12. Start to make the fourth prototype.
[Before March]
13. Finish the fourth prototype and conduct a user testing with it.
14. Finish the most part of writing except for the conclusion.
[Before April]
15. Polish the fourth prototype and create out a final project. Improve the following components:
– Visual design
– Function design
– Animation (if necessary)
– Other design elements: title/logo design, flyer/poster design, a demonstration video…
16. Come out an appropriate exhibition plan include the following details:
– A sketch of how to presenting: side view, front view, top view, etc.
– The illustrated user visiting flow
– Light and space requirement
– A list of requirement devices: the laptop, tablet, monitor, desk, chair, adopt cable, HDMI cable, charge cable….
– Some special requirements: a quiet environment, the limited visiting over a period of time, a comfortable sitting environment…
17. Finish the writing.
[April – May]
18. Finish everything, defense, and open show.

Blog Post 5 – Test Report

What is my second prototype?

My second prototype is the information graphics of the historical facts about UK Mad Cow Disease Crisis. One of the primary feedback I got from thesis 1 in last week was figuring out a methodology which can help me to structure the network of data since my data set seems to be a complex data source. Based on this feedback, I tried to involve the mapping as research methodology and the method of blending big-thick data into the produce my second prototype. This methodology and method help me to structure the complex data sources which are from different perspectives and were presented in various medium. In this way, I intentional achieve a holistic view of the data structure. Here is what I got after working with the mapping as research methodology and the method of blending big-thick data.

inforgraphic

This information graphic contains three types of data:

The left side is two curves presenting the emotional reflection of UK Mad Cow Disease. One of them is for the public’s fear of Mad Cow Disease (which is also called bovine spongiform encephalopathy, shorted for BSE). Another is for the intention of developing the “green industry.”

The middle is presenting the timeline (18 century to 1992 ) of how/when the Mad Cow Disease start and when this disease was ended.

The right is presenting the reaction and policy which the UK and the European Union made to response the Mad Cow Disease.

I am interested in how people find out /feel about the fact that the most UK government reaction and policy of killing and burn millions of cattle have nothing to do with the prevention of the disease but try to rebuild the people’s confidence in government only.

What questions I want to get the answer through this testing?

1). How my tester reflect the narrative I provide in this data set? Does this story about Mad Cow Disease Crisis trigger their interesting? What contemporary relevance (a political issue, an economic issue, the human-self, or even ecosystem) my tester can possibly get from this testing?  

2). Does the interaction I designed boot the understanding of data story? If the purpose of “deepening” the knowledge of data was accomplished through testing? If not, what suggestion would be?

3). [ I also have some self-driven questions to answer through this prototype ] How do I structure the data source based on the methodology I choose to use (mapping as research and blending the big-thick data)? Do I feel I did mix the quantitative data and also qualitative data in the process of creating/structuring this information graphic? If so, what will be the next context to add in? If not, what is missing (quantitative data or qualitative data) and what is the possible reason caused this missing?

Through testing/working with all above questions, my prototype will help me understand how the methodology and method I chose working in creating a network of my dataset and analyzing the data in a holistic view. It will also lead to think if the current data set (the story about mad cow disease) can be used as a lens to answering my research questions which are mainly about how to use data visualization to represent quantitative data and also qualitative data and how to use data visualization to reveal a cultural/human story.

How I conduct the testing?

The first step. Instead of showing my tester the whole information graphic I created, I only show my tester the middle part of it ( The middle are presenting the timeline (18 century to 1992 ) of how/when the Mad Cow Disease start and when this disease was ended. )

img_6721

The second step. Then I will show the tester the right part of the data which was isolated, and the date of data was removed.

img_6722

The third step. I will have a brief introduction about what this prototype is about. I will introduce the timeline presents the period (18 century to 1992 ) of how/when the Mad Cow Disease start and when this disease was ended. And I will also let my tester know all the isolated paper tags are the reactions/policy made by the UK government and European Union.

The fourth step. I will ask the tester to match the paper pieces( the reactions/policy made by the UK government and the European Union) with the timeline of the Mad Cow Disease. After observing how my testers to organize the information, I will show them the whole information graphic I made and lead them to compare what they feel the history is and what the real history is.

img_6718

img_6719

The fifth step. I will start a conversation to figure out how they feel about this prototype and how they feel about the story I present in this prototype. Then I will include the above survey (which I mentioned in “What questions I want to get the answer through this testing?” section) into the conversation. Through the interview to gather the feedback and response from the testers.

Feedback

  • Self Testing. In the process of making this prototype, I just put the data/information I collected into the below module(Modes Model: Mapping as Cultural Research Practice). However, through the making, I realize each axis of the below model needs to be more specific. This module show me an excellent way to explore the network of all the information I collected, but I need to clarify what is “abstract/concrete, distribute/undistributed” in my project.
  • The choice of data source. One of my questions is “does the story about Mad Cow disease interested you?” Most of the response I got from this question is yes. All my testers seem to surprise to learn the fact in history. My prototype presents an interesting story to them, and they seem happy to know this fact. However, the contemporary relevance wasn’t naturally revealed in this testing. Why did my audience need this knowledge? This prototype didn’t clarify the answer to this question, and I need to think about it and improve this in my next prototype.
  • Some of my testers wish I can give some background information before I let them start the testing. Since they may have different knowledge about this historical event, some background introduction will help them to know what was happening and what they supposed to do.
  • In the process of testing, I asked my tester to compare the information structure they created and the information structure of the real history. My testers felt the comparison deepen the understanding of my story, and they also give me handy suggestions.
    • One of the inspiring feedback is since my testers knew they didn’t have an expert level knowledge of the UK history, they knew they “didn’t do it right.” Then I started to consider if the fourth step (ask the tester to match the paper pieces( the reactions/policy made by the UK government and the European Union) with the timeline of the Mad Cow Disease) is necessary for my research. It seems to be a redundant step for my project, and I decide to remove this step from my project.
    • Another useful feedback I get through the testing is about how people love the animation in a data visualization. So far I just manually show (after my tester come out an information graphic, I use my laptop to explain what it is in the real history) my tester how different it is between the information structure they created and the information structure of the real history. Jad commented that “it will be cool to see all the UK government and European Union reaction slowly move to the right period.” Even though the dynamic animation seems not possible for me with such a limited time, I can use Adobe XD, After effect and other prototype tools to mimic this effect (instead just handing my user another image).
  • Present more information. So far, I only present an information graphic showing the timeline of UK Mad Cow Disease Crisis. To polish this prototype, I will convert this information graphic into an interactive-able and digital version. I am considering to move the whole thing to a web prototype. All the time and events should be clickable and more information (the source of the data, video of an interview, another website, image, information chart, and graph, etc.) should be accessible.

Blog Post 4 – Apply design thinking and ideation methods to concept

Excise 1: Modding IDEO

In the first excise, we are asked to use the poster to frame our iteration idea based on the questions of what is the prototype name, what happened in last prototype testing, what impression you got from last time, what you learned in the previous prototype, and what will be the next iteration. Based on this questions I structure my posters.

img_6684

Then we adjusted our posters following the grids of Prototype Name, What Happened, Impression, What You Learned, What Will Be The Next Iteration.

img_6685 img_6686 img_6688

    • Prototype Name. So far, I still don’t have a name for my project. I merely use a few phrases to describe it. The main two keywords of my project are data visualization and storytelling. I try to explore what will be the best approach for a visual designer to represent not only quantitative but also qualitative data.
    • What Happened. For my first iteration, I wanted to use personal data as a lens to check if digital technology can be a tool to tell the story/context behind the data. With this goal, I design my first prototype which is a map visualizing my email information from July 01 to July 10 in 2017. Through this prototype, I focus on two question: finding an approach for data visualization + storytelling and what can be a good data set for my project.
    • Impression. I got a lot of positive feedbacks of the method (an interactive-able map) and the selected data (my personal email data). All these feedbacks helped me to check this prototype from others’ perspective and gained a deep understanding of the audience’s interest and behavior.
      • The interaction, “moving from one spot to another and flipping the information card laid on the floor,” made my tester check information with purpose and gain a feeling of actively generating the story. In this case, they are not the listen, but a creator. This shifting of position emerge them into this experience further and lead them to obtain a deeper understanding of the information.
      • I found most of my testers show a passion for my private information. One of the reason is that I was standing there and they knew me already. However, they pointed out that peeping at private details may come from a part of human nature, especially peeking at someone you already know.
      • In the interview, I asked my testers the same question “What is the reason you choose to check the information in this order?” Through this question, I tried to explore what would most grab my audience’s attention. All my testers gave me a very similar answer. They either choose something relevant or something visually obvious.
    • What You Learned. In the interview, I got a few exciting feedbacks. The firstly one is that they mentioned that most of them used to ( or have a tendency to) make a background investigation when they know someone new. This feedback gives me inspiration of a possible topic discussed in my research. If I choose the personal data as the data set for my final project, an argument of the human’s attitude on background survey can be included in my paper. And I can feel this can raise a lot interesting discussion. Another thing I learned through this testing is about the data set. At the very beginning, I was worried my data choice might not be interested in everyone. However, what was surprised me was it seemed all my testers presented a strong passion for this personal data exploration. Through the interview, I found this prototype was not only giving my story but also some big topics (the human network/the comparison between mental distance and geographic distance). This testing depth of my understanding of personal data.
    • The Next Iteration. For my next iteration, I am interested in testing the combination of data visualization and other 3D expression technology, such as VR and projection mapping. I would like to find out if these technologies can also enhance the audience’s comprehension and experience of receiving the information. I will also test my current data visualization structure (an interactive data map) works for another data set. The possible data are the human network, political letter and mad cow disease in UK history. In the following two weeks, I will try to gather as much as materials about these topics to check which one is most doable. My another focus of the next prototype will be a visual metaphor. Following the feedback I got last week, I will try to involve more visual elements in my interaction.

Conclusion:

I can feel my research idea is becoming more and more evident through introducing/discussing with my group once and once again. Before I did this excise, I got a very blur feeling of what my next iteration could be. The process of transfer the thoughts to oral presentation to writing makes this idea more detailed and precise. It helps me to have a practical plan.

 

Excise 2: Values-driven Prototyping

In this exercise, we were asked to write a word for the action happening in this project and the value audience/ourselves obtaining through this project.
My verbs for the action happening in my project are comprehended and visualize. “Visualize” is for the approach of representing the data and storytelling. “Comprehend” describes the process of audience gather data and organize the story.
My words of the value are comprehension and knowledge (curiosity). The goal for my research project can be present through these two words. One goal is letting the audience comprehend the data/context and obtain a deeper understanding of my selected data. Another goal is for me. One of my research questions is “As a visual designer if it is possible to create a tool/sample to represent not only the quantitative data but also the qualitative data?” I would like to use my research project as an answer to this question.

img_6694

After sharing the words with my group, I made my idea of these words more clear. Same as the excise 1, talking the concept once and once again make it more detailed and clear. And I also found a few values mentioned by my classmates could also work for my project, such as wisdom and pleasure. This process of merging other’s insights into my project keep inspired me and trigger me to view my content from different perspectives.

Blog Post 2 – Documentation of Week #1 Prototype

With a background of UI and UX design, I have much experience working on data analytics and information visualization. After taking the course From Data to Perception, my group and I created a couple of projects which translated data to perceptual projects. These projects helped me gain a deeper understanding of information “translation,” and triggered me to think “ Does the data always tell the truth of the world?” Using this question as an entry, I come out my initial research questions:

  • Are there human insights missing from today’s big data and selective algorithms? If so, how can we reduce this quantification bias?
  • As a visual design, if it is possible to create a tool/sample to represent not only the quantitative data but also the qualitative data?
  • How can we use data visualization as a meaningful tool to represent a vivid story of human self?
  • What is the best approach for representing the data of real bodies, systems and structures of power in the more full world?

img_6660

Above image is a poster which contains a lot of suggestions from my colleague and Emma. All of them are very useful and inspired me. I took the one “a map of a day in your life” for my first prototype.
To shape the idea further, we made a mind map. Below is the image of my mind map. This step helps me to clarify the critical aspects of this prototype.

img_6659

What is my first prototype?

In this stage, I plan to use my email connecting history as the data set. By translating this data set into a visual language, my story of social status, geographic changing, and other aspects of my life can be represented from the information visualization.

For this prototype, I want to use personal data as a lens to check if digital technology can be a tool to tell the story/context behind the data. With this goal, I design my first prototype which is a map visualizing my email information from July 01 to July 10 in 2017.

img_6673img_6674 img_6675 img_6676 img_6677

Some Design Choices

  • Name Tag. I made name tags for myself and people who contacted me at that time. I put all the name tags on the floor. The distance between my name tag and others’ stands for the relationship between us. The closer our name tags are, a closer relationship we have. To tell tester my name tag is the starting spot, I draw a pink star behind of my name to distinguish it from others.
  • Black Strings. My name is linked with others’ by black tapes which stand for the number of emails sent and received between us.
  • Small Cards. For each name tags, I put a few small cards around. These small cards contend some detailed information about who this person is, where he/she is, and what brief context is in our emails. All the information are provided in the form of the phrase.
  • The Period: July 01 to July 10 in 2017. There are two reasons for choosing this period of data. Firstly, there were a lot of things happening at that time, and my social connection was complicated. A sophisticated data set will leave more space for my tester to guess the narrative behind the data. Secondly, the date of testing this prototype is June 6th. If the tester knows me, they can compare my current situation with what happened a year ago.
  • Email. In this prototype, I choose my email as the data set. The first reason for using my email as the data set is easy to get. And other reason to chose it is because email is the social media which reflect parts of the people’s reality. Different from Facebook, Instagram, and other social media, the connection through email are mostly real connection. And through the email data, we can easily find a person’s employment status, married or not, financial situation and so on. So many stories can be found through emails. Therefore, I choose email as my data set for this prototype.

User Journey

fullsizerender

The final user flow

Based on the comments from Ana and Emma, I did some adjustment. Instead of making a paper map, I will make the name tags and put them on the floor to create a map. The user flow in this prototype should be:

  1. Start from my name tag to view this visual as a whole and gain a general idea of the story.
  2. Move to any spot interest to them.
  3. Check the detailed information around this spot and organize the story behind this information.
  4. Find the next interesting spot and move there.
  5. Repeat the actions of step 3 – step 5.
  6. The experience will be finished after the user checks all the information.

Questionnaires

Before the user finishes this experience, I won’t explain the story to users. After the tester completes the process, I will make a short interview asking some questions about this data map.

The questions will include but not limited with:

  • Based on the information you got from this map, can you briefly describe what is happening to me?
  • Does the storytelling of personal data interest you? If yes, can you assume what is the reason? If no, can explain why and provide a suggestion topic?
  • Did you feel the interaction/process of digging the information trigger your interests of the data?
  • What is the reason you choose to check the information in this order?
  • What is the most interesting things for you in this experience? Why?

By asking those questions, I want to test:

  • If the map will be a useful narrative method for data visualization + storytelling.
  • What will trigger people’s interest?
  • Does everyone feel interested in personal data? If not, what topic are they interested in?
  • How people collect and analyze the data in this experience?

Below are some images of my notes which were taken during the testings.

note02

note01

 

The feedback I gained from this prototype testing.

  • The attitude of privacy information. During this testing, I found most of my testers show a passion for my private information. One of the reason is that I was standing there and they knew me already. However, they pointed out that peeping at private details may come from a part of human nature, especially peeking at someone you already know. They mentioned that most of them used to ( or have a tendency to) make a background investigation when they know someone new. The most common choice for gathering the information is social media, such as Facebook, Instagram, Twitter and so on. The background investigation can help us get a better comprehensive understanding of this people. In some context, it also comforts the anxiety to socialize with a stranger.
  • The checking order. In the after-interview, I asked my testers the same question “What is the reason you choose to check the information in this order?” I wanted to discover what is the first thing knock their attention and what is their exciting point when checking an information map. Most of my testers choose Lauren Robert as the first spot to gather information. The reason why they choose her is also undeniable: there are the most connecting between Lauren and Feng while the distance between us is far. They are curious about why this situation happened here. The second choice for most of my testers is Josh Paglione who most of my testers know already. Since they are also familiar with Josh, they are interested in the intersection between participants themselves and I.
  • Summary a story from the information in the form of the phrase. Even all the information I provide in this map are by way of the words, I surprisingly found all of my testers can correctly organize all the information together and come out a detailed story.
  • Physically moving boots the experience? Most of my testers give positive feedback to this question. The interaction, “moving from one spot to another and flipping the information card laid on the floor,” made my tester check information with purpose and gain a feeling of actively generating the story. In this case, they are not the listen, but a creator. This shifting of position emerge them into this experience further and lead them to obtain a deeper understanding of the information.
  • Mental location and geographic location. One interesting suggestion I got is from Natalie and Joseph. They suggested me to involve more information in this map. In my first prototype, the distance between my name tag and others stands for the relationship between us and the black strings stands for the email sent and received through us. They suggest me to consider how to represent the mental distance and geographic location in my second prototype. The comparison of these two concepts will be interesting. The way of serving could be a different color, weight and texture of the strings, and different sizes of the name tag (font size of name tag). With the geographic location data involved in this project, this map will become a more complex representation, from the physical world and also the mental world(self-identification side).

Here is the videos of prototyping.

Blog Post 1: 3 related works

100% Polluted Water Popsicles

By art students Hung I-chen, Guo Yi-hui, and Cheng Yu-ti from the National Taiwan University of the Arts.

8-35 polluted-water-popsicles-taiwan-fb8

What: The students collected polluted water from 100 locations in Taiwan, first freezing the collected sewage samples and then preserving their creations in polyester resin. On final inspection, the audience can identify the trash contained within each mold. The group also designed the pop wrappers represented the different regions from which the polluted water samples were taken.  

How: In an information visualization case, the choice of data set is always a fundamental decision. Instead of using other types of water data, such as real-time water level, water flow data, and surface water quality, the student from the National Taiwan University of the Arts cleverly choose the best way to gather information for their project. Their dataset comes from where they are living ( and also where their audiences are living). The distance between the data and the audience’s life is so close that the idea of the water pollution in our life can be readily accepted.

Another highlight in this project is choosing the ice pop as the model of final delivery. As a water-based frozen snack, the popsicle is usually related with a fresh and clean feeling. In this project, connecting the ice pop and polluted water creates a sharp contrast and emphasize the seriousness of water pollution.

Why: This project is intended to spread awareness about water pollution and its profound effect on our world’s population. As visual designers, these art students use visual design as an approach to grab the attention of the public and bring the seriousness of the water pollution to everyone.

So What: The social impact of this project is pronounced. It successfully expresses the idea of the seriousness of water pollution in our daily life. The final delivery also presents their concept very clearly and firmly. This project is also a useful reference for multisensor works in a data visualization project. Translating a data into a tangible object which audience can touch and play boots the experience. However, I feel this project is not perfect. If additional information can be given to the audience after they finish viewing this project, the experience will be more, and the impression left to the audience will be more in-depth. The way to give additional information can be a QR code on the pop wrappers. Scanning the QR code, the viewer can get more information about the region of this water sample.

 

A More Perfect Union

By R. Luke Dubois.

57c9d81709d29322008b5f4c-1536-768

rld_05ca_area2-447 rld_05ca_area1-441

What:  A More Perfect Union is a data visualization artwork based on online dating and the United States Census. This is a map that provides an alternate version of the 2010 census and reveals how the inhabitants of particular cities understand themselves, based upon personally-descriptive data provided through dating websites. In this project, the data artist, Dubois, collected words provided by 16.7 million people describing themselves and those they desire.

How: In the summer of 2010, Dubois joined 21 different online dating services and collected their contents, downloading 19 million profiles of single Americans. He sorted these profiles by zip code and analyzed for significant words. He designed a set of prints shows a road atlas of the United States, with the city names replaced by the word used by more people in that city than anywhere else in the country.

Why: He started this project in 2008. He attempts to create an alternative census, based not on socio-economic fact but on socio-cultural identity. The final outcome which consists of more than 200,000 unique words, and gives an imperfect, but extremely interesting, perspective on how Americans describe themselves in a forum where the objective is love. In his documentary film “R. Luke DuBois: Running Out of Time,” he said he is interested in “how we accumulate the vocabulary for describing ourselves and where that comes from.” He always tries to use data as a tool that can tell us who we are and what is our personality.

So What: I like the idea of not analyze the data from a socio-economic side but from the more human side. This project is an excellent reference for visual designer considering of the humanity of data. This project also provides a hint guiding the visual designer how to represent a non-measurable concept, such as humanity and personality, through data visualization.

 

Phonopticon: the age of mobile surveillance

By Mudit Ganguly

 

 

What: This is a thesis project made by Mudit Ganguly who graduated from the digital future program in 2018. His thesis project argues that knowledge about privacy breaches carried out by mobile applications leads to awareness about privacy. In this project, he creates an immersive installation, Phonoption, which gives viewers knowledge about privacy breaches. He borrows the idea of Jeremy Bentham’s panopticon enable guards to observe prisoners without their knowledge, the applications on our smartphones gather and share our data without our knowledge. That is also which the name of project Phonoption comes from.

His project consisted of three parts. The first part is a set of audience’s mobile surveillance data that are projected from the outside onto the walls of a hexagonal structure. The second part is a hexagonal enclosure which contains six webcams mounted in various location around. The last part is a mobile interface by which a viewer can interact with the Phonopticon.

How:  He chooses RTD (Research Through Design) as the methodology to lead his design process used in making the Phonopticon. His procedure involved many iterations that were improved based on feedback. Since many design processes include feedback loops, the Spiral Model of software development by Barry Boehm was used as a research method. This method helped him to find out problems and drawbacks.

The software he used in this project are Javascript and Pubnub to communicate with the Processing script,  Adobe After Effects to edit motion graphics; Resolume Arena 5 as a projection mapping software to project the visuals onto the walls;  Spout to transfer the visuals from Processing to Resolume Arena 5.

To design an immersive experience in limited space, he creates a hexagonal enclosure in which the audience stands inside surrounding the visuals.

WhyAs a digital future student, all of us will go into technology and digital media area in a very soon future. Some of us may work as a UX and UI designer, some may develop mobile and web applications. And some of us may choose to create new digital interactions for the public. However, Mudit Ganguly seems to use his thesis rethinking if the digital future we create is the digital future we want. Information surveillance is an issue for everyone and is more duty for us. Through a discussion of as a digital media designer what service we should provide to the users, this project wake the responsibility of creating a safer information communication environment.

So What: The social meaning of his project is evident. Mobile is a communication tool everyone is using every day, and personal data surveillance is also a prevalent issue. His concept was clarified very well through the experience. The design of the 6 webcams which continually capture the live feeds of the viewer strengthen the uncomfortable feel of surveillance. His project is also a perfect example of how to design an immersive experience with a very limit physical space. Through reading his paper, I can see how he change the final delivery from a website, a projection on the wall, to an immersive experience (a hexagonal enclosure).

Hello world!

Welcome to OCAD University Blogs. This is your first post. Edit or delete it, then start blogging! There are tons of great themes available for you to choose from. Please explore all of the options available to you by exploring the Admin Toolbar (when logged in) at the top of the page, which will take you to the powerful blog administration interface (Dashboard), which only you have access to.

Have fun blogging!