Sunday, May 11, 2014

Behind the Scenes on the NY Times Redesign

The New York Times just launched the first piece of their sitewide redesign: new article pages, with other tweaks and nudges throughout the site. We spoke with two designers and a developer who worked on the project to learn about the tech choices, design ideas, and strategy behind the new look and feel.

Strategy & Rationale

Renda Morton, product design lead: We are a really big company, that’s trying to be faster. Our website is our largest platform. To redesign the whole thing at once would be a nightmare, so we decided to start with our story page and go from there. What’s launching on the 8th is not a site redesign, but really just a redesign of our story page, and some light re-skinning to our home page, section fronts and some blogs to match the new story page. We started with the story page because, like other sites, that’s where most of our readers spend their time on our site. Most times bypassing our home page completely.

We’re going to tackle the home page and section fronts next, though we may not take the same approach. For the home page we’re going to being iterating from the re-skin, slowly adding features and refinements. Its “redesign” will be a slow evolution.

We’ll still continue work on the story page. We don’t want to just let it sit and rot on the internet, and end up right back that this point again where we had to no choice but to do a major overhaul.

What is your team hoping to achieve with the redesign work?

RM: Most of these are still works in progress, but our goals are:
  • Be faster.
  • Have a more flexible and adaptive presentation.
  • Have consistency across platforms.
  • Make the site easier to for the newsroom to produce and maintain.
  • Make it easier for our readers to read, navigation, share and explore.
  • Maintain and convert subscribers.
  • Create a high-quality advertising environment.
What spurred the redesign? Why now?

Allen Tan: It’s partly some much-needed foundation-building. We get to clear out legacy code and design that’s accumulated over 6 years (yeah, it’s been that long), and allows for quicker and easier iteration.

Eitan Konigsburg: Yeah, we had reached a bit of a technical wall in terms of being able to scale the site. A lot of technical debt was holding us back from truly modernizing the website and attempting a redesign (w/o reworking the infrastructure) would’ve been difficult. So the decision to redesign the site was an excellent chance to rebuild the technical foundation as well. These decisions could be seen as going hand-in-hand as it not only furthered the design-develop cycle, but allowed these groups to work even more closely together.

That includes using Github instead of SVN for version control, Vagrant environments, Puppet deployment, using requireJS so five different versions of jQuery don’t get loaded, proper build/test frameworks, command-line tools for generating sprites, the use of LESS with a huge set of mixins, a custom grid framework, etc. (...)

The Big Challenges

What were the biggest challenges you encountered while designing and building out the new site?

RM: The biggest “design” challenge is our own internal process and structure. Our website is where our newsroom’s editorial needs, meet our business goals and requirements, meet our reader’s goals and desires. There’s some overlap, but usually there is a compromise to be made. That’s the challenge. And sometimes you don’t even know if it can be done. Everything else, though hard, is nothing compared to that.

by Source Open News | Read more:
Image: NY Times