Helping parents and teens evaluate sports for their children

My Roles

Lead UX Designer, and Developer Manager

Collaboration

Worked closely with Senior Developer, Senior Visual Designer, Accounts, and Client. Managed Developer, keeping to schedule and working within requirements

How do people know which sports may be most beneficial for their teenagers to play? And how might they customize rankings based on what is important to them or their family members?

When my team started this project for The Aspen Institute, we had expert research from academics, delivered from a previous phase, which considered the three key benefits of safety, exercise, and psychosocial factors for each sport.

We explored this ranking system as a weighted average, so that users could adjust which factors are most important to them. I made a quick JavaScript prototype to share with our developers and the rest of our team.

Interactive: Dial in the desired emphasis for each factor

50
50
50
Scoring
9.33

( S1 * 50 )

+

( S2 * 50 )

+

( S3 * 50 )

50

+

50

+

50

An adaptation of the code prototype I created to illustrate our slider idea, where “s” is the raw base score for each sport, multiplied by the desired weight. The "scoring" output is used for each sport to determine its rank compared to others. (Assumes realistic Cross Country base scores of 18, 9, and 1 for each respective aspect; scale of 1-20 for prototyping purposes)
The weighted average formula of each base score times each weight, divided by all weights added together
The weighted average formula, where “s” is base score and “w” is weight

Rankings of all sports change as the user adjusts weights to show what is most important to them. If the user adjusts "Psychosocial" to be high importance, a sport such as Cross Country will rank lower compared to other sports, as its base score is relatively low for psychosocial benefits.

Scoring follows the weighted average formula of scores multiplied by weights, divided by total weight.

Before we decided on weighted averages, however, we also explored spider/radar graphs, bar charts, among others.

Radar/spider graph ideation, showing roughly where Swimming would fall vs Cross Country. Better psychosocially, and safer, but not as much exercise for athletes.
Radar/spider graph ideation
Stacked bar chart ideation, showing rough stats on Swimming vs Cross Country. Better psychosocially, and safer, but not as much exercise for athletes.
Stacked bar graph ideation

But, for various reasons, such as ease of use and accessibility, we decided to go with the sliders for the main listing.

We also needed to translate each sport’s data from raw tabular data to cleaned-up, brand-fitting comparisons that would help parents make decisions. Our visual designer cerated a brand and made the data much more compelling and easier to compare.

Toward that end, we also provided users with a way to compare a few sports head to head, using modified ranking bar charts for each sport tile.

User has selected to compare a few sports: ranking bar charts showing realistic scores for Cross Country (which ranked first of all boys sports), Basketball (ranking 6th), and Football (ranking 10th out of 10
Comparison tiles
shows example of rather ugly original tabular data on one side, and on the other, our cleaned-up, attractive version of the data, which is much more readable.
Cleaned-up data that is much more user-friendly and attractive.

Additional Aspects of the Project

  • Information architecture

  • Wireframing

  • Component design

  • Brand exploration

  • Creation of repeatable Photoshop actions

  • Development

Results

Many news outlets and publications wrote about our project, among them: Time Magazine, USA Today, and Forbes.

We received visitors from all over the USA, and even international users, and they seemed to respond positively to the ranking system and the clearly presented information. Visit the Healthy Sport Index >

More Work

REAL ESTATE

Increasing Conversions by 100% via Highly Usable Interfaces

Designing a modern web experience for buyers, sellers, agents, community members, and, of course, for the business.

THINK TANK

Leveraging User Research to Help Clients Make Decisions

We employed tree testing to provide evidence of the most effective new I.A. for a client's site.

HEALTHCARE

Creating a better ZIP code search for patients

When patients search for a doctor, using their ZIP code, is a centerpoint based on a bounding box really the best approach?