DATE

November 2017

COLLABORATORS

Two developers, product manager

DESCRIPTION

An interface design project for ClutchPrep ExamReviews to improve the user navigation across the tool

Date: November 2017

Collaborators: Two developers and a product manager

Description: This exam review was a component of an online version of a tutoring center. Since the original version was offline, it used page numbers as the primary navigation system. The web version followed suit, but the page numbers became irrelevant. This created the need for an updated navigation system. We first needed to understand a student's mentality when studying for exams.

 

old-navigation

To understand how students actually study for exams, we interviewed six students. I recruited and interviewed the students and then collaborated on the analysis with my product manager.

There were many ways to prepare for an exam depending on the course's professor and a particular student's learning style. Study methods included:

  • Studying from slides
  • Lecture notes
  • Previous homework
  • Textbook

Students study for exams one chapter at a time. Our navigation needed to more closely align with this mentality of the students.

First: This sketch shows new options that allow students to check if they answered a question correctly.

Second: This sketch of a sidebar shows the number of questions that can be listed for a particular chapter and topic.

sidebar-sketch-problem
sidebar-sketch-incorrect

This was the final proposed mockup of the updated Exam Review page.

updated-nav
3202909

Challenge

Finishing the project in time was a challenge, as the product manager wanted to ensure I focused on ensuring students received updates ASAP. We learned about many potential updates, but the arrival of finals cut our time short.

This meant we needed to reduce our scope and prioritize. I proposed that we focus on the ease of implementation, expected user value, and resource availability (mostly developmental). The final list of updated items were:

  1. Navigation sidebar
  2. Chapter and topic headings

We decided to prioritize:

  1. The ability to check answers
  2. Navigation indicators
  3. Navigation to other chapters

Learnings

The biggest realizations I had was the importance of inviting developers in the process early on. After I created the designs, I realized that the multiple-choice question is a shared component across the website and it would impact all the other interfaces. This oversight was due to poor communication and collaboration with engineers in the early design stage of design when trying to understand how they developed the components.

Studying, table with books and different folders. Concept illustration for learning, education, office work, school or university. Vector illustration in flat style