As The Awl neared its fifth birthday, I worked with its editors to refresh its website, which had never seen a full-scale redesign. Built before the ubiquity of mobile devices, its layout was still focused on the desktop reading experience and had only a rudimentary style specific to the original iPhone.
“Nic helped us become more us, which is the best task someone can come in from outside and perform.”
Choire Sicha, co-founder of The Awl, in an interview with Politico.
The challenge: Change without changing (too) much
When I started working with Alex and Choire, they made it clear they did not just want a pretty version of The Awl. In our initial conversations, we discussed what could stay or go, and what made the site valuable.
Some key factors in the existing site were the “slugs” or witty lines they topped their stories with, the headlines that draw readers in, and the reading experience itself. Most everything else was on the table, from the logo to the colors, but we didn’t want a jarring experience for long-time users.
Solving for vibrancy and character on the home page
The previous visual style of The Awl could maybe be best described as harsh and basic. It led with splashes of neon green, a large logo and the traditional reverse chronology of blogs with a side rail of posts and miscellany. It was very much a product of its time.
We simplified greatly by keeping the fun parts that worked, namely that garish green, but eliminating the side rail of content that could be distracting on the home page. Instead, we went big on the top of the home page, pulling out relevant stories and playing them as largely as possible.
Our goal was to keep the launch simple and build over time, so we started with an initial layout of four stories that could work responsively as the viewport changed: one large banner and three smaller stories, one of which displayed as a key quote or insight in the piece.
Pretty but not precious
For articles, we focused on improving readability and providing a more helpful experience for advertising. Much like on the home page, the sidebar of what we delightfully called “chum” went away to keep the distractions limited to useful advertising. For long-form storytelling, we were even more dramatic, eliminating the rail entirely and incorporating the advertising in the flow of the story.
Some of those early experiments with layout and typography started as the standalone long-form feature "It's Adventure Time," a feature about the hit animated television show. The larger type, generous space and quote styles are meant to showcase an improved reading experience without seeming too precious.
A portion of the feature "It's Adventure Time," which displayed some early thinking behind the type treatments that would be used for longform work on The Awl.
Color and logos
In addition to creating the responsive website, I worked on improving and documenting their visual style, finding the best use for their electric green accent color, updating logos and reconsidering all of the type.
It ultimately was a set of relatively simple changes—moving the logo in some spots, giving space for their literary work—but it paid off in a much better experience for users.
As a coda, The Awl eventually moved to Medium for a spell, but returned to my design before ultimately shutting down in 2018.