⚠️ This is an archived version of my portfolio. Visit my current site here. ⚠️

Case study for Arnold Ventures project work.

Arnold Ventures

I was responsible for the design and development of a webpage and data visualization to help site visitors understand Arnold Ventures through their grant data.

In this case study:

  1. Context
  2. Process: Research, design, development
  3. Takeaways
Final design for the interactive grants bubble chart.

1. Context

Arnold Ventures is a philanthropy focusing on issues across health, education, criminal justice and public finance. I joined my team at Upstatement to focus on data visualization and help tell AV's story through data. Prior to my start, Upstatement led AV through a thorough rebrand and website redesign to help them better communicate their mission and values.

2. Process


I learned to juggle a lot of requirements on this project: an emphasis on transparency, a desire for data humanism, and a clear presentation of AV's guiding principles. I led conversations with our client and spent a month exploring and understanding our data before diving into rounds of iteration.

Some early data sketches I used to understand what stories the data could help illustrate.


The page needed to serve a variety of purposes, one of which was to introduce Arnold Ventures to new users unfamiliar with the organization. At the same time, we wanted to create a tool that more familiar users could use to explore the data. The Knight Foundation and Fathom's work on Trends in Civic Tech was a big inspiration for me.

One of the overarching goals, however, was to emphasize the impact value of each grant rather than its monetary value. It was definitely an interesting challenge to solve — how to visualize data without the numbers.

Below are some designs that explored different ways of humanizing and highlighting the data to communicate AV's mission.

Proof of concept sketch for the grants page visualization.
Mock quote used to convey the human impact of receiving grants.
Concept: An annotated timeline would allow Arnold Ventures to call out certain milestones in their efforts.
Early design of featured grant recipient stories.
Featured statistics to highlight more human, non-monetary grant data.


This was my first time working with force layouts in D3, so there was a bit of a learning curve (and, I mean, it's D3 so that was expected). I gained some practice designing for data vis as well and spent a while working between Sketch and code while iterating.

Iterations of the grants bubble chart.

Integrating the vis into the the site required some creativity and some plugins. The site runs on Craft CMS and it took some maneuvering to source the data from Craft to design for scalability — my favorite challenge of this project.

The idea of responsive data vis had totally slipped my mind and became both a headache and a huge learning opportunity. Scaling the bubble chart for various screen sizes but also designing to accommodate an evolving and growing data set, I had to consider the project's sustainability in the future after I transitioned off the team.

Final design for the interactive grants bubble chart.

3. Takeaways

Strategy: How to manage a project, start to finish: defining scope, sorting through requirements, and working closely with stakeholders.

Design: Strike a balance between designing static mockups and rapid-prototyping in code (don't spend so much time copy-pasting circles in Sketch). Do NOT forget about how data vis will scale for changing screen sizes and changing data sets.

Development: Page performance, especially with lots of data, should be a top priority.

I owe a great deal to the amazing team I got to work with at Upstatement (Keri O'Brian, Jess Landre, Michael Pelletier and Camden Phalen) and our great friends on the Arnold Ventures team. A big thank you to everyone involved!

See the live site at arnoldventures.org/grants.