All Projects, Experience Design, Visual Design

Experience Design
Donation Explorer Web Tool

Try the tool live
tool in laptop

Overview
Designing a data visualization tool through a user-centered process to help Washington Trails Association identify fundraising opportunities through their donor data.

My Activities
  • Data Viz
  • Co-design
  • Prototyping
  • Evaluation
  • Web Design
  • Visual Design

Client

Washington Trails Association (WTA)
Info Visualization Studio
University of Washington


My team reached out to a favorite Seattle non-profit, Washington Trails Association, to ask if we could make a browser-based data visualization tool using their real member data. Happily, they agreed an supplied us with 3 years of anonymized donation data.

 

Research

ANALYZING THE DATA

Our first step was to look at the data, identify the mulivariate information, and start to make hypotheses about it. My team cleaned the data set using OpenRefine.

 

PROTOTYPING

As we looked at the data and began to make sense of it, we began brainstorming and sketching possible visualizations to answer questions like, “which zip code experienced the highest growth in volunteer hours?”

 

sketches-4-600

sketches-3-300

One cleaned, we explored the real data set in Tableau to quickly verify if the real data would produce meaningful visualizations. One enlightening realization was that counties did not parallel zip codes and though our client uses zip codes extensively in their framing and organizing of membership initiatives, we could not use zip code data to product a meaningful visualization.

 

tableau-sketch

tableau-test

After multiple sketches and combinations of variables, we selected rough sketches to move forward on and made a clickable wireframe.

 

Our clickable wireframe

 

Once we had a preliminary understanding of what we could do with the data and had a basic clickable prototype, we set up a meeting to exchange ideas with our client.

 

CLIENT CO-DESIGN SESSSION

Though our client had given us a data set we didn’t have enough information about how they wanted to use it. This raised an interesting question for us: How do you help clients engage with their data?

Using a user-centered design process, we prepared a collaborative design (co-design) activity to explore the client’s needs. Through open card sorting, card ranking, and structured brainstorming with the client about the types of databases they have, we arrived at 5 new questions to explore in a data visualization.

card sorting activity

Clients wrote down all questions they had about their members

p-design-small-2

Client data sets related to questions were identified and noted on small stickies

This activity was transformative in the following ways:

1. It surfaced limitations of previously provided data set and led to the provision of new and richer data.
2. It potentially increased clients’ understanding of data projects including concepts around “clean” data.
3. It prioritized the main client goals for the tool, leading to a path forward.

After the meeting our client supplied us with new, and richer data that consisted of 130,000 rows spanning over 15 years of donation data.  We continued to use a US Census data set for towns and cities by state and country. Based on the workshop, we also needed to add new data: my teammember created WTA regional boundaries and calculated lengths of membership duration.

 

ITERATION: NEW VISUALIZATIONS FOR NEW QUESTIONS

After reviewing the fresh data set and discussing our options with the developer on the team, we launched into a whiteboarding session to come up with new ways to explore answers to the client’s most important questions. We focused on creating visualizations to investigate the following:

1. Where do donations come from across the state?
2. What is a “major gift” according to members?
3. How long do people stay members?
4. What is the growth rate of memberships and donation amounts?

I focused on creating an understandable tool, following best practices of interactive visualization design, and constructing a meaningful scrollable narrative.

The whiteboard sketches and new wireframes of a scrolling website led to my team member building an HTML prototype using Tableau software’s API. Below are screenshots of the four sections of our visualization.

 

Evaluation

USABILITY TESTING

With a basic, yet buggy interactive prototype, we met again with out clients to evaluate how useful and comprehensible the tool was. Three staff members agreed to participate. I watched them interact with the prototype and asked them to click through each section, telling me what they were thinking and what questions they thought they could answer with the tool. Though this testing revealed a number of expected bugs, it also clarified for us how our client would use this in the future.

 

usability testFor instance, one tester told us the tool would be useful in communicating trends to board members. Another told us he could use the tool to inform his decision about where to stage upcoming fundraising events.

Staff members generally understood the visualizations, while exposing areas where interactions like “reset visualization” and “select all” were needed. Though the colors we used were generally thought to be accessible, one tester had a color vision deficiency. This provided more support for redesigning the color pallet.

 

big list spreadsheet

Analyzing the results of the three usability tests, a teammate prioritized the bugs and improvements into a prioritization matrix.

The team collaboratively ranked them for priority and suggested potential fixes, while our developer ranked the fixes along a scale of difficulty and made his own suggestions

Concurrently I drafted suggestions for overall UI design improvements along with alignment with the WTA brand.

Visual Design

BRAND ALIGNMENT

We wanted the look and feel of the visualization to fit within WTA’s general brand. I looked at web and print collateral to identify brand attributes to guide the visual design. The brand’s reliance on oranges, greens, and blues of similar contrast made them unsuitable for information design from a best practice and accessibility standpoint. Ultimately we used green, black, and grey, as the primary tool colors, but used brighter and distinct colors to encode the eight regions in the various visualizations. We also tested these colors through color blindness simulations.

possible-styles-01-800

possible-styles-02-800

possible-styles-03-800

I gave the visualization a descriptive and memorable title and a short explanatory introduction. Feeling that the first visualization, the Geographic Overview, needed to provide immediate contextual understanding via a map, I advocated for this panel to be first in our narrative. I used as many best practices as possible to make the visualization understandable given the limitations of Tableau.

Our final visualization conforms to Schneiderman’s information seeking mantra; “overview first, zoom and filter, then details-on-demand” (much of it standard in Tableau), but through our scrolling browser-based design, color choices, and clear and consistent text we were able to create a unique tool for Washington Trails Association.

Reflection

This project will be the client’s first visualization tool and we expect it to be a learning experience for them to use Tableau, as we have delivered all the visualization files, cleaned data sets, and source code. If we created this visualization again, we would likely move beyond Tableau to a visualization language like D3 so that we could control not just the look and feel of all elements, but the transitions, filters, and animations not customizable in Tableau. For instance, I would have preferred to have a small color coded and clickable map and a better designed list of regions to act as a contextual filters, instead of the standard check boxes we had to use.

 

Try out Donor Explorer live

 

 

 

Credits: My teammates for this project were Jon Anscher, Dave Molinero and Tarryn Lambert as part of a graduate course in the Human-Centered Design and Engineering Department at the University of Washington taught by Brock Craft, PhD.

 

 

 

Tags: , , , , , , , , , ,