Charting a Course

Some years ago, a recent Pratt graduate named Chris Peck went on a job interview. While his interviewer was taking Chris through a tour of the firm, they came upon some of the firm’s work for Pencils of Promise, a non-profit founded in 2008 that builds schools in developing regions. Recognition flashed across Chris’ face. Gesturing toward the work, he said “That’s funny! I worked on that.”

“Yeah. Apparently a lot of instructors use this identity for projects.”

“No,” Chris said pointing directly at the page. “I designed that logo. In a class.” 

The logo he designed had traveled around the world and come back to meet him back at this interview in New York.

The course that Chris was talking about is Design Corps, an Undergraduate Communications Design course at Pratt Institute revived in 2005 by then-department Chair Kathleen Creighton. Re-envisioned as a more direct interaction between students and pro-bono clients, Design Corps was intended to simulate as closely as possible a design firm experience that produced actual work for clients in need and taught students the benefits of giving back.

While it has gained some name recognition at the Institute level and beyond the gates, the course has generally gained a reputation as a small class that works with small non-profits — a ‘good thing’ that faculty, students or administrators have heard of but can’t quite define. However, over its 14 years of existence in this form, Design Corps has evolved in the kind of work it does and how it does that work, with more emphasis on research and even more in-depth interaction with clients. It has also continued to expand its reach, working with clients whose impact is felt as far away as Laos — and of course having a lasting impact (so we hope) on students who have enrolled as well.

Now Professor David Frisco and I, the instructors of Design Corps for the last 14 years, have endeavored (with the help of the Pratt Institute Faculty Development Fund [FDF]) to document and present the work of Design Corps over those 14 years. 

This will include an artifact, an exhibit and an updated web site, each of which would feature student work and case studies from the 14 years. An integral part of each would be a map of the clients with whom Design Corps has worked over the years, showing their scope in terms of both services delivered and geography.

With that in mind, the goal of this final project was to create an initial visualization that would map that scope and impact and explore methods for presenting it. By having the mapping done by one of the instructors, who was intimately involved with all aspects of the course’s development, it would provide insight into benefits and challenges of different details and then allow for outside perspective through the UX research stage.

The ‘end result’ then, would be a prototype and an investigation, a jumping off point for either visualization by others or refinement on my part. In a sense, it would be a visualization of what Chris experienced in that interview years ago. (You’ll see both Chris and Pencils of Promise if you move the slider to “Fall 09 – Spring 10” in the dashboard.) As a tool, it would be part of a larger effort to educate internal and external audiences to the good work the course and its students have done

PROCESS AND RATIONALE

For a good deal of the project, the content and visualization fed each other, with discoveries in one opening possibilities in the other.

THE CONTENT

Focused on the projects defined in the FDF application — as well as our own interest in creating a database and documentation regardless — David and I had worked with graduate research assistants to develop content over the Fall 18 / Spring 19 academic year. Categories were proposed, student names compiled and contact information compiled into a set of Google sheets, one for clients and projects, and one for students. Of course, these sheets were incomplete and more visualizations themselves; tables for our review instead of clean, workable data.

So the sheets were cleaned up and missing content was gathered as an initial step in the process, with decisions made along the way as to categorization and structure. Open Refine was used for some data cleanup and concatenation or separation where necessary. Other data, such as student names, were reviewed individually as a means of reviewing the original entry by student workers.

I created separate sheets for client location and client area of impact with a third sheet for student names. Discreet IDs (e.g. “SJ_FA05” to denote client and semester) were generated to link the first two sheets, while the student list was linked to these using a shared ‘Year’ field (e.g. “Fall 05 – Spring 06”), which would come in handy when it came to interactive filtering on the dashboard. 

All three of these sheets were then linked through Tableau Public as live documents, so that future realizations or the addition of future semesters could easily update in the visualization. Tableau was of course selected for the project due to its ability to show not just the locations of Design Corps’ clients, but to link these to other statistical and text-based visualizations in a single dashboard.

THE VISUALIZATION

In contrast to how I had worked for most of the labs this semester, I started this time with several pen sketches to start organizing the content and thinking through the story I was telling, with a focus on location of the clients (geographic points), regions of their impact (shaded countries) and number of clients per kind of service (e.g. Community, Education) and project format (e.g. print, web). The last one was dropped pretty quickly in the visualization process, as I realized that any change was minimal, would be unclear due to overlap of those formats for a single project, and in the context of a site or exhibit would be a story told through other means. A later attempt to bring in a line graph of number of students through the years was similarly dropped, as it brought little to the table.

• 

• 

Luckily, shortly before sketching I had read an article that noted the need to credit one’s team and participants and struck upon the idea of tying all those student names as another very concrete indicator of impact. 

It is worth noting here that at the time I sat down to unite content with this sketch, I was still thinking of the visualization as an animation, with sites and scope increasing as the years passed (not unlike the Breathing City temporal map shown). It was suggested — and soon became quite evident — that an interactive visualization, allowing the user to seek out certain years and categories of client focus would be more useful and engaging. (An animation may still play a role down the line, but it serves a different purpose.)

With that in mind, the sketch then took an intermediate step that was more of a mixed-fidelity wireframe, allowing me to think about real estate more concretely and envision the interaction of elements, as well as visual hierarchy.

• 

• 

The time was ripe to bring these sketches and the organized content into Tableau for a long series of iterations that would create conversations between the two, shifting items back and forth. 

Decisions were made pretty early regarding hierarchy, color and basic interactivity. The maps would tell the main story, with the other visualizations buttressing that story. I worked out how to display a dual axis in Tableau, so that office location and areas of impact could both be shown on the world map. 

• 

• 

• 

Linking the maps and visualizations through color of client focus seemed an obvious means to tie the different sheets together and one of the palettes provided by Tableau worked well, considering that I was pushing the limit of number of categories for color coding. In the event that color differentiation cause any issues, I made sure that the client area of focus was also a part of each pop-up tool tip. To not overwhelm with color, the geographic scope of impact was handled with tints of gray. (The fact that different client foci also occur in different countries means that color coding impact to client focus is also not an option in this exploration.)

On a branding note: A pink suggestive of the magenta used for the Design Corps logo and the blue frames — as well as use of the very legible Helvetica throughout — are nods to the course’s existing brand, which can be played up more in future iterations. For now, they work rather well with the category and map palettes, each of which I subdued a little in application.

The primary interaction, as intended even when this was conceived as an animation, was the delineation of years. One could use the Tableau filter slider to click through 14 academic years to see how work expanded, but could also view “All.” What this lost from the original intention of an interaction was the cumulative concept, watching client locations emerge and countries shade over time until arriving at “All,” which is to say “Now.” But the benefits were worth the trade off.

The secondary interactions were the ability to zoom in to overcome occlusion on the world map in particular (I continue to go back and forth on zooming for the local map.) and the use of the key to highlight any visible members of a certain category. Both of these developments largely came through exploration of the software over time, as I looked at the various possibilities. 

FINDING THE STORY

Around the time that I realized I was pushing things around too much without true purpose, I sent my progress in for a review and took a step back, at which point I almost immediately had my most important realization; I was showing too many geographic levels. By having a local, national and global map, I was telling the story more often than I had to. While telling the story (or aspects of it) in words and images can be helpful, having a national map and a global map that can zoom is redundant and a waste of valuable real estate. Perhaps more importantly, having just local and global maps is a very direct message of growth and local to global impact.

I stepped away from Tableau and made another simple pen sketch — which also incorporated a professorial suggestion of using floating elements in Tableau:

As a story, with a very clear beginning, middle and end (a relative term; ‘present’ is perhaps more apt here) plus epilogue, this can translate as:

This story would then be emphasized through the text and titles of the four main visualizations in the final.

As realized in Tableau, it looked like this:

I would like to highlight here the epilogue of the story, the list of Design Corps alumni in the lower right corner. Note how the students are also filtered by the year slider, but how the entire list of 266 names has to scroll. I fought this at first, wanting to show all of the names at once for another sense of scale and impact, even though it took up a good deal of real estate (and the names were getting quite small). Then I thought back to the animated visualization The Fallen of World War II, where the markers for Russian deaths just kept climbing and the length and duration of the scroll is what suggested scale. While obviously quite different in scope and subject, I recognized that there might be benefits to having someone scroll.

• 

• 

With a solid prototype in hand, I was ready to test it out. 

UX RESEARCH

The three participants for the research were selected based on a range of Design Corps knowledge or familiarity, from a friend who had ‘no name recognition’ of the course to a Pratt instructor from the same department, who had heard a good deal about the class (but still found some surprises). What united all three was my identification of them, and then their self-identification, as supporters of cause-related work, making them indicative of the sensibilities of potential clients, supporters or funders.

For the sake of user research, this format of the visualization was framed as an interactive graphic in the exhibition proposed as part of the FDF. To that end, research was conducted with participants viewing the dashboard on a desktop screen with only a mouse attached.

Participants were asked to talk through their experience of (and path through) the visualization as one who had just walked up to the screen at an exhibition. I listened, but also observed what paths each one took, making notes for follow-up questions at the end, only answering questions asked of me if the reviewer encountered a true roadblock, such as a technical glitch.

The questions that were asked as a matter of course at the end (unless addressed directly by the talk through) were:

• Based on what you have reviewed, what words would you use to describe Design Corps and its development over the years?
• What surprised you, if anything, based on your pre-existing knowledge (or lack thereof) of the program or its stakeholders?
• Did you notice any specific interaction between the different visualizations within the dashboard? How would you describe these?
• What questions do you still have about Design Corps’ mission and scope, having reviewed the visualization?

Some examples of follow-ups, depending on their responses, talk through or what I observed: 

• Are there any aspects of the interaction/visualization you found frustrating or confusing?
• Did you recognize the visual relationships between the countries on the global map?
• Do you have any thoughts on the scrolling of the student list?

Findings and Next Steps

Based on the participants’ feedback and my own work with the visualization, several threads and themes emerged as this project moves forward into its next stages.

THE STORY WAS CLEAR

Between the headline, the introductory language and the visual hierarchy, the local-to-global growth and scope of work was evident to all and their first observation. “Wide reach,” “Worldwide impact,” “Variety of pursuits” are illustrative examples of the language used.

But: language is important in telling that story. While the visualization did a very clear job of conveying the idea of scope, it became clear from questions and comments that exactly what Design Corps is remained a question. Just what a “Client” is came up once or twice. They knew it worked with a range of clients and a number of students, and that it had global impact, but they were still a little fuzzy on just what it did. I believe that the language (which I cleaned up a little and must clean up more) could still better convey this — if it were a stand-alone visual. 

IT’S ONLY PART OF THE STORY

Everyone wanted to know more. I consider this a success. They wanted to see more relationships, examples of work and case studies. This ties to the previous paragraph, where they were also looking for more context for what Design Corps does and is indicative of this visualization as just one story in a larger narrative.

“Now I’m pulled into Bat Conservation… I want to see the work.”
“I want to know more about the students.”
“Is social justice defined anywhere?”

If this visualization exists, as it was framed, in an exhibition, the clear introduction to Design Corps could happen as a different panel or wall. Work samples could be incorporated into this screen if it were large format, but they can also be links to other pages on a site. Categories of client focus could be a panel of their own, or their distinctions (and overlaps) made clear through a separate graphic.

At the heart of these — and it’s a point well taken — is where can we see the emotion, the actual product, or even, as one reviewer asked, quantitative data on just how many more donations an organization received because of Design Corps’ involvement? How many more hits to their site? Which students went straight to the non-profit world, inspired to continue the good work?

CLEAN UP THE DETAILS

The dashboard in this form could still use a good deal of clean-up and refinement. Some actions, like working with the formatting of the student names (still a work in progress) are just about distractions. Some, like exposed user controls that allow the viewer to include and exclude key items, essentially ‘break’ the visualization. (I found those and turned them off.)

Some are more of an issue in terms of telling a true story. Unless one zooms in considerably, the detailed coastlines of Norway and Chile create a shading effect that suggests impact in those nations. (For now, I have left this one in, to illustrate the point.)

INTERACTIVITY WAS A BIG HIT

As mentioned, switching from animation to interactivity was the right move. The participants (and I) enjoyed clicking through and exploring the maps and relationships, zooming and panning  the global map. Contrary to expectations, all users preferred seeing the “All” option on the slider before digging into the years; seeing the entire scope of work and then sifting through the years and categories, filtering first by one, then the other.

Naturally, they wanted even more interactivity; “I want to see which students worked on which clients.” This of course links to the earlier point about the role of this particular visualization. As a standalone, all of this could be explored; as one element in a larger experience, some of that can be farmed out to other components. 

While no time limit was set on their reviews, it’s worth noting that the reviewers just kept going and, given more interactivity, they could cause a bottleneck in an installation or exhibition. The degree to which such expansion was explored would have to affect where it was situated in an environmental experience.

RELATIONSHIPS ARE COMPLEX

I was already aware, as we created the original spreadsheet, that some clients could be classified as multiple categories (e.g. Community and Youth) and decisions were made that in some cases easily could have gone the other way. Similarly, some clients have repeated in multiple semesters, which led to certain issues and limitations relative to counting and displaying them. The same goes for a few students. For the time frame involved, I believe that the data tells a true story, but ways of presenting it with more nuance can and should be explored and developed. I will definitely say now that, based on what I see in the breakdown of the area graph, and the color coding, I would of course more readily foresee combining categories — such as Community and Youth — rather than expanding them.

In Conclusion

With some of those points addressed, and other small tweaks made along the way, here’s the final visualization — for this stage:

This was a remarkably rewarding, but trying endeavor, outside of the steep learning curve of the condensed summer session. Visualizing a good deal of one’s work over 14 years, and quantifying that with maps and graphs, tables and numbers is not an exercise to be undertaken lightly. It leads to a fair amount of thinking that is not just about the visuals or the data. It causes one to pause, and to consider their impact — as I hope Chris and other former Design Corps students do from time to time. If everyone did, I suspect we would be better off.

—————–