AARP: Quiz Page Redesign

A redesign of the quiz activity pages within the AARP.org website

Overview

Project Name

Quiz Template Redesign

Client

AARP

My Role

Visual and UI Designer

Final Product

Figma Library Components, High Fidelity Mockups

Dates

 August 2022 – January 2023
The purpose of this project was to undertake a comprehensive redesign of an existing interface to enhance the user experience (UX), address any usability issues, and update the styling of the quiz to match AARP's updated style guidelines. 

Goals of this Project

Improve Usability: Identify and address pain points, inconsistencies, and inefficiencies in the current interface to enhance usability. Simplify complex workflows and streamline interactions to make the application more intuitive for users.

Enhance User Engagement: Create an engaging interface that captures users' attention and encourages them to explore and interact with the application's features. Utilize visual elements, interactive elements, and microinteractions to provide an enjoyable user experience.

Ensure Consistency: Establish a consistent design system and adhere to established UI patterns throughout the interface. This will create a unified experience and make the application familiar and easy to use for both new and existing users.

Responsive Design: Create a responsive interface that adapts seamlessly to different devices and screen sizes, including desktops, tablets, and mobile devices. This will allow users to access the application conveniently from their preferred devices.

Quiz Page Before Redesign

AARP had been going through a redesign to not only give their website a more modern look, but also to excite and engage the users when taking quizzes.


The quiz designs before seemed to wash out with the rest of the page. Also it seemed that either users wouldn't finish the quiz or the quizzes would end abruptly. Interactions between questions appeared confusing and sometimes the user didn't know where they were in the quiz despite there being a counter at the top of the questions.


It became apparent that the way the information was structured and present on the page needed to be adjusted in a way that the user could more easily follow the flow of the quiz they are taking.

Previous design for quiz page. It usually started with the first question right off the bat

Previous design, showing an incorrect answer was submitted

Previous design, showing a correct answer was submitted

Previous design showing the AARP Reward: Why It Matter accordion in the bottom hand corner of the page open. Most users never registered it and it rarely got engagement

Previous design of the results page once the user completed their quiz

Quiz Pages After Redesign

Pre-Quiz

When a user selects a quiz to start, either by searching for it at AARP.org or if they were prompted from their Rewards Page dashboard, they will be taken to the overview page of the selected quiz.



They will be presented with the following on this page:

  • Quiz title
  • Overview text of the quiz
  • The name of the author of the quiz
  • When the quiz was last updated
  • The number of quiz questions
  • An option to take the quiz in Spanish if a translated version is provided
  • A CTA to start the quiz

"Discover AARP Rewards" accordion is closed at the top of the page

"Discover AARP Rewards" accordion is opened at the top of the page, displaying text for the user the learn more about the program, along with a CTA to sign up for rewards for free.

On the quiz overview page, there is an accordion dropdown at the top of the page, giving non-rewards members information on how to sign up for the AARP rewards program. In this redesign, instead of it being presented at the bottom of the screen where users barely registered it, it is at the top of the screen where it is prominent but not overly intrusive.

Quiz Pages

Once the user starts the quiz, they will be presented with their first question. There are three different types of questions that can appear, depending on the quiz taken: multiple choice, multi-select, and true or false questions.


The main changes to this page are the addition of the progress bar which now accompanies the total correct and incorrect questions answered, as well as the question hint box.

Updated designs with the hint box expanded out

Updated designs showing a multiple choice answer selected just before being submitted

Updated designs showing a multi-select question with answers

Updated designs showing two multi-select answers selected just before being submitted

The display when the selected answer is incorrect

The display when the selected answer is correct

Quiz Results Page

Once the user submits their final question, they will be taken to the results page. Here, not only will the user see the results of their quiz, but also-- if applicable-- the number of points they received from the quiz if they are an AARP member. On top of that, they user can see another related quiz and jump to it if they so wished.