Wirecutter (a much-loved product review site owned by The New York Times) asked Runyon (a product design and venture studio based in Dumbo, Brooklyn) to explore a product strategy to deepen their relationship with readers. I’m a huge fan so this was a dream project.

They were specifically excited to explore a discovery-driven way to shop, and hired Runyon to accelerate that exploration and product design work. We used a human-centered design process to identify and validate core insights, opportunities, and concepts for their future. I was asked to lead the iterative design and development process from sketches to a 50-person closed alpha, and Wirecutter Lists launched just before the holidays.


The Process

Who what why?

Runyon led a stakeholder workshop to identify core themes for Wirecutter, and drafted a plethora of concepts to validate with users. I came in after week one to help test directions, synthesize results, and create the product strategy (in two weeks). Wirecutter and the NYT were super enthused and asked us to keep going!

wirecutter-synthesis.jpg

Where when how?

We had five weeks and four great concepts to prune in phase two, so I wireframed detailed flows for each key experience (53 screens) and we interviewed another group of users. After synthesizing the patterns and strategizing the opportunities, I designed a tappable mobile prototype (78 screens) plus desktop mocks (7 prints) for a second test of the key experiences. We refined the product strategy together with Wirecutter, and as they began to expand their teams I wrote user stories for development while proposing a content calendar for editorial.

wirecutter-paper-prototypes.jpg

How’s it look in real life?

We had fifteen weeks to design and build the actual thing. I did responsive mocks of all screens we hoped to fit in, expanding Wirecutter’s existing design system with new components and styles as appropriate. Our development partner scoped the user stories, and we worked closely with Wirecutter’s product and engineering teams to prioritize and refine the design details as the product came to life.

wirecutter-mobile.jpg

Do they love it?

With a solid MVP built, we ran a three-week closed alpha to see the reactions of 50 target users. We synthesized all feedback into weekly reports and recommendations. As the project wrapped we did a final interview with our top 12 users and a final expansion of the product strategy and roadmap. I polished my source files for handoff and did a walkthrough with Wirecutter’s product and design teams as they finished ramping up and we gradually faded out.

wirecutter-desktop.jpg

The Wirecutter Lists beta launched just before Thanksgiving — only six months from kickoff to release — and the UX was integrated into the main site experience shortly after. User and stakeholder feedback were both wonderful, and we look forward to seeing it grow!

“The beta Lists feature is perfect — I’ve been wanting something like this… This is great!” —Jason Lang, reader

The Team

Runyon Product Design + Venture Studio

  • Anthony D’Avella, Partner
  • Joe Rizk, Partner
  • Felipe Garcia, Senior Visual Designer
  • Erica Heinz, Senior Product + Design Director
  • Fueled, Development Partner

Wirecutter A New York Times Company

  • David Perpich, President + General Manager
  • Blaine North, Executive Director: Product + Design, + product team (especially Omri Sass, Product Manager, Relationships)
  • Ganda Suthivarakom, Special Projects Editor / Acting Editor-in-Chief, + editorial team
  • Rachel Baker, Executive Director: Engineering + Data, + engineering team