Project Details

TL;DR

I designed the tutor dashboard experience for Schoolhouse.world, a new virtual group tutoring platform created as a response to the pandemic.

I aimed to simplify the dashboard user experience with accessible controls for most-used features at a glance.

Play with the prototype to move through key interactions a tutor would go through on this platform, and for a more comprehensive look at my design process, continue scrolling.

Role

User Research, UX/UI Design, Branding, Prototyping, Usability Testing

Tools

Figma, Miro, Trello, Whimsical

Timeline

5 weeks (Nov - Dec 2020)

View Prototype

Disclaimer: I do not work for Schoolhouse.world, and the views in this case study are strictly my own. As budding designer, I acknowledge that my vision for this project may be overly ambitious and at times reliant on assumptions of business goals and users' JTBD. In a perfect world, I'd be working alongside the Schoolhouse.world team with direct access to these resources to guide my work. Until then, this case study is meant to be an exploratory learning experience on a product I deeply admire.

The Brief

Schoolhouse.world is in the process of launching a new, custom web platform in early 2021. Passionate about the product and its mission, I saw this as a unique design challenge to bring a creative solution to the internal dashboard tutors would use on the platform.

The primary goal for this project was to design a intuitive and scalable portal for tutors on the platform

The high-level goals were to:
‍
• Design a responsive dashboard that would allow Schoolhouse.world tutors to accomplish all their daily tasks

• Refresh Schoolhouse.world’s Beta branding, bringing a fun and friendly feel to the platform

UX Challenges

Designing for critical information and functionality at a glance

The main UX hurdle was to determine what information is most vital for virtual tutors to access, as well as what controls. I aimed to design these most critical touch points above the fold, further facilitating quick action, as well as adding to the design constraints I worked under

Another consideration was allowing for scalability: Schoolhouse.world is a global platform with tutors and students from all over the world, and is rapidly expanding. The dashboard had to accommodate for a great amount of information while still feeling lightweight. Naturally, this also meant designing a great mobile dashboard experience, which I knew is notoriously challenging.

Research + Planning

What makes a great dashboard?

I usually implement a very in-depth approach to the research phase, closely examining products in the subject area first-hand from a user perspective.

For this project, that involved registering as a tutor on similar platforms myself, exploring the interface and studying the user experience. In some instances, I reached out to friends who regularly use such portals to walk me through their daily work to gain further perspective on opportunities for improvement.

Landscape Analysis

In-depth research into similar virtual tutoring platforms provided the following insights:

• Visual hierarchy: lacking between important sections

• Calendar: confusing and hidden calendar functionality made scheduling sessions difficult

• Hidden controls: important information often lost below the fold or in secondary navigations

User Interviews

I then needed to uncover how virtual tutors use their current portals, paying particular attention to the most relevant information they seek out, as well as the pain points they face. I interviewed virtual tutors, educators, and mentors who heavily rely on dashboards for their daily work.

While these interviews generated many insights, two stood out to me the most, and would end up being the priority problems to solve for in this MVP:

• Personal student information and the ability to leave notes about students is seldom accessible, and sorely missed. Educators want to have a more personal, detailed view of their students.

• The scheduling function is not centralized or streamlined, with educators often relying on work-arounds to manage their schedule.

UX Solution

Leverage information architecture to build an effective global overview

I relied heavily on principles of information architecture and hierarchy to decide what information to present, and in which position.

I ultimately utilized different sections of cards, leading with the most important information first, and aimed for each section to be interactive, allowing the user to access quick controls without necessarily needing to use the left navigation.
‍
I also designed a dashboard view exclusively for accessing student information, so that tutors can have more context and insight as to their individual students’ needs, hopefully enriching their virtual learning experience.

Task Flows

User research suggested that the ability to quickly access and edit both scheduling and student information were top priorities for tutors logging into their dashboards, so this is where I focused my efforts.

I specifically designed for three critical task flows: “book a tutoring session,” and “create and edit a note for a student.”

Wireframes

Between wireframes and the final design, main changes were:

• A fullscreen modal for the student profile view with a more effective use of tabs

• Swapped "my subjects" for "upcoming this week" for quicker access to most important information

Branding + UI Design

Bringing Schoolhouse.world to life

I aimed for a soft and subtle visual design, incorporating muted illustrative elements intentionally, yet sparingly.

‍I wanted the visual experience of Schoolhouse.world to feel warm and welcoming, while not distracting from the vast amount of functions hosted in the dashboard.

Logo

Schoolhouse.world's logo suited its initial platform well, but would need a more polished, refined look in this new platform.

I vectorized the original logo, utilizing subtle angular gradients and a soft drop shadow, and opted for a clean, extended sans serif for the wordmark to balance the playful brandmark.

Moodboard & Style Guide

Ideating the visual design first involved creating a moodboard to gather inspiration on typography, imagery, color, and layout.
‍
I was looking for a balance between a fun, vibrant feel with something more subtle and understated. My initial color palette included both warm and cool hues to attain this harmony.

While a humanist typeface seemed like an obvious choice at first, it ultimately felt too strong for Schoolhouse.world's approachable brand, so I opted for Basis Grotesque, a round, playful sans- serif, for the design's sole typeface.

Responsive Screens

With 50% of users interviewed checking and managing their schedules on mobile, it was imperative to design a seamless mobile experience.

The main challenge here was understanding how to structure the search, filter, and sort functionalities in the student notes section, as well as designing a dynamic calendar experience.

The main differentiation from desktop is a subject-level drop down, so that the interface didn't feel overwhelmed with tabs

Usability Testing

How efficiently can tutors access information and key functions?

I conducted 6 remote usability tests, asking participants to share their screens and think aloud while being recorded going through the prototype. I asked users to go through four tasks:

• Sign up as a tutor

• Book a tutoring session for October 14

• Create a note for your student, Jasmine Lee

• Edit a note from September 14 on Jasmine's profile

Usability Testing Insights

After conducting my usability tests, I created an affinity map with insights, behaviors, and findings during the tests. The most vital insight from user testing was:
‍
• Executing one of the most vital functions as a tutor, scheduling a session, was still relatively obscure. Most users attempted to book a tutoring session directly from calendar the dashboard view, other than accessing their full calendar via the left nav

• Most users struggled to quickly identify their upcoming sessions below the calendar, instead attempting to uncover this information in the first section they saw - "subjects"

I’d have to restructure the IA to make this information more accessible, as well as add functionality in the dashboard view, further saving the user time

Using A/B Testing to guide priority changes

I conducted 6 A/B tests, presenting participants with 2 different versions of the dashboard:
‍
• Version A: similar to the initial prototype (pictured above), with an added backwash on the calendar and scheduling column to draw emphasis to the week's upcoming sessions

• Version B: presented upcoming sessions in-line with the calendar, moving subject cards beneath the calendar

Both versions included added functionality in the calendar, allowing users to schedule and view sessions directly in their dashboard view

Results

• 100% of participants accomplished tasks (identify upcoming sessions and schedule a session) faster with Version B, and

• 67% accomplished scheduling a session immediately from the dashboard view without having to access the left nav

With this feedback, I integrated Version B into the final design.

To view the final prototype after these post-usability test changes were made, click the button below:

Latest Prototype

Outcomes

Lessons learned, and where we go from here

Working on a new product allowed me to think outside of the box and create the most user-centric experience possible. I’m deeply passionate about this problem space and worked tirelessly to reach a solution that would serve users making an impact, as well as (hopefully) the business as well.

Next steps would be to create an interactive onboarding experience to further facilitate quick acclimation with the dashboard. The next priority would be to build out the Tutor Certification flow - integrated with Khan Academy and swiftly accumulating accreditation from major universities, allowing tutors to access this tool quickly and efficiently is very important. Naturally, creating the student dashboard experience would also be a top priority.
‍
Designing an efficient and usable dashboard is notoriously difficult, so this project forced me to step outside of my comfort zone and really challenge myself as a designer. I learned more about the intricacies of a dashboard experience vs. that of a typical responsive website, and how the roles of information architecture, navigation, and sort and filter serve the dashboard use case specifically.

Schoolhouse.world

A dashboard experience for virtual tutors