One Week Season

“We got what we actually wanted, not what we thought we wanted”

— Jordan Tohline (#JMToWin), One Week Season

☝️ That may be the best compliment I’ve ever gotten at the end of a project. One Week Season exemplifies the best of what a focused process can achieve in a short amount of time. In eight weeks, I worked with the founders to develop a visual brand and interactive experience. We did this by talking through the problems and goals of the project early on. We defined the project’s scope and our strategy so we could get from vague ideas to something far and above the competition.

Three Stages to Launch

After the initial discovery stage, we divided up the schedule into 3 distinct stages: 1. The user experience, 2. The visual brand, 3. The website, designed. Focusing on the user experience first allowed me to really understand the kind of brand they wanted to build.  It also kept us focused on that core functionality early on.

Stage 1: The User Experience

I'm a believer in the Pareto Principle (80/20 Rule) As that applies to design, 80% is following best practices and 20% is innovation and delight. For an editorially-driven site such as One Week Season, there are established ways for readers to consume and navigate through content. Make the type big and legible for longform copy. Make buttons and fields clear and engaging. That sort of thing. At the same time there were a few things that did not have well-suited existing design patterns.

Navigation challenge: Each game has an extensive writeup accompanying it. Many readers want specific matchups. Others may want to read all of them in order. Whichever reading style is preferred, way-finding and  navigation are important. To solve for how to keep the navigation surfaced to allow readers to quickly navigate on mobile, I devised this solution:

Matchups on mobile's home
Matchups in article view

A telling example is with the weekly matchup schedule.

With at-a-glance score and game info, the matchup list needed to be at the forefront of every page. That meant making it prominent on the homepage and on every article page — the two most likely entry points for users.

Easy enough on the desktop homepage. For mobile we did not want to bury it in a hamburger menu. Making the matchup schedule the hero felt like the best course of action. Most sites in this realm push one story ahead of the rest. That kind of editorial discovery makes sense on a lot of sites but doesn't line up with users interested in specific games.

Current matchup at the top adjusts to content below. Complete matchup list can also be viewed in hamburger menu (not shown)

Stage Two: The Visual Brand

I approached the visual brand with the knowledge I'd gained through the user experience process. Invaluable. Through our many conversations, I felt as though I had a good idea as to what the brand wasn't. So before looking at what the brand COULD be, I wanted to get on the same page with what the brand wasn't. Behold, the uninspiration moodboard:

Uninspiration: Left to right from top: Too brutalist, Too intricate,
Arbitrary design distractions, Too flashy/brassy, Too busy,
Too hard to read, Too boutique-y/bespoke, Too casino-y

Pure Sport: The best of mainstream but still to safe and expected. The writing has personality and so should the brand.

Science: Focus on the math angle (which is a big one). Still, this direction lacks a human touch which is at the core of the brand.

Scorecard: Both stakeholders felt this direction had the most heart and spoke to the content more than anything else.

After selecting the desired visual inspiration, the next step was to develop the actual visual brand. This meant exploring various wordmarks and typographic systems. I'll spare you the majority of logo sketches and type explorations.

We landed in a great place with the logo. We embraced the fact that readers will likely refer to the brand as "One Week" and made those two words the star. And is there a more direct visual metaphor for fandom than a pennant? Designed in Illustrator and traced with a pen for that nice rough-hewn look.

This is some text inside of a div block.
This is some text inside of a div block.

Early on, photography was deemed too cumbersome and difficult to scale for each of the articles. Typography would have to be more prominent and eye-catching. Along with Three expressive weights of Knockout plus the very legible slab, Caecilia (Kindle's default), was just the right combination.

Stage 3: The Website, Designed

The final part of this project was to apply the visual branding from stage two to the wireframes from stage one. During the brand exploration, we'd applied styling to the homepage wireframes. The brand had been tested and wasn't being forced into a framework it'd never been matched with (common pitfall with many site builds). Now it was a matter of  building out the full visual system across all of the pages.

There are two very important goals in this final design stage. The first is, of course, to create the best expression of the brand in the experience that's been mapped out. The second goal should be to create something that is ready to be built. Defining styles and using them as a part of a larger system is crucial.