RoundUp Template Redesign

Product Designer | 2019. 8 weeks.

Environment: desktop web. Mobile web designs will be covered in a separate case study.

What is a RoundUp? A RoundUp is categorized as any page that recounts the “Best Of” products within the category. This page type numbers hundreds of live pages and represents a high proportion of the company’s annual traffic and revenue. RoundUp pages span across multiple product types, user personas, and customer journeys.

The problem

The job of a RoundUp page is to help users narrow down their choices by offering a curated list of products and relevant criteria to evaluate them by. However, current RoundUp pages do not always offer adequate tools for users to explore and confidently narrow down the products to a final product. The users have trouble understanding what is on the page, parsing through the lengthy content, and finding alternatives if they are not ready to pick a product yet.

Internally, there are some accessibility and performance considerations we wanted to address: the duplicity of some elements within the page, the length of the pages, and the lack of adherence to accessibility standards. Since these pages span many product types and shopping personas, the existing template was starting to break.

The design goal

To provide users easy ways to compare between products and gain confidence in choosing the right product for them.

To create a global template that accommodates all verticals and use cases.

The process

1. Discovery

2. User Research - new and existing

3. Create concepts

4. Concept Tests

5. Create & iterate

6. Implementation & testing strategy

Step 1: Discovery

I audited all pages that would fall under the new template, and decided with my PM on the priorities between verticals. Which pages must see best fit, which can accommodate a looser fit. I also did comprehensive audit of requirements that may exist on each of the verticals as well as competitive analysis.

Step 2: Lit Review & User Research

What We Did

We conducted 4 remote, unmoderated and 6 moderated user interviews using 2 example RoundUp pages chosen based on top financial jobs for our target audience.

What We Learned

Users roughly break into two personas: Think for Myself and NW-Think-For-Me.

1. Think for Myself - Users prefer to see hard data and come to their own conclusions. However, NerdWallet expertise is still appreciated.

2. NW-Think-For-Me - Users value NerdWallet’s evaluations and recommendations, and do not wish to do further research on their own.

How users shop can be based on what kind of product type it is: objective “best” based on quantitative data versus subjective “best” based on users’ individual situations.

Major Themes in Pain Points:

1. Users found our pages too long and hard to navigate and digest.

2. Users didn’t have the tools or information they needed to narrow down to the best product for them.

3. There are many redundancies leading to overwhelming mental load.

4. Users found the pages to be cluttered and hard to parse.

The Five How-Might-Wes

With these themes, we were able to distill down to five main HMWs:

1. User "orientation" - how might we provide clarity to users on what exists on the page?

2. User journey / comparison - how might we further help users narrow down their choices?

3. Ease of use - how might we simplify the RU template so that it's easily digestible?

4. Content cleanliness - HMW design guardrails or flexibility around our templates to create more consistency?

5. Content cleanliness - HMW update the template for optimal accessibility standards / text consumption?

Step 3: Creating Concepts

I organized a brainstorming exercise with our stakeholders, starting with our painpoints and HMWs, then moving into a Crazy-8 ideation exercise. Each of us shared our ideas and dot votted our favorites.

I then took the most upvoted ideas and worked with my PM to strategize based on votes, feasibility, effort, and potential efficacy. After a few rounds of low-fidelity design feedback, I was able to narrow down to three top concepts that I then built full prototypes for.

Step 4: Testing the Concepts

We tested three different concepts with 8 participants in a moderated study. Each participant was tasked with finding, narrowing down, and choosing a product for them.

Step 5: Building and Iterating on the Final Designs

Although there wasn’t a clear winner between the concepts, there were winning features that participants appreciated about each concept.

As such, I set out to create final designs that incorporates each useful element as much as possible. At the end, we arrived at the following design. Prototype here.

How I addressed our 5 HMWs

1. User "orientation" - how might we provide clarity to users on what exists on the page?

2. User journey / comparison - how might we further help users narrow down their choices?

3. Ease of use - how might we simplify the RU template so that it's easily digestible?

4. Content cleanliness - HMW design guardrails or flexibility around our templates to create more consistency?

5. Content cleanliness - HMW update the template for optimal accessibility standards / text consumption?

Psst - There will be a full case study on the Structured Content initiative I undertook in parallel to this work in order to clean up the way our library of content is generated and displayed.

Step 6: The testing & Implementation strategy

With an extensive design update like this, there is considerable risk and effort involved. I decided to phase out the solutions in the smallest testable increments. This is to ensure that we gain as much, and as granular, of learning as possible and also mediate the risks of throwing away smaller solutions that work when the overall designs fail. Additionally, breaking the solutions into small, independent chunks meant that they are easier to slot into roadmaps and build. They are also not dependent on each other and can be developed out of sequence

Results

The text hierarchy and content clean up was completed with the support of our entire content writer team. Our pages now use the updated whitelist and text hierarchy.

We’ve picked up the accordion table segment and tested it on a subset of our pages where we saw 27% increase in our main engagement metric. Currently it is being tested on a second, larger subset of pages. If we see success here, we will gradually roll out the design to all pages.

After that, in later 2021, we will be taking on restricting the content widths to accessible lengths across all of our pages.

Learnings

This was a difficult project because of how many side initiatives were born out of the discovery process that needed to be completed in conjunction to the template redesign — structuring all the content available, whitelisting elements and getting buy-in from all content writers, drafting a new text hierarchy and getting buy-in from same writers as well as our SEO team, the list goes on.

Due to this, we saw a delay in when the final designs were delivered. I do not think there would’ve been a way to avoid it, knowing what I didn’t know at the time, but when it comes time to redesign comparable templates, I’ll know to advocate for structured content migration and cleaning up the content-drafting process before seeking to redesign altogether.

The tactic of testing smallest-testable-increments has proved useful, so I will likely continue to do this with other meaty projects.

I do wish we were able to do a last round of validation testing with high-fidelity prototypes so we can learn more than performance metrics. However, with the project timeline, it was a compromise that made sense since my PM and I were able to agree on allotting bandwidth for iterations should the AB tests fail.

My biggest regret is not being able to include mobile web as part of this exploration. With the large number of requirements we had on the mobile end, the final concept would not be viable on mobile. This means there could potentially be a discrepancy in experience between Web and Mobile Web. I definitely should’ve spent more time and effort designing and advocating for a solution that better captured the Mobile Web requirements.