Crafted Product

The text below is from the Graphicacy website:

The redesigned America After 3 PM site is made of two interwoven components of a ‘scrollytelling’ landing page and a data explorer that visually tell the story of participation in, and unmet demand for, afterschool programs; the experiences and opportunities programs afford; and which children and families are missing out, and why.

The landing page (above) for America After 3 PM serves as an executive summary, a short, engaging overview of the key points from this year’s data on after-school care.

This allows a casual visitor to glean the key takeaways in just a few minutes, even if they never dive deeper to the data explorer page. We used a technique called scrollytelling, which integrates animation and transitions into the natural scrolling behavior of web browsers. As users scroll down the page, charts and graphics animate into place, and transition to new charts. Each chart is paired with a short description, which is woven together into a larger narrative.

From this opening narrative, there are several opportunities to dive deeper using the data explorer view. This view allows the user to see all the underlying data at the National level, as well as for each U.S. State. Through best practices around information design and user experience design, the data explorer allows easy navigation between geographies and across topics, so the full breadth of data is only a couple of clicks away.

Goal

The Graphicacy team continued our partnership with the Afterschool Alliance with a complete redesign of the website. Graphicacy delivered a much-improved user experience and a data explorer that visually tells the story of afterschool care in the United States, effectively highlighting key trends and important data points, to a diverse audience of parents, educators, and policymakers.

Role

Process

Discovery

Observations

📊

Some sample data points from the survey

Healthy eating and afterschool programs

• Parents that agree that afterschool programs should provide children healthy beverages, snacks, and/or meals
• 71%
• Parents whose child’s afterschool program offers beverages, snacks, and/or meals (possibly take out)
• 72%
• Parents satisfied with their afterschool program’s snacks and/or meals
• 76%
• Parents satisfied with the healthfulness of their afterschool program’s snacks and/or meals
• 74%
• More info: Healthy foods were described in the survey questionnaire as those that are minimally processed foods made with whole grains and heart-healthy fats or oils and without added sugar or trans fats; fruits and vegetables; and beverages made without added sugar.

Physical activity and afterschool programs

Data points:

• Parents that agree that afterschool programs should provide children opportunities to be physically active
• 80%
• Parents whose child’s afterschool program offers opportunities for physical activity (possibly take out)
• 80%
• Parents satisfied with the amount of physical activity offered in their child's afterschool program
• 79%
• Parents satisfied with the variety of physical activity offered in their child's afterschool program
• 79%
• More info: Examples of the variety of physical activities provided in the survey questionnaire were indoor, outdoor, games, and skill-building activities.

🖍️

We began our data sketching by transforming the spreadsheets into viable charts and maps. To keep our designs simple and intuitive to use, we sketched simple prototypes on paper. The constraints of the human hand help in avoiding getting too detailed, too soon (something the computer excels at). I then cleaned up the 'napkin sketches' with the wireframing tool Balsamiq, seen below. The style of this type of sketch keeps the focus on content and not on aesthetics, which we will attend to later.

Concepts → Blueprints

Concepts

Blueprints

Details of some of the supplemental data I designed

The first version of the dashboard and fact sheets

Reflection