The Future of Sports
Building a responsive home for bold predictions
“Bold” isn’t just telling you what the world of sports will look like in 2016. It’s telling you what they’ll look like in 2040.
With a hook like that, we happily took the bait when Tyson Law asked us to help with The Future of Sports. Fueled by “futurists”, the project is composed of research and interviews on topics such as stadium experiences, athletic training, advertising, and the growing popularity of e-sports.
The Future of Sports is an initiative between the media strategists at Attention Span and Delaware North, a leader in event, retail, and gaming experiences. Delaware North operates more than 60 major sports and entertaining venues (think: Wembley Stadium) and is owned by the Jacobs family, owners of the Boston Bruins. So, yeah, these people know a thing or two about the industry.
Though we strive to make sure each project we take on has its content in order from the start, rarely is that actually the case. Imagine our delight when we were presented this:
Our mission was to present this content in a palatable way on the Web. Why couldn’t we take the presentation verbatim to HTML & CSS? For starters, affordances you take for granted in print, such as a fixed paper and type size, don’t carry through to browsers. On the other hand, the Web has the potential for interactive behaviors that print doesn’t.
As opposed to tackling the content page-by-page, we decided to identify patterns and create a system. The best way to do that? Good ol’ fashioned scissors!
After finding like content types, we had the parameters for creating components that would ultimately comprise pages.
To make sure our content hierarchy was sound, we took to sketching some layouts, first for narrow screens and then for wide. Though seemingly unrefined, these sketches saved time by establishing our layout ideas without having to invest in a higher fidelity just yet.
The sketches allowed us to start working with layout in the browser at a very high level. Our low-fidelity prototypes generally consist of gray boxes and browser-default text. Working in code allows us to easily make choices about the layout across every potential screen width, something that’s challenging when working in static mediums.
Staring at gray boxes, while prudent to the design, isn’t extremely exciting by any means. We’ve made it our practice to supplement the layout and content conversation (the prototype) with style exploration (static compositions, ideation). We were able to leverage many stylistic cues from the printed book during the process.
Here’s a look at some collaging we did that made its way to the final product:
The idea behind this collaging approach, as opposed to traditional page comps, is that at this stage, we’re solely looking to establish a style direction. Full-page comps done in Photoshop often carry baggage: it’s difficult to only assess style when layout and content are inherently included. Thus, we focus these conversations with a prototype and an element collage.
Our goal was to maintain continuity with the book while using opportunities to highlight content with subtle changes would pay off on-screen.
We kept each section monochromatic as a method of organization and simplicity.
When everyone’s encouraged by the shape of the prototype and the style direction, we often marry the two with CSS in a high-fidelity prototype. This stage really brought life to The Future of Sports, since we were employing large typography and a vast color palette.
We also used this opportunity to add assets such as hero images, graphs, and illustrations.
This brilliant design system would mean very little without a competent backend system to power it. And as with all our sites, we made sure every section, page, and piece of content was easily editable by both the client and us at any time.
Using WordPress as a base, we built layers of custom fields, administration UI, and logic to not only enable efficient management of the site, but also the ability to create entirely new sections and substantial rearrangements.
Every small block of content, or component, in the site comes with its own interface in the administration UI to help ensure consistency.
Pages are built by adding components, filling in their structured content fields, and determining which of these components will be “featured” (as opposed to collapsing behind accordions or being pushed below the fold). Components automatically choose their optimal visual incarnation depending on the size of the device the viewer is using.
In order to accommodate social media campaign drives, we created a solution in which every component can be reached at its own URL, while also linking to the main page in which it normally lives. No duplication of content, just smart coding. There is also a blog, whose posts are automatically and dynamically cross-referenced from the appropriate section of the site.
The kickoff of futureof.org manifested itself in a press conference at TD Garden (Boston, MA).