Introduction

Hello! Welcome to the post about my thesis project for my graduate studies in Information Design & Technology (IDT) at SUNY Polytechnic Institute.  This post looks at the development of my capstone project. I will discuss its concept, the design process and principles I used, and share the feedback I received as well as my own observations on the project.

Since I had designed static infographics in past classes, it was recommended for my thesis project that I develop new skills by creating an interactive visualization (aka “viz”). The tool I chose was Tableau. Tableau is a data visualization tool that helps people see and interpret data. It is intended for people who may not have coding or programming experience, but have data-driven questions that they want to visually explore.

My viz investigated a tweet made by Donald Trump about winning the Electoral College vote in a landslide. Using official election results published by the Federal Election Commission (FEC), the viz examines recent first-term election results to see whether or not Trump’s statement is accurate. While there is no official definition of a landslide victory, most political experts agree that if a US presidential candidate won at least 375 of the 538 total electoral votes (70%) and beat his or her opponent by at least 15 percentage points in the popular vote, the candidate won the election in a landslide. I used Ronald Reagan’s 1980 election and George H.W. Bush’s 1988 election as benchmarks for first-term landslide victories.

If you would like to see the viz, click here to open it in a new tab.

NOTE: This viz is not optimized for viewing on mobile devices. It is best viewed on a desktop or laptop. This is something I plan on addressing in future Tableau projects.

Thesis Objectives

I had three objectives for my thesis project:

  • Design an interactive infographic that visualizes data in a way that allows for deep investigations while possibly inspiring new interpretations of the data.
  • Broaden my knowledge of Information Design, specifically Infographic Design and related principles of Graphic Design; these are disciplines that have been of interest to me for quite some time and motivated me to seek formal education in them.
  • Learn new skills while producing the project. Tableau is a visual design tool marketed toward designers who have compelling data-driven stories to tell, but may not have the necessary coding skills to build such visualizations. I fit this description, so Tableau was the right choice for me. I had never used Tableau before, so I expected to learn quite a bit about designing an interactive viz.

Design Process

To create my viz, I followed the process that Alberto Cairo explains in his book, The Functional Art:

  1. Identify and define the story to be told.
  2. Research the story.
  3. Sketch the design.
  4. Develop a consistent visual style.
  5. Design on the computer.

Identify and Define the Story/Research the Story

To tell the story of my thesis as succinctly as possible, I am combining these steps. In fact, many of these steps often will overlap and influence each other in practice, which certainly was the case for my project.

In the semester prior to the thesis semester, we were given time to explore an idea that could potentially become our thesis project. Intrigued by the impact social media has had on society and the fervor sparked by the 2016 general election, I wanted to explore how people have used social media during the most recent general elections. The outcome would be an infographic depicting what I had learned.

Although I learned a lot about how candidates and the general public used social media during election campaigns, there wasn’t much to visualize. I needed a more interesting, compelling story to tell – something that posed a question that I could answer with data in a visually appealing manner. As I dug deeper, I found the piece of information I could build something around:

trump_tweet

An infographic is a visual story, and to keep the user engaged, this story must be interesting yet concise and focused. Attempting to debunk a publicly-made statement from a sitting president makes for an intriguing story! With my data from the FEC and the framework for my idea in place, I felt confident to move onto the next step: putting my idea on paper.

Sketch the Design

The purpose of this step is to sketch the design, get feedback, and revise it until there is a clear understanding of what the design will look like. Cairo advises not doing this step on the computer because it is too easy to get caught up in aesthetics, which is not the focus at this point. It is more important to set the foundation of the design, experiment with the layout, and understand where the visual elements will be placed. This step may have many iterations until that level of satisfaction is reached. I produced about a dozen sketches while completing this step of the process.

The Model

Since my design would be an interactive infographic that compares and contrasts election results against an accepted definition of a landslide victory, I needed a framework that would provide a good balance between author-driven and reader-driven approaches. In the author-driven approach, the author, or designer, of the visualization provides a clear path through the information for the user to follow, thus controlling, and potentially limiting, the freedom the user has to freely explore. The reader-driven approach is the opposite: the user can freely explore and progress through the visualization. However, such an approach can be disconcerting to the user as the user may not be able to sufficiently comprehend the information, thus leading to confusion and frustration, which may force the user to give up on the visualization. A narrative genre that provides balance between approaches is the interactive slideshow, which mimics a standard slideshow presentation, but provides interaction points along the way. The structure and order of the slides creates a clear path through the presentation (author-driven), whereas the interaction points allow the user to freely explore the data (reader-driven). For more information on the author-driven and reader-driven approaches and other types of narrative genres, here is a link to one of my research sources.

Below is an example of an interactive infographic that uses the interactive slideshow model. To see this infographic live, click here.

budget_forecasts

The example above is simple, yet elegant and effective. It consists of a short title with a single line of introductory text, a navigation bar with a Next button (author-driven) and numbered buttons that allow the reader to select which slide to view (reader-driven). The user can also engage with the data in the slides by hovering over or clicking on data points, re-positioning the slider, or watching animations (reader-driven).

Sample Sketches

My sketch below is based on this interactive slideshow example. In this early sketch, I focused primarily on the general design of the viz.

sketch1

In a later sketch, I focused more on the types of visual elements I wanted to use and their placements on the layout.

sketch2

Develop a Consistent Visual Style

The purpose of this step is to define the visual style, or aesthetic presentation, of the design. Cairo advises that careful, deliberate decisions must be made regarding the layout and the colors, typeface, fonts, and shapes to be used. Everything used must look as if it belongs in the design, as if it fits together and is organic. This level of attention is what makes designs that follow good design principles stand apart from designs that do not follow such principles.

For this step, I took notes on the shapes, colors, and typography I wanted to use. Since Tableau was a new design tool for me, I would need to see if I would be able to implement the visual style I had in mind. I also used Adobe Illustrator and Photoshop to create some of the visual elements I wanted to use in my viz.

Design on the Computer

According to Cairo, this step is similar to Step 3 with the hand sketches, but now the design work is done on the computer. Like Step 3, this step can take several iterations until the design reaches a satisfactory level of maturity and completion. The next three figures are samples from the viz.

The figure below shows the introduction slide. It presents the story that the viz will tell and provides the essential explanatory information. A navigation bar is present, giving the user a clear understanding of how to progress through the viz while also specifying its length.

intro

The next figure shows the first election slide. This slide consists of a heading to identify the election year and candidates, a stylized illustration of the winning candidate, and a caption about the election. Following the caption are brief instructions on how to use the visual elements: a geographic map depicting the Electoral College victories by candidate, a packed bubbles diagram that represents the states proportionally sized to their Electoral College values, and a vertical bar graph comparing the popular vote percentages. Each visual element has a region filter that allows the user to select a geographic region (Midwest, Northeast, Pacific, South, or West) and show only the results from that region. Slides 3 through 7 use the same layout as Slide 2.

reagan

The last figure shows the conclusion slide. This slide summarizes the main points made in the introduction slide while providing a final visual element that ranks all included elections based on the winning candidate’s Electoral College and popular vote percentages.

conclusion

Design Principles

I attempted to apply several design principles in order to present the information in a logical, structured, and appealing manner. I relied on the textbook from my Information Design class: Universal Principles of Design, by William Lidwell, Kitrina Holden, and Jill Butler.

Logic and Structure

According to the Five Hat Racks principle, information can be organized by category, time, location, alphabetical, or magnitude/continuum (highest to lowest, best to worst, etc.).

Since the focus of my viz was to debunk Trump’s claim of an Electoral vote landslide victory, I arranged the election slides in order of magnitude from most electoral votes won for a first-time victorious candidate (Reagan, 1980, 489 electoral votes) to the fewest won (Bush, 2000, 271 electoral votes). In this arrangement, the 2016 election dashboard was second-to-last as Trump won 304 electoral votes.

Layering is another design principle I applied to help manage information. Layering is defined as “…organizing information into related groupings and then presenting or making available only certain groupings at any one time.”

There are different types of layering. I applied two-dimensional layering. Information is presented in a way that only one layer is visible at a time; the information is revealed in a non-linear fashion, which means the information displayed reinforces relationships with information in other layers. An example of this application are the region filters on the election slides. If “All” is selected, then all of the states are shown in each element; if “Midwest” is selected, then only the states that belong to the Midwest region are displayed. Setting each filter to the same region allows the user to compare information about an election across the specified region.

As shown in the figure below, when one or more states in a region are selected on the geographic map, those states are then highlighted in the packed bubbles diagram and on the popular vote bar graph. Hovering over a state provides pop-up information as well.

regions_highlighting

This application of layering allows the user to control the amount of information displayed on the slide at any given time.

Aesthetic Appeal

A hallmark of good infographic design is consistency. In fact, Cairo references consistency in his design process in terms of defining a consistent visual style. For example, if a certain typeface is used for headings, then that typeface must be consistently used in that manner and not in other applications such as body text. According to Lidwell, consistency aids in comprehension, “Consistency enables people to efficiently transfer knowledge to new contexts, learn new things quickly, and focus attention on the relevant aspects of a task.” I applied two types of consistency in my design: functional, which refers to consistency in function and meaning, and aesthetic, which refers to consistency in style and appearance.

For functional consistency, I wanted the election slides (Slides 2-7) to have the same look and feel so the user would know how to interact with one after interacting with an earlier slide. The heading, stylized illustration, caption, and visual elements are all in the same approximate positions. This effort toward a consistent structure allows the user to move from slide to slide without needing to relearn the layout. In other words, functional consistency not only supports, but enables, a reader-driven approach.

reagan

bush

For aesthetic consistency, I focused on color choice. In fine art and information design, color is used to attract attention, indicate meaning, and enhance aesthetics. I limited my color choices to red and blue, which have been linked to the Republican and Democratic parties respectively. I created a custom color palette in Tableau and applied the appropriate party colors throughout the viz.

Evaluation of Tableau

As mentioned earlier, Tableau is a visualization tool that is intended for users who want to create appealing and engaging data visualizations without the need for prior knowledge or expertise in programming languages such as JavaScript, R, or Python. Tableau offers several product options to fit the needs of a single designer (Tableau Public and Tableau Desktop) or a design team spread across the world (Tableau Server and Tableau Online). Multiple data sources are supported, ranging from spreadsheets or PDFs, to live databases that can stream fresh data to the viz and update it in real time. Visualizations created in Tableau can also be scaled to fit multiple platforms, including desktop, browser, and mobile.

Tableau’s workspace consists of worksheets, dashboards, and stories. In this hierarchy, the worksheet is the smallest unit and it consists of a single visual element (for example, a map or bar graph). Worksheets can be combined together onto a dashboard, which can be enhanced with text and images. Dashboards can then be published as is, or they can be combined to create stories, which provide a distinct path for the user to progress through. I constructed my viz as a story.

While intended for those who do not have programming expertise, Tableau does require practice and patience as its learning curve can be steep. The numerous visualization options will satisfy most users with little modification, but for users who are looking for elaborate visualizations that require complex modifications, such work may require a deep coding skill set.

For me, Tableau was the right tool since I do not have a coding background. A new Tableau user must be patient when learning how to arrange the data in the data source. I needed to reorganize my data many times so that Tableau would give me the necessary dimensions and measures in order to create the geographic maps, packed bubble diagrams, and vertical bar graphs, and to apply colors as needed. What helped my development effort was the ability to duplicate worksheets. For example, once I created the 1980 geographic map, I simply right-clicked on the worksheet, selected Duplicate, and then changed the dimensions and measures so the new map reflected the 1988 election results. I did the same with the other visual elements as well. I also found the online help, user forums, and tutorial videos on Tableau’s website to be extremely valuable resources. To supplement Tableau’s content, I relied on some videos I found on YouTube. With some patience and willingness to learn from one’s mistakes, I believe anyone can learn how to use Tableau to create engaging and appealing interactive visualizations.

User Feedback

I used Survey Monkey to conduct a usability survey. I had 26 participants (a mix of mix of co-workers and fellow SUNY Polytechnic students) complete the survey. Overall, the feedback I received was positive and constructive. I made several improvements to the final design based on their input and input I received during my thesis defense.

One part from the survey that I’d like to share here asked the participants to pick five adjectives (a mix of positive, neutral, and negative words) that best described their experience with my viz. From the results of that question, I generated a word cloud. The larger and darker in color, the more often those adjectives were chosen.

wordle_thesis_4-27-18

Conclusion

The intent of this post was to share my thesis project and some aspects of the design process. I relied heavily on my thesis paper for the content of this post, but tried not to repeat the entire paper here. I wanted to share what I thought were the more relevant and interesting parts.

I found this project to be exciting and educational, and at times taxing and frustrating. I wanted to explore a topic that I was interested in and develop some skills by producing something that I hadn’t done before. I feel I met those goals.

My thesis semester was an inspiring, memorable capstone on a rewarding return to formal education. I look forward to applying what I’ve learned about Information Design at work, and I look forward to future endeavors and opportunities that may arise as a result of completing my Master’s degree. I hope to continue designing infographics and visualizations. I already have a few ideas for follow-up projects with Tableau, which I will share here.