interactive data visualization

The Berggruen Index

I worked with Stamen Design to help The Berggruen Institute make global government easier to understand by creating an interactive data exploration tool based on a complex educational index.

why I show this project

This project shows how a close designer-engineer relationship improves the quality of a digital experience.

The People

This interactive tool offers the general public a way to think more precisely about what makes a good government by splitting up the data into three main categories of information.

The Team

Stamen's and my work with The Berggruen Institute was a first for the client team, and allowed Stamen to demonstrate the process of creating interactive design to represent a report that had otherwise only been printed.

The Business

Creating an interactive version of this government quality index helps the Berggruen Institute call attention to the state of democracy in our country and helps concretely explain and measure the components of a good democracy.

About The Berggruen Institute

The Berggruen Institute develops foundational ideas about how to reshape political and social institutions in the face of these great transformations. They work across cultures, disciplines and political boundaries to develop long-term answers to the biggest challenges of the 21st Century.

Visit Website
my design role

Visual Design Lead

I was responsible for executing all visual designs shown in this case study. I gathered requirements and feedback from the Stamen team and directly from the client team via presentation. I collaborated with the Stamen team on visual design and UI strategy.

collaborators
  • Design Technologist
  • Program Director
  • Creative Director

Brand Refinement

  • Evaluated existing brand guidelines
  • Evolved styles for interactivity
  • Updated colors for data presentation

Experience Strategy

  • Reviewed existing report
  • Sketched visualization methods
  • Wireframes for interactivity

Visual Design

  • Created hi-fi mockups
  • Linked mockups as prototype
  • Stakeholder presentation

Code Collaboration

  • Collaborated on CSS styling
  • Wrote style variables for consistency

Style Inventory

I began by exploring the visual design style of existing Berggruen communication elements.

When making a custom visualization tool, it can be challenging to find opportunities to express a brand. I wanted to make sure the connection didn't feel forced, so I strategically borrowed typography, the limited color palette, and the intellectual aesthetic.

Rapid Collaboration

Open conversation between our visual design and development processes helped us get the most out of our collective skillsets.

I worked with Stamen's founder as well as their design technologist and program director to understand the core functions of the original Berggruen Report. I used my understanding of interaction design to augment the analytic expertise that Stamen brought to the project.

Wireframing

Rapid sketching and mockups helped me check assumptions early with Stamen's data experts to ensure an efficient but creative visual design exploration.

Stamen's design technologist and I started work on this project roughly at the same time, so I was able to put rough ideas in front of him quickly for feedback and feasibility. I emphasized functionality and broad exploration at this stage, rather than complicated wireframes or polished design.

Visualization Methods

Rapid sketching also helped me bring clients at the Berggruen Institute into our thought process early before investing time in technical development.

Once the team had established a general framework for the visualization tool, I explored more detailed methods for comparing countries. Since there was no fully developed tool yet in which to display these ideas, I created small illustrations and presented them directly to the team and client.

Design Iteration

One of the challenges of the Berggruen Index was to convey the nested structure of the information.

With a clearer picture of the scope and specifics of the interface, I was able to move into higher fidelity comps fairly quickly. Berggruen's country analysis was complex, with a nested hierarchy of metrics for Quality of Government, Life, and Democracy. I explored UI options that would make this hierarchy easy to understand and navigate.

Developer Collaboration

I contributed to the development of styling and layout structure for my visual designs by participating in the development process occasionally.

This project was a constant collaboration between Stamen's design technologist and myself. We shared work often and I was able to observe the results of technical adjustments almost immediately. Being able to observe and, at times, suggest edits to the structure of styling and layout variables made it possible for me to help translate my visual design work into code.

Web Accessibility

Because this data presentation relies on color to show the differences between data types, I wanted to be as thorough as time allowed in choosing an effective color palette.

This visualization uses both color and opacity to convey information. I created tests to ensure these visual variables communicated as much as possible to as many people as possible. I also found additional ways to encode information on the off-chance that some aspect of the visual interface wasn't fully accessible for any reason.

High-Fidelity Design

I began to see how our strategy work had been successful when I realized I could use the tool to answer questions I wouldn't have known how to ask before.

The interactive layer in this tool helps increase access to 6+ years of analysis by the Berggruen Institute. Even though I still consider myself a novice on this subject, I found myself equipped to discover insights in just a few moments. For example - the interaction below shows us that "part of what makes government in the UK of slightly higher quality than in Japan is the number of organizations where citizens can pursue political interests."

Project Outcomes

With an open and collaborative relationship with technical development, I was able to maintain a creative approach to communicating complex information.

Effective data visualization balances creative exploration with technical accuracy. Sometimes the need for accuracy makes the creative aspect hard to maintain, since the two process often rely on very different tools and skillsets. When dealing with complex information, I push to keep communication open and to sketch ideas quickly and often. This way, I'm able to check assumptions for accuracy and benefit from the skillsets of others while maintaining the space to explore unexpected solutions.

sam
vogt
design

If you're looking for an experienced visual designer with a focus on data visualization, let's get in touch!

About & Contact
I custom-built this portfolio with Webflow - a visual site builder that, despite superficial similarities, is decidedly unlike Wix, Squarespace, WordPress, or just about anything else. I love to talk about the ways Webflow breaks down old silos and improves the partnership between design and development.