MY ROLE UX Design, Research, UI Design, User Testing
The team also included: members of our Analytics Team, a Developer, an Art Director, a Copywriter, and members of our Account Team.
BACKGROUND The “Find the Right Pet Food” quiz was an underutilized element of the Diamond Pet Food site, despite its potential.
Our baseline analysis showed that traffic to the quiz only accounted for about 1-2% of overall site traffic, and of that group, 20% of participants ended up with a “no results” result (a third of those who got “no result” would re-take the quiz, the other 66% would drop off).
This felt like a real missed opportunity.
The goal with a redesign was to increase engagement with the quiz and eliminate all instances of “no results” results.
The dreaded "no results" result.
Concurrent with this quiz redesign, I was running a usability study of the website’s main navigation. To help increase engagement with the quiz, it was given a more prominent spot on the redesigned nav along with some explainer copy to give it more context to new site visitors.
The quiz had new prominent placement in the main nav.
As part of this update, I moved the quiz to its own page of the site (previously, it was just an element on a different landing page).
UI DESIGN Using the original quiz as a starting point, I laid out a new flow of questions with more direct options and built in key moments for user education.
The questions on the original quiz had a lot of options for a “no preference” answer. I thought this was a great spot to educate the user and give them the confidence to answer “yes” or “no.”
The way I decided to tackle this was to add a little icon on each question that had an educational element. When clicked, the icon would trigger a modal window that had a brief explainer of the topic to help the user confidently choose an answer.
Clicking or tapping on one of the little "i" icons triggered a full-screen info modal.
As another way to increase user engagement with educational content, these modals all link out to a blog or article on the site that deals with the given issue. The idea here is that if a reader discovers that maybe their dog actually DOES struggle with skin sensitivity, now they can go read about it. These links open in a new window so we don’t lose any users down a research rabbit hole (we want them to finish the quiz first).
An example of an info modal. Users could answer the question in the modal and it would map to the main page for ease of use.
At the end of the quiz, we decided to add in an option to have the results sent to the user. The user could choose email or text (or both), or opt out entirely (they could opt back in from the results page too if they had a change of heart).
At the end of the quiz, users have the option to get their results sent to them.
On the “Results” page, the user is presented with up to 4 relevant products based on their answers. The displayed products are based on the user’s answers and the weight of certain questions over others (i.e. health issues are weighted more than protein preference).Since a lot of our “no results” users were caused by a string of “x and y and z” sort of choices, it was important that even if no single product met all of their requests, we recommended something based on what was the most relevant given their information.
HELPING THE USER MAKE A CHOICE From the “Results” page, the user has several options to find their perfect product based on where they’re at in their own mental journey.
The layout of the new results page.
Our ultimate goal here was to get the user to the “Where to Buy” page, either directly or by way of a specific product page. We had a few avenues to help the user make that choice:By checking "compare" on any of their results, users could view them side by side on a table to compare key decision-making factors.
Since we already had a robust “formula finder” on the site (the “see all products” link in the nav) I didn’t want to reinvent the wheel here. Instead, the quiz would function to orient the user and give them a series of “next steps” that made sense to them.
The "next steps" options.
Initially, all of the refining was going to be done on this results page, but that presented some interesting logistical problems with how the page was built, and how the “send me my results” behavior would function. Funneling those “refine” users to the formula finder eliminated these problems, used a tool we already had, and encouraged further exploration across the site, wins across the board.
Clicking this button takes the user to the Formula finder and inputs all of the values that got them to this results page (so they’re starting from the same point vs. from square one).If the user wanted to start fresh, we gave them two options: either retake the quiz from the start, or “view all products” on the formula finder (which is similar to the “refine” option, but doesn’t carry over any of their values).
OUTCOMES The new quiz launched in March of 2023, and traffic doubled in the first month of being live!
After three months of being live:
70% INCREASE IN QUIZ PARTICIPATION (~3,600 RESPONSES) 66% EMAIL CONVERSION RATE (~2,300 SUBMISSIONS) 22% SMS CONVERSION RATE (~800 SUBMISSIONS) 1-4% OF QUIZZES INVOLVED INTERACTING WITH THE INFO BUBBLES
