Schoolhouse.world is a new virtual group tutoring platform created as a response to the pandemic. Originally built in Coda for its beta release, it would eventually need a scalable web app as its user base and product offering grew.
A dashboard for tutors on the platform.
A high-fidelity prototype that led to a conversation with the Schoolhouse team about my approach.
User Research, UX/UI Design, Branding, Prototyping, Usability Testing
Solo project
Disclaimer: I do not work for Schoolhouse, and the views in this case study are strictly my own. As a budding designer, I acknowledge that my vision for this project may be overly ambitious and at times reliant on assumptions of business goals. In a perfect world, I'd be working alongside the Schoolhouse 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.
.png)
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
Business Model: A Blue Ocean Strategy
A survey of the current charitable donation landscape revealed there was considerable room for innovation. I found that charitable organization platforms fall into three main categories:
• Siloed: each individual organization has its own web or mobile platform
• Congregated: a large (read: overwhelming) resource of many organizations with high-level filter and search functionality
• Crowdfunded: most often used as a buoy for systemic state failures
Moreover, of the few micro-donation platforms on the market, none were focused on mutual aid, nor were exceptionally effective at facilitating discoverability of organizations or conveying the impact donations on the platform were having.
By leveraging the power and impact of mutual aid organizations, the innovation and ease of micro-financing, and the simplicity of a service-fee-based revenue model, Be the Change is poised to be an empowering life-raft in a blue ocean of possibility in the charitable donation space.
After brainstorming with my mentor, I intentionally decided to focus on Mutual Aid Funds for this platform. In systems of mutual aid, communities take on the responsibility for caring for one another, rather than forcing individuals to fend for themselves, or for government assistance, which has unfortunately proved to be an unsustainable lifeline in desperate times of need.
Rather than centralized organizations where one person is giving to another (effectively creating yet another dependent relationship negotiating access to material resources), mutual aid creates a symbiotic relationship, where all people offer material goods or assistance to one another. Mutual aid organizing is volunteer-run, transparent, and driven by the needs articulated by community members - all values my research found donors to charity highly regard.
Put simply, allies want to make a meaningful impact where it's needed most, and mutual aid organizations are a noble and mighty vehicle to drive such impact. Be the Change is the marriage of these harmonious truths.
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.
In-depth research into similar virtual tutoring platforms provided the following insights on existing products:
• 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
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.
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.
.png)
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 two critical task flows: “book a tutoring session,” and “create and edit a note for a student.”
Tutors often used multiple tools to keep track of meaningful notes on their students, from special learning accomodations to updates on their progress.
Borrowing design patterns from popular note taking apps, I designed a powerful UI that allows tutors to catalogue, track, and create notes on their students.
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.
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.
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
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
I conducted 6 A/B tests, presenting participants with 2 different versions of the dashboard.
Both versions included added functionality in the calendar, allowing users to schedule and view sessions directly in their dashboard view
• 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.
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.
