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?
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.
Next, we started sketching out (quick and ugly) ideas for what the user interface should look like.
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.
While wireframing, we made sure to design for large and small screens at the same time, a practice I've labeled, "mobile-synchronous."
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.
The fully-branded sliders help users prioritize aspects of a sport and view a customized, re-ranked list.
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.