240 Tutoring Case Study

Redesign an edTech Platform

240 Tutoring showing multiple breakpoint

My role | 2019 - 2020

  • UI/UX design
  • Information Architecture
  • Prototypes

240tutoring is an EdTech company focused on preparing teachers for certification exams. They needed an app redesign aimed at boosting usability and enhancing learner metacognition (teaching learners what they know). For 240 Tutoring I worked on:

  • Creating a site map of the existing website
  • Redesigned dashboard to increase metacognition
  • Mobile, tablet and desktop breakpoints
  • Created an onboarding video to introduce the app to new users

THE PROBLEM

The existing 240 Tutoring website relied on web templates that didn’t the content or support the brand.

Old 240 Tutoring
Old 240 Tutoring dashboard

Students often skipped the self-assessment.
To enable adaptive learning, students need to take a self assessment to “place” them and adapt the content to their needs.

240 Tutoring also needed to discourage students from taking the practice tests too early because 240 offers a money-back guarantee based on the student’s practice test performance, but only had 3 full length practice tests.


USER RESEARCH

Old 240 Tutoring site map

I created a site map of the old 240 site and reorganized the content to streamline the student experience.

I also created a content inventory of the old 240 site to determine what to keep, what to change and what to discard.

We interviewed new teachers who had recently studied for their teaching tests to understand 240’s users.


THE OPPORTUNITY

Learners want to know how close they are to achieving a passing score. Adding prominent progress indicators that are based on psychometric indicators derived from practice test results will help learners feel more confident about where they stand and get more out of the platform.

  • Redesign IA (information architecture) and navigation
  • Design progress indicators

Design Sprint

Design Sprint post-it notes

A week long Practical Design Sprint resulted in a validated prototype that dynamically highlighted the learner’s progress.

We then redesigned the web app from
 first time to user experience to completion certificate, and performed two rounds of usability testing.


Exploration and Iteration

We jumped from Sketch wireframes to a prototype, then high-fidelity mockups based on those wireframes at a rapid clip.

Self-assessment modal

The self-assessment modal treatment explains why students should take the self assessment.

Self-assessment - question answered

The redesigned self-assessment interface (below) features questions with large tappable multiple choice selections that clearly indicate the user’s selection.

Self-assessment - wrong answer

When a student gets a question wrong (above), it is important to make it very clear which question was selected and which answer is correct because this is a practice test.

adaptive animation

An adaptive animation with animated percentages and graphs demonstrates to the user that the course has adapted for their needs based on the results of the practice test. The recommended course in each unit is highlighted (below) based on the self-assessment.

Adapted course

The top of the courses screen (below) features student progress and organizes the courses in accordions that show course progression.

Courses screen

The estimated chance of passing was introduced to discourage taking the practice test too early. A bar graph indicates the student’s remaining attempts and their estimated chance of passing.

Estimated chance of passing

The study guide was redesigned to enhance readability with typography and responsive layouts.

Study guide

Redesigned flash cards enhance active recall with improved typography and flip animations.

Flash cards

USER RESEARCH

We ran a SUS usability study on the new product:

  U1 U2 U3 U4 U5 U6 U7 U8 U9 U10 Total
SUS Score 95 95 87.5 90 85 97.5 95 90 80 100 91.5

OUTCOME

Using the validated Design Sprint prototype as a guide, we then redesigned every facet of the web experience, from initial user involvement to completion certificates. After performing 2 rounds of usability testing we produced final high-fidelity designs only 6 weeks after the project was initiated.

Results and what I learned:

  1. I delivered high-fidelity mockups for three breakpoints.
  2. Usability testing confirmed that users understood that the new product had a recommended study path but that they can deviate from those recommendations.
  3. The new product has an average SUS score of 91.5.

Prototypes:

240 mobile prototype: Invision
240 desktop / tablet prototype: Invision


#ui #interaction #web_app