Responsive website redesign (2013)

I had the amazing opportunity of working on the 2013 Techcrunch responsive website redesign. Josh Clark assembled an incredible team including Brad Frost, Dan Mall, Jonathan Stark, and Jennifer Brook. Josh, Brad, Dan and Jonathan did a few additional projects together and were later nominated for a Webby Award for Team of the Year.

On this project, we used a new methodology which Brad termed, “Atomic Design”. Atomic Design helped us focus on creating a future friendly design system, rather than creating several disparate fixed pixel width static designs.

My role was to help Brad prototype the responsive interactions for the website using HTML and CSS – essentially, to design and decide on details in the browser.

A quick overview of the creative process:

  • Jennifer created wireframes to establish content hierarchy and site wide patterns.
  • Brad and I created HTML wireframes which scaled elegantly from small to large devices.
  • In parallel, Dan established the visual direction and subsequently, visual system.
  • Brad and I worked with Dan to incorporate the visual system into a final working responsive prototype.
  • Techcrunch’s development team took our reference code and integrated it into their CMS.

You can read more about the project and the Atomic Design process we used with Techcrunch in Brad’s project write up.

Design explorations by Dan Mall: the article page

The Techcrunch reverse chronological stream

Next project: Victoria's Secret