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.
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.
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.