240 Tutoring Case Study
Redesign an edTech Platform
My role | 2019 - 2020
- UI/UX design
- Information Architecture
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 existing 240 Tutoring website relied on web templates that didn’t the content or support the brand.
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.
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.
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
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.
The self-assessment modal treatment explains why students should take the self assessment.
The redesigned self-assessment interface (below) features questions with large tappable multiple choice selections that clearly indicate the user’s selection.
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.
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.
The top of the courses screen (below) features student progress and organizes the courses in accordions that show course progression.
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.
The study guide was redesigned to enhance readability with typography and responsive layouts.
Redesigned flash cards enhance active recall with improved typography and flip animations.
We ran a SUS usability study on the new product:
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:
- I delivered high-fidelity mockups for three breakpoints.
- Usability testing confirmed that users understood that the new product had a recommended study path but that they can deviate from those recommendations.
- The new product has an average SUS score of 91.5.
#ui #interaction #web_app