Time.com's Redesign: A Q&A

Time.com's Redesign: A Q&A

TIME.com recently launched a new home page design. Soon after it went live, I got in touch with the site's design director Sean Villafranca and Shivani York, their director of product development. Sean and Shivani are both former colleagues who spent several years working together at nytimes.com. In this Q&A, they take us through some of the significant changes made to the TIME.com site and explain the process they went through.


Paul Schrynemakers: First off, redesign or refresh?
Sean Villafranca: I'd say for the homepage: a definite redesign.
Shivani York: For the article pages, it was more of a functionality refresh.
PS: OK, why a redesign?
SV: Something we really wanted to do was to make our homepage more flexible. The old version of the homepage made it very hard to move content around on the page--things were always put in their designated areas, based on the type of content. We had features in a "news box" that cycled through five stories, an area where headlines from blogs were kept, and an area for Latest Headlines. What we realized was that since users don't necessarily browse based on content type, so rather than grouping things by content, our "Must-Reads" area display stories by subject matter.
SY: Since much of traffic comes in through the side doors, with the article pages, our goals were to make our content more engaging by providing contextual elements and links throughout and around the articles, and giving people more to do with the story, like adding to their Google page, or sharing with their friends on facebook. 

Above the fold views of the Time.com site before (top) and after the redesign (bottom).TimeCom-before.jpg

TimeCom-after.jpg


 
PS: Give us some of the highlights of the significant changes made to the site.
SV: The most visible change is that TIME.com looks and feels more like TIME magazine. When we joined the TIME.com, one of our biggest goals was to align the site more with the brand of TIME. In 2007, the magazine went through a major redesign, which was quite excellent. It was a no-brainer to use that as a starting point for the website's redesign. Plus, one of the greatest assets a site can have is brand-awareness. TIME has that in spades, so we tried to take full advantage of that.

We also are using Arial Black on the site for lead headlines on the homepage and headers throughout the site. Again, this was to echo the feel of the Franklin Gothic font that we use in the magazine. (I originally wanted use sIFR technology to render Franklin Gothic, but we had technical issues that prevented us from being able to do that.)

Another significant change is that we now have a multimedia player on the homepage, which we didn't have on the previous site design.  
SY: With the addition of Craig Duff (our Multimedia Director), we are quickly ramping up our video efforts and are now creating more video content than we used to before. We also offer podcasts and photo essays, another first for the homepage.

Other less noticed changes are the addition of "Add Time News" on the home page (a concept we are planning to add throughout the site), making our pages more portable, improved navigation throughout the site and a less cluttered, more streamlined newsletter signup page.
SV: On our article page redesign, we tried to create an improved reading experience by having more white space to the left and right of the page. And because many of our readers come to TIME.com content through our article pages, we also designed the top of the page to better highlight what section a user is in, as well as the other parts of the section that the reader can dive deeper into. Also, at the bottom of the page, designer Fielding Cage came up with an innovative idea of "Connect to this Story." It's an area where you can share the article through such avenues as Digg and Yahoo Buzz!, and also find related stories, as well as "people who read this also read"--really smart and useful ways to surface more TIME.com content to the reader and increase engagement.

PS: "Add Time News"--what is that? Please explain what it does that makes your pages more portable.
SY: Add Time News allows readers to add that section as a widget to their Google, Yahoo, Netvibes or AOL pages or take the RSS feed with them to the portal of their choice. With more and more readers consuming news off-site, we wanted to provide easy ways to take TIME.com content to their own homepage or personal pages.

PS: Tell us about the process you went through. What was it like? Where did you start? What were some of the goals?
SV: The process was insanely fast. Both of us joined the team around April and May of 2008 and were immediately tasked with the redesign. We collaboratively went through a process of sketching out ideas. Because of time constraints, we had to work in hybrid mode of product development, Information Architecture and design all at the same time.
SY: From the product development end, one of our goals with the site redesign was to surface more interesting content to the user and group it together in logical ways.  (e.g. Must Reads, Connect to this Story, Related content).  At the same time, we wanted to showcase the depth of TIME content and make everything more contextual and interesting to the user. Last major goal of the site was of flexibility.  Keeping these goals in mind, we started with the designs and requirements gathering. 
SV: One of the primary things I wanted the site to do was to adhere to a grid structure. By doing this, we'd be able to have more flexibility with the site that it previously did not have. It also provides us with a solid foundation to design upon. So, we did very rough sketches of various grid structures, 14-column, 12-column, etc. Ultimately, we chose a 9-column grid. For the most part, on the homepage, it would seem that we use a 3-column structure, but under the hood, it's a 9 column one. We've set ourselves up for future projects that would perhaps call for sectioning things out more than the three columns.

Grid structures for the home and article templates.
TimeCom-Home-Article-grid.jpg


 
Once we worked out the grid structure, we started to block areas out--lede stories, other articles, blog posts, latest headlines, polls, etc. It's sort of like a puzzle where the way you place one thing totally affects the other parts, as a whole. We tried to create a sense of scale and help guide the reader's eye to the places we wanted them to look. All the while, there was also the underlying challenge of tying the site more closely to the rich brand of the magazine.
SY: After going through about four or five rounds of designs--within the span of a month(!)--we went through a few rounds of user testing to get a feel for how users responded to the ideas we put forth. Having the user feedback, we tweaked and changed some of the areas.  One of the interesting findings of the testing was that our global navigation at the top and next to the Section name was successful and visible.  We still had some work to do in terms of pulling it altogether.  So, we brought our data librarian, Bonnie Kroll on board to see how users were searching and finding content across our site and also other news media sites.  The navigation went through a quick IA phase and we reconfigured names of some sections and where their hierarchy.  This, in itself, was a huge undertaking and we'll continue to the navigation structure beyond the redesign. One thing that should be noted that we really kept things lean and agile for this redesign, which allowed us to move very quickly--Design, Product Development, Editorial and Business Development--was extremely small. This afforded for decisions to be made much quicker than the usual corporate politics that many redesigns are faced with.

PS: I think the readers could use a tour of the new home page. Give us a breakdown of the elements. Start from the top.

TimeCom-Redesign-breakdown.jpg


 
SV: At the top of the page, we have the global navigation for the site [1]. Also, you'll notice that there are no drop-downs. This was a conscious decision to let the users dive deeper into the site by simply clicking on a section.

Below the nav is the "skybox" area [2], which was designed to promote random, yet interesting content on TIME.com. The skybox was actually inspired by the TIME magazine covers, where content is touted. The skybox is a big part of why, when users come to the new TIME.com, they immediately feel a connection to the magazine. This was both intentional and serendipitous from a design perspective.

Next, we have the TIME logo front and center, with a subscription tout to the left and on the right, opportunities for users to subscribe to newsletters, podcasts and RSS feeds [3]. Moving the logo front and center, again, was a visual cue that further strengthened the connection to the magazine. At the top of the right column, we have "Latest Headlines," [4] which is an aggregation of latest news from TIME, along with CNN and the Associated Press.

The center well [5] has our lede story with a large photo, along with related links and two more headlines. This area highlights the most pressing news of the day and is updated often.

To the left, we have our search box, where you can search the site or our archive of TIME magazine covers. Below that, we have what we call our "Must-Reads." [6] In this area, we have lots of flexibility to tout stories that we previously weren't able to do, from a wide range of areas -- from political commentary to national affairs to television.

Under "Must-Reads," is a tout for our blog "The Page." [7] This area can be used to highlight other things such as photo slideshows. We also have the flexibility to get rid of that box and extend the "Must-Reads" area so that it has six touts, instead of four.

Moving down the page, we have our "News in Brief" module [8], which was designed to be an area where a reader can get quick hits of information, such as Quotes of the Day, Q&A, Top 10, etc. This was created as an extension of the magazine's "Briefing" section, updated multiple times during the day.

To the right of "News in Brief," we have the TIME.com daily poll, which takes a quick pulse of our readers' opinions of a given topic [9]

Moving down, starting to the left, we have the Multimedia module [10]. It's the first time on our homepage that we've had a place where readers can view video, listen to podcasts or get linked to our wonderful photo essays.

To the right of the Multimedia, we have links to more articles, as well as the obligatory Most Popular module.

Below the links to more articles, we have a module that's designed to tout a variety of things, but in a more visual way, with a large image [11]. This could tout anything from photo essays to "Cartoons of the Week" to "10 Questions".

Next to that module, we have a magazine covers area, where we tout the current issue, along with its table of contents; and then we have "The Covers Archive" area, where a series of covers based on a particular theme is shown [12]. Each time a user refreshes, they'll get a different random series. And at the bottom of this module, we encourage readers to search our deep Covers Archive.

Finally, at the bottom, we have the "More Inside Time.com" [13] area, where readers can get a quick scan of the top three stories from each section of our site. We've greatly condensed this from our previous site's design and made it more streamlined.

Another thing that should be noted is that we repeated the global navigation [14] at the bottom, to give users but yet another way to dive deeper into the site -- even when they're at the bottom of the page.

PS: OK, something I need to know: the 728x90 wide banner ad is usually a mainstay at the top of most homepages. Not here. Why? How?
SV: Funny you should ask that. Surprisingly, the 728 pixel leaderboard ad was never a requirement for the homepage, but there are other more interesting ad positions on top of page. During the process of the redesign, we were tasked with coming up with innovative advertising opportunities. Well, at the very top, in the skyboxes, the fourth tout can actually be swapped out for a 215 x 76 pixel ad position. We've actually sold an innovative ad spot to Rolex that only is served to Time.com homepage readers in Europe. The ad goes over the entire skybox area for about 5 seconds, and then collapses to the right and what's left is the 215 x 76 in that fourth tout spot.  

PS: What were some of the more global strategic goals?
SV: Our most important goal at TIME.com is to be a destination where readers come to as a source of trusted news, throughout the day. We are trying to debunk the misconception that TIME.com is simply a supplement to the weekly issue of the magazine (as other print magazines choose to do). We are constantly creating new and engaging content on a daily basis. Therefore, with this redesign were really tasked with the idea of creating more of a 24/7 news site than simply recreating the magazine on the web.

With that was the challenge of trying to devise methods to bubble up more content above the "fold" in an engaging way. And again, the challenge of aligning the site's design better with the magazine was ever present.

PS: Like they say, "A web site's design is never finished." What are some of the next steps?
SV: Well, we launched the redesign with the homepage and the article pages. So naturally, we need to bring the other sections of the site up to speed with the redesign. Also, as we let our users get accustomed to the redesigned homepage, we will take a look at which parts are working well, and which aren't performing up to our expectations and how we can improve, and make iterative improvements. 

PS: Tell us what you've learned or observed since the launch. And, how are you tracking against the your goals?
SY: One of the goals of the redesign has been to surface more of our content in interesting, contextual ways so the readers can decide what they find appealing. In the last 3 weeks since the launch, we are finding that readers are finding and clicking on a lot more of the content as they are reading.  We launched a "Daily Briefing" feature on our home page and that is also garnering a lot of interest. Overall, we are noticing our navigational elements being clicked on more frequently than before the redesign, so users are taking the steps to find and discover more content.  Our site page views and unique were at an all time high for September, which in itself is great news and shows that we are taking steps in the right direction.
 
PS: Loyal visitors can get pretty vocal when they get a redesign. What kind of user feedback have you received? And, how do you plan to use this information?
SY: Yes, we have gotten a lot of feedback on the redesign and most of it has been a positive reaction to now being able to discover a particular story or feature on our home page or articles, with the new look and feel. We've taken steps to ensure that this remains an iterative process for us and we continue to evolve the designs/functionality with user feedback, either direct or via reporting (clickthru) data. We are actually launching a new product shortly on our articles, based on some of the initial data after the redesign. 
SV: I hear from a lot of people that it "feels more like TIME," which, of course, is extremely gratifying.
dottedline.gif

If you have a content Web site redesign, feature, applet or new product that is noteworthy or has recently launched, submit it to schrynemakers@gmail.com. Paul Schrynemakers is a longtime SPD member and has been a designer and creative director of interactive media design at Voyager, TimeInc New Media, iVillage, and currently Rodale Interactive.

  • Maryjane Fahey

    What an informative Q&A. So cohesive - this is what we need to be reading about. Brilliant! I am delighted to be back in the fold of (the new) SPD.

  • Josh Klenert

    Great Q&A. Lots of good info.

  • Eric Goeres

    Yes, this is really good reading. Thanks, Paul.

  • Emily Smith

    Paul, this is awesome!! Thanks for getting such a huge amount of info & visual break-down from them!

blog comments powered by Disqus