The Bruins are a professional hockey team that plays in Boston. My responsibilities with the club included things like building an experience for renewing season ticket holders and designing images for game day on social media.

In pro sports, social media accounts are critical channels of communication between a team and its fanbase. In the case of the Bruins, many younger fans see a Twitter feed as their primary connection to the team and prefer to follow live game action as a series of tweets rather than turn on a TV.

Challenge -

Develop a way for anyone to create branded imagery that will accompany live, in-game updates posted online.

Process -

"Not every media person who posts on Bruins' social accounts is going to have access to Photoshop. The images need to be generated in a way that is universally accessible."

"I'll need to create layouts that can accommodate all the data related to line-ups, goal scoring, and certain career milestones in professional hockey."

"HTML Canvas can render an image directly in the browser. Exporting the image as .png or .gif so it can be easily shared online should be easy with the Canvas API."

Conclusion -

"I can use HTML user inputs and dropdowns to capture all the data I need to draw the image via Canvas. The image can be re-rendered whenever the user adds new or updated values through the ui."

Bruins Score!

It's a for number with : remaining in the period. The score is now:
Boston -

Download this image >>