INFORMATION DESIGN, UI/UX DESIGN, STORYTELLING
Framed within the National Hockey League's website, this website is designed as a part of a theoretical series of articles that explains the nuances of each hockey position to interested individuals. This specific article breaks down the roles, equipment, statistics, and rewards associated with goaltending in particular. Click here to scroll through the website.
TOOLS
Framer
Figma
Photoshop
Illustrator
After Effects
COURSE
Information Design
CLIENT
UW Design
DURATION
Eight Weeks, Solo
Prompt
Design an infographic narrative that examines a well-known public award or prize program.
Ideation
I love hockey and am fascinated by goaltending. "The NHL Intro to Hockey" allowed me to explore the visual language of sports and hone my ability to structure complex information into an easily accessible storyline.
Directing a narrative
As it would turn out, explaining a whole sport to someone who knows nothing about it is uniquely difficult.
The solution I found to this problem was to create levels of knowledge for hockey newbies, starting at the most basic—"On the Ice"—and working up to really specific advanced statistics.
On the Ice
If you didn't know anything about hockey, you would first need to know what to look for when you're watching a game. Though this website focused on the role of the goaltender, readers needed to be situated on the rink and know what to look for before learning the details of their job.
In The Goal
Where does the goaltender play? In the goal of course! However, so readers had necessary context for future information, like the goalie's gear, it was really important for me to educate them on what the specific areas of the goal were. Here, demonstrating to readers how the goaltender shifting in the net worked to cover specific areas and left others deepened readers' knowledge of how hockey strategy works as well.
Gear
Goaltenders are notable on the ice because they are dressed SO differently. By shifting the focus of this section to different areas of a goalie's getup, I was able to relay more in-depth information about why they are dressed the way they are, rather than just naming the gear.
SV%
To understand the intricacies of how goalies are analyzed, you really only need to know one thing: the save percentage. Though these equations aren't deeply difficult to understand, breaking down how they are calculated was useful for helping readers understand that "small" differences in between SV% were not small at all, and that slight percentage changes matter in the sport.
A fun mention for the site, but especially this section: any large textured type you see is from stamps that I personally made! I felt like they emulated the grit of the ice, and they really shine here.
Goalies
Once readers had knowledge about where goaltenders played, what gear they wore, and how they were evaluated, I concluded my article by walking them through who, evaluated by those metrics, was considered the best and worst in the league.
Early in the project, I had made a very large chart detailing the specific stats of each goaltender—at the end, I built it out in Framer so that any reader could play with it. (It's a great learning tool, but it was mostly because I loved playing with it!)
Takeaways
Learning how to break down such a complex topic (that most of my class was incredibly unfamiliar with) was such a rewarding and unique process! Many thanks to my professor, Karen Cheng, for all of her guidance, and my classmates for sending me every good hockey infographic that's ever been made as inspiration. I'm so proud of this project and so excited to share it!
