The Aspen Institute’s Healthy Sport Index

The Challenge

Our task: Use a pioneering research dataset to construct an interactive tool that helps parents and teens make informed decisions about sports. How safe are high school sports? What are the psychosocial effects of each sport? How much exercise do athletes get, and how does it compare to other sports?

My Roles

Approach

A sitemap for the Aspen web tool

Information Architecture

Because the research had already been conducted (for sports and for end users such as parents), our team was able to hit the ground running, synthesize the research, and start building the IA. After a few rounds of revisions, we hammered out what content types, components, and pages should exist, and how they should hierarchically be arranged.

Quick sketches

Sketching

Next, we started sketching out (quick and ugly) ideas for what the user interface should look like.

An idea to use a spider graph

We explored spider graphs and all manner of data visualization, but eventually decided on bar charts, since they were the easiest to understand, especially at a glance.

Early sketches of bar graphs
Wireframes for the Aspen web tool

While wireframing, we made sure to design for large and small screens at the same time, a practice I've labeled, "mobile-synchronous."

Component Design

Bar charts for each tile component made it easy to understand where each sport falls in physical activity, safety, and psychosocial health. Plus, it allowed us to build a comparison tool for up to three sports.

Tiles that show different sports
Sliders and a weighted average - quick prototype

To add an extra level of customization, we designed a way for users to change the rankings based on a weigthed average of factors. I built a JavaScript slider prototype (again, quick and ugly) that showed the inner workings of the weigthed average.

The finished sliders

The fully-branded sliders help users prioritize aspects of a sport and view a customized, re-ranked list.

The new site

Launch

We launched the web tool and saw traffic from all 50 states, plus many countries, and it garnered media attention as well. View the finished site.

More Projects

Post-it notes used during the creation of a user journey

Long & Foster

Taking apart a massive real estate site, redesigning it, and putting it back together. Read about the Long & Foster redesign.

CableWrangler.io

When you have 100+ cables and dongles, you build a small React app to organize them. I made a JSON inventory dataset to power it; now I can find that HDMI to USB-C breakout box I was looking for. Visit the site.