Nypost.com: A User-friendly Redesign

Nypost.com: A User-friendly Redesign

The New York Post's website, nypost.com, re-launched this past September with new features and a new design. Whether you admire the daily's vibe or just find guilty pleasure in PageSix, fans of user-centric web design will admire its user-friendly nature. I chatted recently with Nick Gould, CEO of Catalyst Group, the folks behind the new look and feel.


Paul: The first thing that comes to my mind when I look at this new site is, "whoa, that's a huge cleanup effort!?! Where did you start?

Nick: haha - so did we. We were asked to participate in an RFP process - based on having worked with some of the leadership there at past companies. In preparation, we took a very close look at the current state of newspaper site design - magazine sites, as well. And we presented our proposal, along with some preliminary strategic thinking about their space and specific options for the NY Post brand. ...and we were lucky enough to be selected as their design partner! 

Paul: Let's hear about the strategy and process before the design began. 

Nick: Building on the work we had done during the RFP process, we conducted extensive stakeholder interviews with virtually every member of the NYPost.com senior team - and several editors from the print side. We also facilitated a series of brainstorms to collect all the good ideas that the team had been saving up, and obviously studied the current site very closely from the point of view of content and functional requirements. Then, finally, we developed a User Experience Strategy to guide the remainder of the site design process. This strategy sought to articulate guidelines and strategies for accomplishing all their tactical business goals in a way that honored their well-known brand (and, of course, leveraged the many powerful brand attributes). 

Paul: Sounds like you acted like reporters -- conducting interviews, gathering facts -- what did you learn? 

Nick: Mainly, there was concern about how the various sections would be represented. The Post has many different voices - and appeals to different audiences on that basis. They are the "best sports in town" Page Six, of course, but also a well-recognized source of local and business news 

And then, of course, there is the Post "attitude"... 

Paul: Exactly, the Post's 'tude.

Nick:  ...which needed to be present on the site, but not in a cartoony or over-emphasized fashion. From a design standpoint, they felt they knew what they wanted going into the project - something lighter, faster, more "modern" - and without the concrete newsprint metaphors that existed on the previous site. Of course some of those directions also drained a lot of the brand's distinctiveness so we ultimately had to work hard to retain a "Post-y" feel and still try to keep the design light. 


Sample of the new nypost.com:

nypost-after.jpg


Paul: Let's talk through the top horizontal navigation of the site; simple at a glance but lots going on there.

Nick: Our "big idea" here was the notion of a "fat header" that would expand to promoted specific stories in each section - but we can look at that later. Another big change - and this was core to our UX strategy - was the reduction of the main nav categories previously, I believe that had 10 or more global nav buttons - and many of those sections were fairly light on content we advised them to focus the main nav on the 4 huge Post franchises - News, Page 6, Entertainment, Sports 

Paul: This must be a key role for Catalyst -- bringing the groups that manage the site together to agree on a structure. 

Nick: Well, we certainly do try to advocate certain positions that we feel strongly about - simplicity and directness being one of them. Of course there was a lot of discussion about what needed to be included up top. They were very open to it - and when they saw some of the early header mockups, they responded very positively to the simpler structure but a lot of the prior sections found their way in as secondary nav links and this complicated matters somewhat but we still feel that the nav is much improved.

Another insight that we gleaned from early research into other newspaper sites was to maintain as much verticality in the design as possible. We found in our eyetracking studies that certain vertical elements encouraged more scrolling - as if these elements provided a visual guide that drew people down the page so we worked with strong column features - especially the left column and tried to avoid horizontal roadblocks 

Paul: Eyetracking study. Expand on that.

Nick: Yes, in eyetracking we can actually determine where people are looking on the page and generate heatmaps that show where attention was focused and what things were not "seen" this can be helpful in designing overall page layouts - particularly if you can identify patterns across different sites in a similar category.

Paul: So you included this study in your competitive analysis, which then helped to inform best practices for the coming page structure and design.

Nick: Exactly 

Paul: Cool, OK, back to that top navigation: Logo, date, weather, search, got it. Hot topics, editors program these?

Nick: Right - that was an important feature that allowed users quick access to what was new and important.

We also created different page variations to accommodate different news days so the current version is the "normal day" layout other versions lend additional priority and prominence to the featured story. Interestingly, there are "doomsday" and "suicide" scenarios and finally, there is a breaking news strip that is inserted when a new story is breaking 

Paul: OK, don't take this the wrong way but I hope to never see the "doomsday" version of this site. OK, what else?

Nick: If you click into a section, say news, you'll see the expanded version of the fat header.  The concept here was to really highlight the top stories in each of the top sections - graphically, in an eyecatching way so that people who enter the site at the article page level  (e.g. from links from other sites such as Yahoo News, or Drudge) might be drawn into some of the other hot stories.

There is also a rollover in the header. If you rollover the red arrows you get several promoted stories and some secondary navigation in the section.



Nypost.com's top navigation on the home page
(below), and...

nypost-nav.jpg


... one level down, in News, where the sections expand to show their top stories

nypost-nav2A.jpg


Paul: Clever. Let's go to a story page.

Nick: Ok, so the thinking here was to make the supplemental info - like photos video and related stories tabs on the left to keep the navigation to these elements very clear.

Paul: So right up front Users are shown the different components of the story.

Nick: Right and also the photos and video pages are gallery pages that have lots more media on them.

Paul: I like their proximity to the title. The title stands out, but the media components are not subtle either.

Nick: Yes, that was the idea - and you may have noticed that this construct is repeated on the homepage - with the featured story module


Example of a story's components (story, video, related stories, comments) called out down the left column of the article:

nypost-storynav.jpg

Paul: I feel the need to comment on the use of black as a link color, seen here. For years, Yahoo blue would be the standard. Nowadays Users may not need those types of links to look overtly clickable; they are somewhat intuitive simply by where and how they are presented on the page. Also notable is the use of a red hover state here to gives the Users immediate feedback that those words are also links. 

Nick: This was actually a Post decision. They didn't want too much blue. 

Paul: Yes, black does keep the page's "noise level" down and the red hover state does remove any doubt.

Nick: Right, in fact there is a planned rollover effect that will preview the story content when you rollover the link that has not been implemented yet.

Paul: Sounds cool, can't wait to check that out.



- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

If you have a content Web site redesign, feature, applet or new product that is noteworthy or has recently launched, email me at schrynemakers@gmail.com.

Paul Schrynemakers is a longtime SPD member and has been a product designer and creative director of interactive media at Voyager, Time Inc, iVillage, and currently Rodale's interactive group.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

blog comments powered by Disqus