Designing Both Sides of an Online Learning Marketplace.
Etomon was an early-stage startup that is no longer operating
Primary Role:
UX/UI Designer Intern
Timeframe:
2020 - 2021
Executive Summary
Etomon is an e-learning platform that connects teachers and students in different countries for live, personalized classes. Both sides, teachers and students, were full of bugs from outdated code, so the development team rebuilt the platform from the ground up in React. I used that rebuild to redesign how teachers create a course and how that course is presented to students on its homepage.
Company Size:
10 (early-stage startup)
Industry
Online Learning Platform
Background
The teacher side is the supply side of the marketplace
Etomon was an early-stage startup with a very small team. Its online learning platform was still in development and was slowly onboarding its first users. The platform had two sides: teachers who set up courses, and students who book classes with them.
That made the teacher side the supply side of the marketplace. If teachers couldn't easily create good courses and manage their time, students would have nothing to book. And if students couldn't easily find a course and understand it, good courses would go unbooked.
The Problem
Outdated code, and a chance to rethink the whole interface
The teacher side of the screens had numerous bugs due to outdated code. The team chose to rebuild in React, and because the UI was also dated, this was a chance to rethink the interface with a modern look, better usability, and new features for both teachers and students.
On the student side, the goal was to make the platform easier to navigate: find the right course, register for a class, and manage a schedule in a cleaner, more intuitive interface.
My focus: how teachers create new courses and how those courses would appear to students on the course homepage.
The Goals
Understanding the goals
Etomon was a small startup rebuilding its platform, so we needed a clear understanding of the goals before designing.
Business Goals:
-
Support the React rebuild with a modern, more usable interface.
-
Grow the supply side of the marketplace by making it easy for teachers to publish courses.
-
Provide a simple and intuitive class managing experience.
-
Ensure consistency across the platform
-
Reduce Cancellation rate
User Goals:
-
Easily check & manage class schedule
-
Enjoy a 1-on-1 teaching and learning experience
-
Feel a sense of achievement after finishing a class
Design Goals:
-
Make creating a course feel guided, not overwhelming.
-
Give teachers full control of their own availability.
-
Put everything a teacher needs to run their day in one place
-
Make searching for classes easy for students
-
Make the information hierarchy clear for students when viewing a course
The Process
Structuring both sides of the experience
Teacher account
Course page, Schedule, Upcoming Classes, Profile, Account Balance. Course page leads to Create a course; Upcoming Classes leads to Start class; Profile leads to Edit profile. Course page, Schedule and Upcoming Classes were the critical three.
Student account
Homepage, Search results, Course detail, Payment, Courses, Profile. Course detail leads to Enroll; Payment leads to Confirmation; and Courses leads to Course history and View receipt.
Sketches, tested internally, before moving to mid-fidelity
1. Paper sketches
I sketched concepts by hand, including step-by-step flows for onboarding and course creation, plus a mind map of what a course needs. Paper let me compare directions quickly and test them with the internal team before investing in wireframes.
2. Mid-fidelity wireframes
I translated the stronger concepts into mid-fidelity wireframes of the Create Course flow, including a left-hand step navigation, course details, and photos and videos. These tested whether the ideas worked before any visual design.
3. Feedback loop
Every round was tested with the internal team before decisions were locked. Annotated sketches show how feedback changed the flow.
The Solution
Teacher Side
From creating a course to managing it
Create a course
Teachers pick a course type that best fits, add the course mission and objectives, add photos, and set the price and duration. A step navigation on the left shows where are in the flow.
Add photos and videos
Teachers add photos and videos to make the course engaging and attract students. Media is treated as its own step, so it isn't forgotten.
My courses
Courses are split into Published and In Progress. Drafts show progress with an encouraging "You're almost there!" prompt, and teachers can preview before publishing.
Creating a course
Student Side
Where the students decides to enroll
Course homepage and course page
The course a teacher builds becomes the page students use to decide whether to book. I designed the course homepage and course page, with a large image gallery, key course facts, course objectives, and the teacher's profile.
Where the flow leads: class schedule
After booking, classes appear on the "My Classes" screen, which shows a weekly schedule. From there students can enter to start the class.
Homepage
Course Page
Design System
Extending Etomon's existing style guide
Etomon had an existing style guide, so I extended it instead of starting over. I designed most of the icons, button styles, toggles, checkboxes, and radio buttons. The palette builds on the brand greens (#19A58E, #148572) with coral (#FF5849) and plum (#851460) accents.
Reflection
Balancing user needs with leadership
One of the hardest parts of this project was balancing user needs with strong, deeply held opinions from leadership. Our CEO was highly involved in the design process and often had a clear vision for how something should look or work, even when it wasn't necessarily the best choice for the user.
What this project taught me
-
Designing for both sides: what a teacher enters is what a student sees, so the two flows have to be designed together.
-
Advocating for users: I learned to make the case for the user while leaving room for leadership's vision.
-
Working with a team: Feedback from the team shaped my ideas until they were ready for handoff.
-
What I'd do differently: I wasn't invited to the calls with teachers and students, so I worked from the personas and findings the team shared. I would have asked to join those calls early, so I could hear directly from teachers and dig deeper into what both teachers and students need.