Britannica Games & Quizzes
Timeline: 2 months
My Role: User Research, Strategy, UX, UI
Team: Myself and one other designer
Tools: Adobe XD, Figma
The Challenge
Britannica’s quizzes account for a significant portion of site traffic, but users were almost never taking more than one quiz, and those that got to the quiz landing page were quickly bouncing. In order to retain these users, we would need to improve the quiz play experience itself, while also increasing user investment in leaderboard progress, and offering easy opportunities to take another quiz from the results screen.
Existing State
The previous version of the quiz experience did not address the leaderboard at all on the results page, while the only CTA to continue, “Next Quiz” didn’t offer an enticing enough proposition to get users to click through. As for the play experience, users were not given an explanation for an incorrect answer unless they pursued it on the results screen.
Process
User Research and Competitive Analysis
With the help of user surveys placed on the site, we were able to pinpoint things users found difficult in the current design. For example, we found that users who reported having taken more than 5 quizzes on the site were frustrated at not being able to see their leaderboard standing for each quiz.
With the survey information, we decided to design with two groups of users in mind; dedicated quiz takers, who wanted a more robust ranking system, and first time users, often coming in through Google, who we wanted to take more than one quiz.
We then conducted a wide competitive analysis of other quiz platforms, looking at other sites offering quizzes like NYT and Buzzfeed, as well as more student focused products.
Wireframes and Iteration
Wireframes helped us to nail down the architecture of the browse and play screens. Some early iterations of the results screen combined results and leaderboard into one screen, but we ended up moving toward a tab based system to avoid clutter, and knowing that leaderboard progress wouldn’t be as important to a first time quiz player. Instead, the initial results screen would be simplified to include only a high level score number and a curated quiz to play next, seeing as the design’s chief business goal was to prompt the click to the next quiz.
Simplified Quiz Results & Leaderboard
Whereas the previous results design merely presented a number and a column of buttons, with no clear CTA, here we used a tabbed approach keep the first page as simple as possible.
On the score tab, the prominent “Next Up!” featured quiz card serves to funnel users into another quiz.
For the leaderboard, it was important to show both the components of the users score, as well as how their score compares to others who have taken the quiz in an easy to understand format.
A More Delightful Play Experience
We added more dynamic score and timer displays that show exactly how many points you are getting from each question, while adding animation feedback to the buttons and scores to make the play experience a little snappier and more delightful.
We also expanded the quiz window after an answer to display the explanation below, which was previously not shown at all until the end of the quiz.
A Comprehensive and Navigable Landing Page
A revamped browse experience would make it easier for users to navigate different categories and find featured quizzes hand-picked by Britannica editors.
The previous design was just a paginated 4x4 card stack of quizzes sorted by date, so we segmented quiz cards under different headings, using different card styles from the Britannica design system to enforce the visual hierarchy of the page.
We also added a separate Games & Quizzes navigation that is separate from the main site nav, to allow for further expansion of the Games & Quizzes ecosystem in the future.
Results and Next Steps
After implementing the improved Quiz experience, the percentage of users taking more than one quiz rose by 20% MoM, while traffic to the quizzes & games landing page increased as well. Once we had improved the base level quiz experience, company stakeholders wanted to focus on adding new quiz types, and further expanding the content offered under the Quizzes & Games header. This would end up necessitating smaller UX projects, such as mproved visual tagging of different quiz types.