Nuclear Threat Initiative, NTI Index Design
Summary
Client
Nuclear Threat Initiative (NTI)
Project
Redesign of NTI Index website
My Roles
UX strategy & design lead; data visualization designer
Impact
Client was extremely pleased with the final product and established it as a key part of their education and advocacy campaign
Awards
AVA Award- Platinum; Communicator Award - Excellence
When
February-September, 2020
Background
Program Goals
The Nuclear Threat Institute seeks “to transform global security by driving systemic solutions to nuclear and biological threats imperiling humanity.” Transforming approaches to nuclear security is a signature priority.
“Given the challenging backdrop for the sharp decline in progress, it is more important than ever to identify shortfalls and to call for governments, industry, and the international community to once again step up their efforts to prevent a catastrophic attack using stolen nuclear materials or an act of sabotage that could further shake global foundations,”
The NTI Index is part of this work, showcasing where 176 countries are succeeding and falling short on a selection of policies and practices to limit the risk of nuclear weapons and weaponization.
Project Context and Objective
NTI wanted to implement a full redesign of the NTI Index website for its fifth biannual release. It wanted data displays to be clearer and the results better tied to recommended actions for individual countries. Fundamentally, NTI wanted to drive change in policies and practices.
NTI Index Audiences
Working with the NTI team, we developed a focus on two sets of target audiences. One set includes those that can enact changes, or actors:
National-level government officials or policymakers (with particular focus on staff as opposed to the leaders themselves)
Experts / leaders from international orgs (e.g., UN, IAEA)
Industry leaders (for radioactive source materials)
State-/local-level officials/policymakers, including regulators (for radioactive source materials)
A second set are influencers of the actors:
NGO experts / researchers
Media, traditional and subject-specific
Academics / students
Approach & Activities
Discovery Workshops
We began the discovery workshop with a favorite pre-session homework activity of mine, the love letter. We ask the client team to imagine it is a year in the future, the redesigned product has launched, and it has been a great success. We ask them to write a love letter to the future product, telling it what about it they love so much, and how it has made them feel such adoration. We “reward” both insight and cheekiness.
The love letter exercise not only breaks the ice nicely, it also surfaces many client expectations and assumptions. It starts us into the discussion of what the client wants the site to accomplish - goals - and who it will need to reach to bring about the desired ends - target audiences. In this case we captured goals quickly and then spent a healthy amount of time prioritizing audiences and developing assumed user stories-for them. Budget constraints limited validation activities, but we had the benefit of substantial expertise in the room.
We had pre-identified and printed key pages from a set of comparator sites. We also had printouts of the major parts of the current NTI Index site. Dot time! I gave each person a set of two color dots. For each site, they had to place one color on things they liked or were good models, and the other color on things that they did not like or did not envision working well on the new NTI Index site. We then reviewed the choices for each site and discussed people’s different perspectives. In many cases we were able to drill further into elements we wanted to keep and why. In others we built clarity around things to avoid. In some cases we surfaced disagreements we could resolve.
The session concluded with my visual design colleague assessing the existing brand system and establishing preferences for imagery.
Content Model
While the site was neither large nor complex, the technical lead and I determined that developing a content model would be helpful. I view these artifacts as highly collaborative, but I usually take the first crack at them based on my understanding of the content involved and the desired experience. I am generally working on the site map simultaneously, and likely some page ideas, in sketch form.
My draft core index data model was useful in thinking about what we would need to illustrate and how to categorize the data. The tech lead and I later expanded from this base into a more effective overall architecture.
Updated Presentation of Index Results
At the core, the site needed to show index results across countries at a high level, and within countries in more detail. Depending on the nuclear capabilities of a country, the overall index score can be broken down further by three to five categories, each with one to several indicators. The challenge became how to display all this information in a clear and engaging way. Below are some examples of our solutions.
Landing Page Design
We wanted to make the landing page much more engaging and place the results and stories around them high on the page. These early sketches show some of the ideas we discussed.
Sketch of new NTI Index homepage, version 1
Sketch of new NTI Index homepage, version 2
Sketch of new NTI Index homepage, version 3
World-level Tile-Grid Map
We knew a coded map would be a valuable part of the presentation, given the goal to see most of the world’s countries’ performances at a glance. I have long had concerns about the ubiquitous, color-coded choropleth map many sites have, including the one we were redesigning. Arguably the most dangerous country the Index highlights, North Korea, is physically small. Its low score is visually dwarfed by its bigger neighbors. Canada, no one’s idea of a problem case, is huge, and visually overtakes many smaller places needing attention.
To solve this problem, we developed a novel, effective solution. I led the design of a world-level tile-grid map in which every country would be represented by an identically-sized, square tile. Geographic precision is a low priority with this model, but, as long as countries are generally in the right place, visitors can find them. I hadn’t seen many world-level tile grid maps, and none was sufficiently faithful to geography to retain this findability.
I put together a presentation to explain my thinking and convinced the client to try it.
Map and Table Panels
For accessibility and to accommodate likely audience preferences, I planned to give the map a counterpart table view. I sketched a solution during collaboration with my visual designer teammate, and she came back with an intriguing additional idea: might it not be useful to have both a small map and a simple table available? We worked together to develop a three panel view of the country level data that provided for a full map view, a full table view, and a 50/50 split view.
Country and Comparator Display
On the country level, we needed to display more detail about the results, but we also needed to do so in a way that provided context. Comparisons to countries or defined country groups, e.g, the G7, were also important. We solved this with a parallel coordinates-style visualization that included low, median, and high values for each measure. Audiences could then add comparators into the same display and clearly see similarities and differences.
We again developed a short deck to explain our design choices and provide reasoning for different displays than the client had used in the past.
Improvement Scenarios
The legacy site had a “simulator” feature that allowed a visitor to adjust values for individual indicator results and see how the country’s total score would change. While engaging, the feature was divorced from any action a country might take; the changes were abstract, and the action-oriented focus was missing.
I reconceived this feature and worked with the technical lead to make an alternate version feasible. On the new site, audiences see a set of scenarios that represent NTI’s recommended set of actions. For a given country, one can see the score change for adopting a scenario. If audiences open details, they see all the specific actions (policy changes, treaty adoptions, etc.) that make up the scenario. Those the country has already done are checked, and those still to do appear as empty check-boxes indicating action is needed.
Data Team Collaboration
NTI ran the NTI Index program with two partner organizations, one of which led the collection and analysis of the Index data. In developing the Index site, our team leads worked closely with these other organizations to understand the nature of the data, learn what analysis of it was finding, and explore desired messaging around these results.
Development Team Support
My development colleagues built the site using a headless Wordpress and React architecture. The core Index data lives in a separate database.
The project schedule and budget were both extremely tight, but my design team and the development team worked closely and thoughtfully to successfully deliver the project. As part of my role in ensuring we hit our mark, I jumped into Jira stories as my input was needed, provided additional design details to unblock tasks, adjusted elements to remove coding complexity, and, generally, maintained tight communications with the tech lead, even outside of our regular stand-ups.