NYTimes.com

The fifth major redesign of The New York Times, which introduced a new, responsive article layout, improved typography and a brand-new web stack.

One of the biggest digital projects the Times had ever seen was a complete redesign of the article experience of the website, which launched in January 2014.
The project, which took nearly two years, had the company completely rethink how it presents storytelling to readers. While some of the thinking could be seen on the most ambitious enterprise projects the Times had done, the existing technology systems were unequipped to handle richer storytelling.
Through research, the Times determined it needed a dramatic redesign. When I joined the project, it was just beginning to work on the look and feel of the story experience.
Prototype & Preview
At first, I designed and prototyped for our design group, vetting solutions before we took them to developers. We explored challenging interaction models like responsive design and navigation; I built clickable prototypes to help the team home in on the best experience, which worked better than flat designs.
Rather than using prototyping software like InVision, I decided to build these prototypes using markup and code. It would provide for the best chance of determining whether the interactions we were interested in were doable in a browser in a performant manner, and made for much more effective demonstrations of responsive behavior.
Even though practically no one browsing a website adjusts the viewport during a session, building responsive in markup and styling meant we could simulate article layouts more quickly than though a batch of mockups in InDesign.
An early prototype, exploring layout and navigation. I built the prototype in HTML, CSS and Javascript for as realistic experience as possible to the real website.
From Public Preview to Production
In March 2013, we announced a public preview of our work, and released a prototype version of the new site to gain user feedback in advance of a full production release. The limited audience helped us discover which interactions and features were working, and which caused confusion or went unused.
That feedback helped shape our priorities as we worked with engineers to deliver our design vision.
Visual Quality Assurance
As we moved from our public prototype to building a production version, I was responsible for establishing the visual standards for our work. I helped write documentation and specs for all of our site’s components and worked with software architects to ensure our responsive approach worked properly.
Responsive design (or in our case, an adaptive approach to responding to variable viewports) can require a lot of fine adjustments as layouts change. In our case, we described small differences in text widths, font sizes, image size and placement, even how features were displayed. I created the specs for our responsive approach in spreadsheets and more prototypes to help show when layouts changed, and built a bookmarklet to let developers see viewport and size classes without resorting to the browser's own developer inspector.
Our engineering team built a brand new front-end app to handle this, and I got to know the Javascript, PHP and markup behind the project. I converted the language the design team used for features into a common language for developers, and worked with our software architects to define language for styles and markup that reflected the designs.
Through the late stages of the production build, I was the key person in the design group conducting visual quality assurance, checking against developers’ work. Working closely with developers, I helped debug and provide specific feedback while their work was in progress.
The team used a pull request process for non-developers, which meant though I could not contribute code directly to the repository, I could lend a hand with fixing styling issues when developers were swamped with other tasks. I contributed some Less (later Sass) and markup and went through their code review process.
Awards and Accolades
The New York Times won Webbys for best news website in both 2014 and 2015 on the heels of the redesign, and was nominated for a best user experience award in 2014 for the redesign.
The process was written up in publications like Fast Company and Mashable, and the Times won a world's best-designed digital site in 2013 from the Society for News Design for its preview of its redesigned website.
Back to Top