Process

(This redesign will be launched in the summer of 2010.)

I created StevePre.com to honor running icon Steve Prefontaine. The cult hero held the American record for every track race over a mile when he died in a car accident at the age of 24 in 1975.

In 1997, as a high school cross country runner, I was fascinated with Prefontaine. So, when my dial-up internet provider offered its users free web space, I used it to create a dedication site to Prefontaine. I was armed with little: Microsoft Paint, Word and no experience in web design.

Within a few months, however, the message board had hundreds of posts. By 2001, The Eugene Register-Guard had featured the site on the front page of its sports section and Runner’s World had named StevePre.com “Best of the Web.”

In 2008, now a trained graphic designer, I decided to return to the community that had encouraged my early work. First, I wrote and designed StevePre: The Unfinished Story of Running Icon Steve Prefontaine. A month after its release, it was in Amazon.com’s Top 100 biographies and Barnes & Noble ordered copies.

In the fall of 2009, I began redesigning StevePre.com away from its Microsoft Paint graphics. I invited Art Director’s Club Young Gun Peter Kaplan and Otis web design professor Roman Jaster to critique my work and guide me along my self-directed project.

Goal-Setting

In a lecture at IxDA Interaction 09, Luke Wroblewski described a redesign of Yahoo! as centered around a single idea: “a dashboard for the web.” It’s brevity could be easily communicated across many designers and developers.

Luke’s lecture influenced me to set clear goals for the redesign of StevePre.com, which gave me a checklist for my work. Furthermore, sharing them through a collaborative website helped Roman and Peter provide a better critique.

User-Based Scenarios

Who uses StevePre.com? What are their common tasks at the site?

While working at Cooper, a San Francisco firm that specializes in usability for interactive products, I learned methodologies to design thoughtful user experiences. Inspired by their process, I structured my redesign around user scenarios.

I created personas to represent the majority of vistors, listed their common tasks, brainstormed designs to help them easily accomplish those tasks and then translated those ideas into scenarios.

Compositional Sketching

Compositional and formal qualities are essential to controlling hierarchy and garnering visual interest, so I converted the lines and boxes of the scenario sketches into compositional sketches.

Furthermore, guided by advice given by Jason Santa Maria at an SVA lecture in 2009, I didn’t want pages to be generic content dumps with a header and body copy, but rather formally-specific to the content. To give the site an overall point of view, I came up with a list of traits to describe the visual story told at StevePre.com: legendary, inspiring, powerful and tenacious.

Color and Type Palettes

From the compositional sketches, I started loose, digital iterations of the pages within each scenario. This was good because staying loose helped me a wide range of visually appealing pages. But, working quickly and loose I created colors spread across a large range of hue, value and tone; and type styles of all sorts.

To solve this problem, I created type and color palettes. Controlling fonts from Typekit along with a color palette and an added grid based on an appropriate column width for body copy, gave type and color styles specific, consistent meaning across the site.