Design For Understanding

Summary

Design for understanding was a task which requires mapping data to visual features for communicating information by leveraging the rapid perceptual pathways in our brain. In this design sprint, we use visual methods to communicate data for different end goals. For our dataset, we picked the ‘Election Java Library’s “2016 election data” which was collected from CNN’s 2016 election center. Each county has the breakdown of how many votes each candidate recieved in that county and what percentage of the total vote from that county that the candidate recieved. The candidate’s political party is also represented in the dataset.

Meet

our first meet figures out which dataset we will work on. After serval times of filtration, we finally decide to work on ‘Election Java Library’s 2016 election dataset about the results collected from CNN’s 2016 election center. Each county has the breakdown of how many votes each candidate received in that county and what percentage of the total vote from that county that the candidate received. The candidate’s political party is also represented in the dataset. We chose this dataset because it has a large quantity of data and the data reflect an important event for the country.

Brainstorm

1 generate ideas:

After sorting out the data for the 2016 elections, we found that the data mainly reflected the number of votes the delegates received in different counties in different states.For Clear communication and reasoning data visualization, we could combine different types of data to draw different aspects of conclusion. For example, when we focus on different states, we could compare different candidates’ vote number and percentage in different states. When we focus on candidates, we could compare their total number of votes. And for Persuasive communication and storytelling data visualization, we could come up with some ways to present so big number of votes for candidates from different counties.

2 filter the ideas:

We put the ideas together and remove any ideas that seem similar to another idea.

3 Categorize the sketches:

4 Combine and refine:

For Clear communication and reasoning data visualization, we decide to reflect 3 aspects of data information: number of votes in different states for three main candidates, the percentage of votes in different states for all candidates, different candidates’ total number of votes.

For persuasive communication and storytelling data visualization, we decide to tell the story of votes in two ways. The first way is to imitate the bullet screen, we let different county names roll like a barrage or roll like a rainfall based on the background of an election video or picture. In this way, users could feel a large number of votes of large number of counties in a most compelling way possible. The second storytelling way is more detailed, the icon of countless citizens will appear in the picture and go to different candidates, symbolizing the votes of people to vote for these candidates.

5 question:

initial designs

Stage 1. Initial paper prototype

After brainstorming and combining our ideas, we began developing initial designs.
We developed a paper prototype for persuasive communication and storytelling data visualization for stage 1. But the effect is not as good as expected. During our first test, users reflected that they could hardly feel a large number of votes from different counties due to the limitation of the paper medium. The bullet screen effect couldn’t be perceived in this way.
And they also reflected that our detailed storytelling way is quite similar to traditional charts and need to add more animation effect and interaction methods to make it more compelling.

Stage 2. Initial paper prototype

In stage 2, we drew an image with a lot of county names on screen with a background of candidates election by photoshop, this time users better understood our idea. They praised this design idea and suggested adding more intensive county names to make the visual appeal of the picture stronger.

Realization design

Stage 3. Final design screen shoots

To view the entire visual effect, please refer to the following hyperlink: https://codepen.io/MeijieWang/full/eQGNgQ

In the final production process, I compared the laterally moving bullet screen and the longitudinally moving bullet screen, and finally chose the bullet screen that moved from top to bottom, because it produced a similar effect to rain. This bullet screen can be compared to different county raindrops, in order to strongly visualize a large number of counts to participate in the voting process. And in order to make the visual effect better, I set the moving speed so that ‘rain point’ has a flickering effect.

Javascript is the scripting language of this project. The main operations in the process of coding are: creating a canvas, importing background images, reading in county names, writing their movements, and writing their colors. I encountered some difficulties when reading the array of the county names.

User Testing

Demo day testing

On the first day of user testing, I was out testing other groups demos. Through the testing, we found a few problems with how the data was presented and identified a few key problems we would try to fix. According to my teammates’ record, users pointed out that they could hardly feel a large number of votes from different counties due to the limitation of the paper medium. The bullet screen effect couldn’t be perceived in this way.
And they thought that our detailed storytelling way is quite similar to traditional charts and need to add more animation effect and interaction methods to make it more compelling.

On the final demo day, we received mostly positive feedback and everyone we spoke to said they walked away understanding our visualizations. They praised this design idea and suggested adding more intensive county names to make the visual appeal of the picture stronger.

Conclusion

To be honest, I am pretty satisfied with our final product given the time and resource constraints imposed on us. We started the project by selecting a unique dataset and went about exploring it from different perspectives. With the five design-sheet methodology, we brainstormed and refined our ideas into four visualizations we felt could portray and accurate picture of our dataset. To make a Persuasive communication and storytelling data visualization, we exert our creativity and visual imagination. Through our user testing, we were able to refine our prototypes into solid final products. And our final product did have a long-lasting impact on users according to feedback.

Reflection

Looking back at what we did on this project, I am satisfied with the final result; however, I will adjust this process. I feel that the technical means have a great impact on the user experience and the extent to which the idea is achieved. In the first round of our paper prototype test, the user feedback was not ideal, because the paper means can not make the user really understand the effect we want to achieve.
In addition, I think the specific implementation of the idea will be adjusted appropriately during the development process. For example, we wanted to achieve the bullet screen effect at the beginning, but then found that the ‘falling rain’ effect is better than the former one. So we chose the latter after comparison.

Final Project Link

http://users.wpi.edu/~dchen3/