Interviewing Internal Stakeholders

Gauging User Literacy

What We Did: With the connections of our director emeritus, we assembled an advisory board of three former health officials and state policymakers. Surveys captured insights from users about the project. Not only did I engage users at the outset of the project, but I also sought feedback from them throughout, following every significant design phase.
‍
What We Learned: Although awareness of social determinants was high in some policymaking circles, it wasn’t universally so. Interest groups and advocacy users were even less likely to have a comprehensive understanding of the policy implications of social determinants. We also learned that users prioritized ease of use, breadth of data, exportable data/visuals, and global social determinants messaging.

A key insight from user interviews

How are others delivering this type of data?

Getting Stakeholders on the Same Page

Addressing Stakeholder Fears: I created a sitemap because stakeholders had many internal conversations about how much content could or should be included without exceeding our scope.

Getting Alignment on Scope: The sitemap showed stakeholders the site's size, organization, and purpose. This shaped expectations, generated consensus on what would be built, and created a rough cost estimate. Their reactions also helped give me clarity and validated my assumptions about how many pages were needed to do the jobs required to meet all of our objectives — without going over budget.
‍
Figuring out Navigational Flow: Five main pages were needed to serve our users. The homepage would bring users straight to the national data, which would click through to a state page template with data specific to each state. A third page would offer policy resources for taking action on the data. A fourth page would provide a primer on the social determinants, and a 5th page would explain more about the project and offer the raw data for download.

Outlining the Needed Content

Spotting Gaps: Wireframing was done in tandem with content strategy. I approached the process iteratively with a content writer; switching between the two helped us outline a content inventory and identify problematic content areas that needed an additional strategy.

Identifying Misalignment with Project Objectives: Some content we developed was misaligned with the project's overall goals, content areas required to provide connective tissue were missing, and some content areas were so abundant that to house them would needlessly complicate the site structure.

Keeping the Project On-Track: Not only did this approach offer a straightforward way for the team to focus on what other information they needed to produce and provide to move forward. The sketchy style also allowed a group of very literal thinkers to see past the aesthetic presentation and focus on information architecture.

An early iteration of wireframes. Notice the yellow areas marking out needed content. Click on the image above to see a larger version and other phases of the wireframes.

Simplifying Complex Information for the User

Click on the image to see a larger version.

Translating Data Through Storytelling and Information Design

Translating Data Through Storytelling: The storytelling on our primer on social determinants (the “learn more” page) necessitated an illustrated approach to reinforce the points made throughout the narrative. However, as a solo practitioner at the time, I had neither the capacity nor the time to create illustrations from scratch. With a stretched budget, I sought out existing illustration work that I could purchase and customize to fit our narrative. Italian illustrator Mirko Grisendi’s style and themes blended perfectly with the project.

‍
Researching Map Design for Data Visualization: Traditional map projection of the United States presents interactivity and data visualization challenges. By researching various methods of geographic data visualization, I discovered the Visibility Basemap. The map balanced the scale between large and smaller Northeastern states while simplifying their shapes. States were instantly recognizable by their relative location and characteristic shape. Besides making smaller states easier to see and compare, it eased the challenges of interactivity and labeling. Once a user navigated to a state’s page, a higher fidelity zoomed-in map of each state was needed. Unable to find a map that worked, I re-drew a custom map that combined elements from both. It had the benefits of making states recognizable up close and far away and keeping the geometric sensibility. The custom map I made fulfilled a dual purpose, creating a recognizable landmark on the state page and creating a more cohesive transition for the user’s experience.

Branding and Stylization

Creating a new style guide: Developed in tandem with designing the lo-fi prototype, I created a logo and style guide for the user interface and determined the infographic and illustration approach. I kept the aesthetic friendly but earnest.

The visual design was a continuation of the design work I had done for phase I of the project, then called “Health of the States.”

Typography: I developed a type system with a font trio that complimented each other. Each typeface had a role: a condensed sans for saving space with lengthy variable names, a typeface our users were likely to associate with grassroots political movements, and a clean and simple sans workhorse.

Color Palette: However, the challenge was to use national themes without the implication of political parties, especially in the use of colors. I intentionally developed an alternative palette to red, white, and blue to be reminiscent of our national colors, then added additional hues like yellow to maneuver away from a partisan tone.

To Help Streamline Workflow

Steering Stakeholders in Reviews: I chose to create two phases of prototyping, starting with lo-fi prototypes while working on the content and style guide, then moving into hi-fi prototyping. Each stage of prototyping had a number of iterations. With each iteration, I added a new layer of information to evaluate, thus reducing the cognitive load. As a result, reviews went smoother and were mutually beneficial. By prolonging the “draft” stages of the website for reviews, I could steer the focus to more critical topics without folks getting distracted by window dressing.

Click on the image to see a larger version and mobile prototypes.

Getting what I needed to move forward: For instance, lo-fi interactive prototypes facilitated conversations about what visual content the site would have, the structure and visual hierarchy of the pages, and the interactions that were built into the prototype evidenced how the experience would unfold. This approach saved everyone time, effort, and frustration that would have typically resulted from unnecessary back-and-forth about style. The style guide provided an opportunity to get feedback on the aesthetic before applying it.

By the time I created a hi-fi prototype, reviewers could be confident that everything else had been taken care of, so they only needed to look at how well the interactions were performing.

Users are brought right to the data tools on the homepage.

Modal menu function for both state and variable selection. Predictive search sped the often tedious task of finding a state.

A fuzzy and predictive search was implemented across the site to hasten the user's journey.

In addition to the chosen indicator, state pages give a snapshot of which indicators the state is performing best and worst on.

The state's performance on a standard set of selected indicators reinforced the themes of the social determinants of health.