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.
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 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.
Taking apart a massive real estate site, redesigning it, and putting it back together. Read about the Long & Foster redesign.
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.