Wirecutter

This project is currently active. The team consists of an editorial staff, engineers, a product manager, and myself leading research and design. Our goal is to improve the click through rate of money guide pages on the current Wirecutter website. Using user interviews as our guide, we ended up redesigning the page templates into a completely new experience for users. 

When we kicked off discovery for the project, there was already a set of user interviews completed. They included feedback on what users were expecting, issues they were experiencing, and types useful content not yet prevalent within the credit card review space. I reviewed all of this material and created a user pains and gains workshop to facilitate with the editorial team and product manager. This helped us identify and prioritize user experience efforts moving forward and gain a shared understanding of where to focus our efforts. 

The product manager and I decided on a plan to interview users using wireframes which increased in fidelity as we moved into additional rounds of review. We set out to test wireframes over 4 rounds with at least 3 users in each round. The first round of interviews included 4 very broad wireframe approaches which depicted how we could potentially display content to users. Using user feedback from each round, we modified the wireframes and continually winnowed down the options from 4, to 2, to 1. 

I facilitated the interviews one on one with users virtually using lookback.io. My partner in product management was extremely helpful and supportive of the “guerrilla” approach to user testing. We developed the test script together and collaborated on the wireframe revisions. The product manager also helped source candidates for the test through other partners and scheduled interviews. In the past I have written the screener questionnaires and scheduled the interviews with candidates – that alone is a huge task, so I was extremely grateful for the support there on this project. 

Once the 4 rounds of interviews were complete, we had a high fidelity wireframe which represented the ideal user experience as our team saw it. Working this way helped us evolve our thinking quickly and come to solutions faster. The feedback being qualitative, we were excited to hear users in the last round say things like “wow, love this”, “oh, this is perfect”, and “this is really helpful”. It seems like a very obvious approach, but acting on that effectively, not allowing any bias (as much as possible) to influence our thinking, is always a challenge. 

There were some larger than anticipated changes that emerged from our work. Users want to see our top pick upfront. Not because they don’t like to scroll, but because it’s a way for them to orient to the rest of the content. It acts as an anchor for their initial thinking and also sets the context for the rest of the cards included in the guide. This meant we were going to remove the introduction and present a much more dramatic layout. We decided to A/B test the new layout against current guide pages. We’ll be looking at click through rate, bounce rate, scroll depth, and overall engagement as metrics for success. 

Another test we’re running in parallel to the A/B tests are content variations within the pick callouts. We realized the way content was presented could be improved considerably. Users were looking for our recommendation, but also needed the presentation of content to persuade them or dissuade them from getting a specific card (based on their individual needs coming into the guide page). In its current form, the language is almost too neutral to aid users in their decision making process. 

I’m currently working on the visual design of the new money guide page, it’s not yet completed. At Wirecutter we design for multiple breakpoints, so all depictions exist for 1280, 980, 768, 480, and 320 widths. Our goal is to replace all money guide pages with the new layout by spring/summer 2020. 

All larger tracks of work I’ve been involved in at Wirecutter have utilized a version of this method, but on this project it’s the most realized. We could have done more with additional resources, but I typically strive to achieve the best product possible with what I have available at any given time. It’s rarely a one-size-fits-all approach.