Creating Suchströme - Design Process

The design process of creating the visuals and UI Designs for Suchströme, a visualization of Google Trends data about the German election.

 

The project Suchströme (=search streams) reveals the top search trends on Google related to the German election 2021. In a series of interactive graphics, people can explore and compare the search interest in Germany’s major parties and current political topics.

When we started out with this project, Moritz Stefaner and I, as well as the team at Google New Initiative all agreed that we want the project to focus on political interest. Moritz has already worked on two visualizations of Google search data related to elections: One for the German election 2017 (2Q17) and one for the US election 2020 (Waves of Interest). 2Q17 focusses on real-time searches and attention peaks related to the top candidates. Waves of Interest looks at more long-term and geographical patterns in political topics over several election cycles.

We drew influences from both of these projects. Focussing less on real-time data and more on political topics allowed us to see trends in the search interest in the last 12 months. We further decided to show interest in the six major parties to clearly relate the project to the upcoming election, while steering clear of the gossip that can sometimes dominate the interest in relation to the top candidates.

On this basis, the core idea of the project quickly emerged: Let’s focus on direct comparisons to convey the excitement of a race between parties and political topics. What generates more interest in Germany, COVID-19 or sustainability, racism or unemployment? Which party is searched for more, the Green party or the CDU?

Design of the key visual

The key visual I developed puts direct comparisons front and center. Two lines each show the interest in a topic over 12 months. The visual focus lies on the filled areas between the curves. They show the difference between the topics and are colored to reflect which topic is in the lead. This highlights the differences within the direct comparison, while still allowing the viewer to see the individual developments of each topic.

Different Types of Comparisons

We originally started out using the concept of the key visual for the comparison of political topics and parties. However, the simple focus on comparisons can also be extended to all kind of comparisons.

On the page, we included temporal comparisons, showing the same party over the last two election years 2017 and 2021. This allowed us to explore questions like: How did the search interest in the major parties change compared to the last election? Who wins and who loses interest? For each comparison featured on the page, we also included downloads for sharing on social media, as images or video.

Inspiration

For design of the key visual and the texture on the page, I drew inspiration from different sources.

William Playfair's Imports & ExportsThe key visual used in Suchströme was first used by William Playfair in 1786. He already recognized the power of this technique for highlighting differences in 1-to-1 comparisons

William Playfair's Imports & Exports

The key visual used in Suchströme was first used by William Playfair in 1786. He already recognized the power of this technique for highlighting differences in 1-to-1 comparisons

Calder's MobilesThe  shapes of Calder’s Mobiles were an also inspired the aesthetics of the visual. We wanted to create shapes of similar smoothness & roundness in our visualizations. (Photograph © Andrew Dunn, 5 September 2004.)

Calder's Mobiles

The shapes of Calder’s Mobiles were an also inspired the aesthetics of the visual. We wanted to create shapes of similar smoothness & roundness in our visualizations. (Photograph © Andrew Dunn, 5 September 2004.)

 
Meandering RiversThe visual overlap and metaphor of meandering rivers (as seen in this 1944 graphic by Harold Fisk) inspired the design and also gave the project its name (Suchströme = Search Streams)

Meandering Rivers

The visual overlap and metaphor of meandering rivers (as seen in this 1944 graphic by Harold Fisk) inspired the design and also gave the project its name (Suchströme = Search Streams)

Printing TechniquesWe also drew inspiration from the look of different printing techniques. Specifically, the overlaps that emerge in cyanotype prints  influenced the design. We further imitated grain in risographs to give the visuals some grit.

Printing Techniques

We also drew inspiration from the look of different printing techniques. Specifically, the overlaps that emerge in cyanotype prints influenced the design. We further imitated grain in risographs to give the visuals some grit.

 
Scannable Document on 3. Oct 2021 at 18_11_46.JPG

Initial Sketches & Idea Generation

We played around with several ideas before landing on the key visual. One concept we had to abandon, was the comparison of different combinations of terms. For example: Was the term climate searched more in combination with the Green Party or the CDU? For these types of comparisons, the data was simply not saturated enough to be rendered in a meaningful way.

 

Design & Concept Exploration

Rising & Falling TermsComparing Search interest to multiple previous election years, showing past years as fading lines to quickly see if a topic is gaining or losing popularity.

Rising & Falling Terms

Comparing Search interest to multiple previous election years, showing past years as fading lines to quickly see if a topic is gaining or losing popularity.

Comparison to Election PollsAnother visual I played with uses triangles to show comparisons. Here, the two perpendicular axes show search interest and election polls. The shape of the triangle makes it possible to gage whether a party is represented…

Comparison to Election Polls

Another visual I played with uses triangles to show comparisons. Here, the two perpendicular axes show search interest and election polls. The shape of the triangle makes it possible to gage whether a party is represented more strongly in people’s search interest or in polls. However, it avoids direct comparisons of two dimensions that are measured quite differently.

 
Geographical ComparisonsThis concept already comes close to the concept we realized. Although geographical comparisons were not featured in the final page, the key visual originally stemmed from the idea of comparing a term along different meta-data…

Geographical Comparisons

This concept already comes close to the concept we realized. Although geographical comparisons were not featured in the final page, the key visual originally stemmed from the idea of comparing a term along different meta-data dimensions of the searches.

Grid of Temporal Comparisons by TopicWe also experimented with several grid views, where multiple comparisons could be viewed at the same time. Here you can see a display of different topics with each card showing a comparison of the last 2 election years.

Grid of Temporal Comparisons by Topic

We also experimented with several grid views, where multiple comparisons could be viewed at the same time. Here you can see a display of different topics with each card showing a comparison of the last 2 election years.

 
Screenshot_2021-06-10_at_13.33.42.png

Exploring the data and finding interesting comparisons

Although we did not end up using the grid view in the final product, it proved very useful in exploring the data and finding interesting comparisons to feature on the page of explore the trends of individual topics in general. Here, you can see the topic Lockdown compared to all other topics. The topics are ordered by interest, so we can see visual patterns emerge from top (more blue = other topic is more popular) to bottom (more purple = Lockdown is more popular). The closest races, that also produce the most interesting visuals, are usually found close to the selected topic. The grid can easily be explored by clicking on another card to change the topic in focus.

Read More