A vibrant social & educational platform for Masterclass.com users
Overview
Roles: UX + UI Design, UX Research, Usability Testing
Tools: Figma, Lookback.io, Illustrator, Photoshop
Case Type: Solo Conceptual Project
Main Format: Mobile Website
SUMMARY
Masterclass.com is an e-learning platform with a unique core product: courses of the highest production quality. My task was to discover a new Masterclass feature that provides a unique and engaging experience for their users.
The Challenge
My research revealed a common e-learning problem: E-learning is a solitary experience.
Also, the solution has to be compatible with all of Masterclass’ existing and future courses.
How can I solve for both of these issues?
The Solution
Classmate: a social-educational website where users discuss courses, work on projects as a team, and forge new connections.
This solution improves engagement, increases retention, and attracts new users, while maximizing the value of their spectacular courses.
RESEARCH
E-learning has made knowledge accessible to millions, but learners have become isolated from each other by design.
E-learning offers many advantages and has become widely popular, but at the expense of human connection. E-learning is solitary since most platforms exclude social or community features that are common when learning in-person. And this is happening during an epidemic of loneliness in America.
-
![]()
Millions of e-learners use the same platforms daily, but have little or no ways to interact with each other
-
![]()
Half of U.S. adults report experiencing loneliness, with some of the highest rates among young adults.
-
![]()
Asking questions & forming friendships are common when learning in-person but rare in e-learning
When I Interviewed e-learning users, and especially when discussing the negative side, every participant had complaints about having no community or social features. Users wanted to ask questions when stuck, to get support from peers, to get feedback about the content, and so on.
Participants wish they could interact with users while e-learning
-
![]()
"I like to work alone, but I want to be able to seek help from other students when I need to"
Participant Alice
-
![]()
"In an art course, I want to be able to share what I've created, and share feedback with artists"
Participant Estella
-
![]()
"First I see if I can figure it out on my own. When I'm really stuck, I need to ask for advice"
Participant Jersen
This became a focal point for this case study. It’s common to make friends at school and work, since people are sharing the same goals and challenges. This is virtually non-existent in e-learning!
To confirm this discovery, I performed a competitive analysis among major e-learning platforms.
Click image to expand
These companies cater to a defined target audience, and spend millions to attract millions of users with shared interests into the same site. These users come to learn, to dive deeper into a hobby, to be inspired by instructors… and yet, users never interact with each other or with any person.
E-learning platforms lack social features for users to meet, inspire, and work together
This reveals an opportunity: users want social interaction around their e-learning content. Thus, my solution is to create a social-educational community website for Masterclass.
This solution would attract new users who’d like to try a social way to e-learn, and would encourage Masterclass users to re-experience courses with a new dimension.
With these findings, and considering our user’s needs, a persona was created to guide our work.
Click image to expand
STRATEGY
The goal is a safe, trustworthy platform where users discuss course content and bond over common interests.
Creating social features must be done carefully. It needs to incentivize positive interactions and deter negative behaviors, which is a common issue for any social platform. With these constraints in mind, I defined the project goals and MVP features for our social and educational platform.
Click images to expand
Why would users join a Masterclass social community? Because it’s centered around their award-winning courses.
Masterclass users who’d like to dig deeper into a subject with their peers should be able to do so - in a centralized and structured place. Existing social media sites often have vast amounts of content competing for attention, and this isn’t ideal for an educational setting.
However, social learning isn’t for everyone. This is why our community was created as a separate website from Masterclass. Our new community will have it’s own site to form and grow, while the Masterclass website and app are kept separate. Eventually, the social site can be merged into Masterclass when there’s an acceptable amount of user interest and proof of concept.
Research Lessons Learned
As I analyzed results from a card-sorting test, unfortunately, the data produced was unusable.
I gave my users freedom to create and name their own categories, and the results were very different from one user to the next. The goal of this test was to discover patterns in user logic, but the chosen setup did not produce any pattern.
This step was a learning moment that allowed me to internalize and learn three insights:
-
![]()
Setting up research properly will save you time, money, and headaches.
-
![]()
Larger participant sample sizes can reveal patterns that small sample sizes cannot.
-
![]()
If card-sorting with small samples, pre-name groups for consistent results.
If I had more time, I’d re-run the card sorting activity applying the lessons learned. I ended up choosing the site architecture based on external research, but not based on data generated by my tests.
Lessons learned indeed.
Below is the chosen site architecture, along with user flows defining functions to be tested by prototyping and usability tests.
Click images to expand
DESIGN
Our community will be built separately from Masterclass, but it’ll be visibly associated through it’s branding and UI.
The Name
This community needed a name that would explain what users can expect: experiences centered around being part of a group discussing Masterclass.
Classmate was selected, since it echoes it’s inspiration source and shares initials: Master Class ≈ Class Mate
CLASSMATE
The Look
Masterclass uses a dark theme for with red-ish accents, and has clean, slick visuals that give it a sense of formality and boldness.
Inspired by Masterclass, I opted for a a dark theme with my own twist. Oranges replace reds as highlight colors, being close to reds on the color spectrum, and providing our community with an energetic, vibrant, and sociable feel.
CLASSMATE
The Feel
Our users should feel excited towards meeting their peers, forming new connections, and learning about their favorite subjects socially!
Masterclass has a serious feel that works for a learning environment. Classmate should have an inviting & exciting feel, open to new experiences.
Masterclass Screens
Classmate Screens
Click to expand
Classmate is the hallways and courtyards outside of the lecture hall, where students discuss, organize, and mingle.
The central functions of Classmate are about social interaction centered in Masterclass courses, so the MVP features that were chosen to be designed for a prototype are:
Creating an account (with option to use Masterclass login)
Registering for a live discussion of a class
Inviting a friend to join the live discussion
I imagined many features and ways to interact in Classmate, but these three will serve as proof-of-concept, and show a starting point to discuss how the website might be developed.
Prototype
This limited prototype was prepared with Usability Testing in mind, so intuitiveness and familiarity in it’s UI were key. The tasks it can complete are:
Account creation and login
Enrolling into a live discussion
Inviting a friend to said discussion
USABILITY
Testing confirmed an intuitive and useful interface, and users expressed delight about this concept becoming real!
After our prototype was completed and tested, our usability tests received mostly positive feedback. It opened up talks about potential features, things users have seen in different social websites, suggestions on what to create next… It got users excited!
-
![]()
“The site was highly intuitive and easy to navigate!”
Ivan R.
-
![]()
“I loved being able to invite friends to group activities”
Kal G.
-
![]()
“When will it be available in the app store?”
Martina C.
Despite positive feedback, one tester’s insight on a specific feature left me no option but to remove the feature.
I borrowed a idea from an eCommerce site that makes users send a picture of their government IDs in order to verify their identity. The intention was to provide a sense of safety and accountability for Classmate users. However, a tester did not like this feature and told us why:
Many users can’t obtain a US government ID for legitimate reasons - asking for ID verification is akin to gaktekeeping!
We all have blind spots in life and in web design. We can overcome these by listening to our peers and valuing their perspectives. With this knowledge, it seemed immoral to let the ID check remain.
Thanks to this participant, our site is more inclusive than it was before.
REFLECTIONS
Every challenge faced in this project was solved by empathizing deeper with users or stakeholders. This is why the UX design process creates well-designed products.
Having gained so many insights into e-learners, I hope to see a real product similar to Classmate: a community that alleviates the e-learner’s common feeling of solitude.
