Summary
NFL Films is the production arm of the National Football League
I was design lead on a project to create a portfolio site for their production work and technical facilities.
Discovery
I generally start projects like this by creating a scrapbook where I can squirrel away useful and interesting things I find in my research.
I have a few key techniques I use to help discovery:
• Lateral research - Who are the key competitors? What other sites might we look at to help inform the designs?
• Stakeholder interviews - Get to know my stakeholders and understand what they want from the new product.
• Social chatter - In the sport world, Reddit in particular can be a rich source of insights. But I check out all of the main channels to see what people are saying about the product or service.
• Mainstream media - General and industry-specific news channels, Wikipedia, anywhere I can find an industry view.
I’ll collect up what I find as quotes, links, screengrabs and whatever else it takes to capture and organise what I find.
I learned that NFL Films has a signature production style, based on balletic slow motion and dramatic use of orchestral music.
This gave a strong visual direction to the design.
In terms of content, the key elements we needed to showcase were:
• Technical production facilities and crew
• Creative services: script, music, editing, filming, direction and production
• Licensing of NFL content for dramas and other use outside of sports round-up shows
• Applications for job vacancies s and the NFL FIlms internship programme
“The greatest in-house P.R. machine in pro sports history: NFL Films - an outfit that could make even a tedious stalemate seem as momentous as the battle for the Alamo”
Ideation
Early in discovery, I noticed a parallel with some instructional mini-sites I’d worked on for an e-commerce client. In both cases, the narrative and the design were co-dependent.
Often a project like this boils down to creating a set of mid-journey signpost and end-journey content page templates which can be assembled to create the required outcomes. But we couldn’t do that.
The stories needed to be the core of the user experience and evolve in tandem with the visual design.
I began by experimenting with wireframes of copy and image lockups.
I wanted to create a set of components which would meet that need to evolve the copy and imagery in tandem with the user flows and UI designs.
Design
Working with the client and a UI designer, we began to scamp pages to create the key journeys.
Wireframe
UI Development
Final design
Our stakeholders were multi-award winning video producers.
They were used to writing scripts and telling stories visually, but that’s very different from creating web content.
So we needed to help them bring their narrative skills to a new medium, and coach them through the process of creating copy, assets for us to design with (without busting the budget!)
Delivery
I used a ‘three amigos’ working style with UI and UX working directly with front-end developers to evolve our animation library and content layouts.
That helped also with applying designs to the form elements such as licensing applications, which use a third-party plugin with limited styling options.
There aren’t designs for those forms - they were developed straight into the front-end code with the UI designer directing the develeper to create the visual styles and animations
Early wireframe with work-in-progress copy
Final design with updated copy and layout
Case study video
I made this for an internal Deltatre meeting. It gives a bit more detail about how I went about scoping the product and outlines the ‘three amigos’ style of working that I implemented to keep our designers and coders working together.
It also gives a bit of background on how I used comparisons with existing websites to help the client understand their content needs and to inspire and articulate their design ideas.