Gene Lu

Objective
Design a template for the home and article page to be used on a set of Penton's magazine properties. Ads required: leaderboard (728x90), big boombox (336x280), and small box (180x150). Also, an initial skin needed to be created (in this case, Motion System Design Magazine) in order to demonstrate the look and feel of a design on top of the suggested template structure. 

Design Process
"Animating our interest in bringing together design and management is dissatisfaction with the way that design, as a noun, seems to overshadow design as a verb in the popular press, as well as in the practice of modern management. This results in an emphasis on design as a completed and whole thing, instead of design as a becoming and unfolding process." - excerpt from an essay by Richard J. Boland Jr. / Fred Collopy / Kalle Lyytinen / Youngjin Yoo

Prior to starting the project, I laid out a plan of attack on creating a template that would be both versatile and usable for Penton's C-level properties. The plan was as follows: 1) Study site traffic among 20 of Penton's most popular sites 2) Create wireframes for both the home and article page 3) Once wireframes have been approved, create a moodboard for the design of MSD 4) Implement design on top of wireframes. The timeline was about 3.5 weeks.

Site Traffic Patterns
This portion of the design process was something that I've always been interested in. With all of Penton's sites running off of Omniture, I was able to make and test hypothesis' (along with the ones that I've read about) and quickly prove/disprove them with the help of Omniture's heat maps and extensive reporting at my.omniture.com. To quickly summarize my research results for home pages, there were three patterns that stood out:

1. Visitors tend to use the main navigation and search button most often when the variety in content is sparse. Sites like FireChief.com and Trailer-Bodybuilder.com displayed the latest news with a leadin text for the latest three stories. While this provided content clarity to visitors, it prevented a variety of content.

FireChief.com with Heat Map

Trailer-bodybuilder.com Heat Map

2. Visitors love link lists. Sites that offered one leadin story accompanied by a link list (usually "Most Popular Articles" or "Most Recent") tend to do very well based on the heat maps. This is because the leadin story provides a visual starting point and is followed by a list of article titles, which offer an assortment of information allowing visitors to quickly scan through in search of an interesting story. You'll notice that for Broadcast Engineering's site, the left column is very 'warm' in clicks from top to bottom. As for the Promo site, a majority of the 15 most clicked links reside in the link list below the leadin story.

Broadcast Engineering Heat Map

Promo Heat Map

3. Link link link link ... View All. One of the top clicked links on the home pages was the "View More Articles" link, especially when preceded by a link list. After offering a preview as to what a portion of a site is about, why not end it with an option to view more of that content? High-traffic sites like Supermarketnews.com and WardsAuto.com demonstrate such patterns.

SN's View More scores #1

Ward's View More link scores #3

There were some other patterns that I noticed, but will not mention them for brevity's sake.

Summarizing Research Findings into Wireframes
With all the important points noted from the research process, I created the following sketches. These roughs quickly went through some minor changes and provided the team with an efficient way of moving things around prior to opening up Photoshop.

Wireframe Sketch of the Home page

Wireframe Sketch of the Article Page

Note: Don't be 100% locked into what you first started out with when creating your roughs. After putting things down on paper, your original ideas may not seem as good as they were initially perceived. I originally visualized a home page with a main leadin story and two substories beneath it accompanied by a link list to the right of the main leadin, but realized that the latest news section took up way too much real estate (especially above the fold). This gobbled up potential exposure to other site content like blogs / podcasts / etc.

To remedy this issue, I decided to go with a display format like that of SupermarketNews.com because according to the stats from the past year, the format has consistently attracted cilcks. After finalizing on this, all the other sections and ads fell into place and I was finally off to the design.

Designing for Motion System Design - the Moodboard
It was really helpful to have a stack of magazines (especially Wired) available for this project. I went through each issue in search of what would motivate the design. After coming across certain elements, I would grab the scissors / cut the image out / and slap it onto the moodboard. This part of the design process allowed me to sort out my visual ideas for the site along with creating a unique color palette. And so, a few hours later...

Moodboarding for Ideas and Inspiration

And the Final Results!
After all the research / wireframing / and moodboarding, I created the following mockups for Motion System Design. In the home page mockup, you'll notice that I've incorporated what I've learned during the research process and allowed link lists to flow from top to bottom under each of the leadins on the lefthand side. Also, I added a high contrast orange button to the "View All" articles and "Search" button so that visitors can easily scan the page without too much visual interference. The site was designed on a 950px wide / 11px gutter / 49px division grid to make it easier for producers to create the template CSS-wise.

Motion System Design - Home Page

Motion System Design - Article Page

Anyways, I'm looking forward to seeing how these sites perform with this template. Look out for future updates on this continuing project. :)