etomon

PROJECT
DURATION
  • 2020.05-2020.11
CATEGORY
  • Internship
ROLE
  • UI/UX Designer
TOOLS
  • Figma
TEAM
  • Designer: 3
  • Developer: 4

Overview

About Etomon

Etomon is a virtual education platform where users can access well online courses to acquire different knowledge and new skills. Additionally, it empowers instructors to provide their unique teaching experience in a large variety of subjects.

What I did

Our team divided the entire ecosystem into multiple design tasks for following sprints because of the large project scope and tight timeframe. I took main responsible for 3 of them:

Task #1: From Search to Enroll

Design and iterate the workflow that helps students find their favorite course and drive them to enrollment in simple a way.

Task #2: Payment/Checkout a course

Create the interfaces for students to checkout a course during the payment processing.

Task #3: Become an Instructor

Improve the experience for instructor registration, verification and course publication.

Research

User Survey

I need to learn about the benefits of e-learning and the reason why student opting for online education initiatives instead of traditional methods of learning. Therefore, I created research protocol and questionnaire asking users to talk about their e-learning experience.

  • What are the most important motivations you need to take online courses?
  • Which courses/subjects you often look for on e-learning platform?
  • How often do you use e-learning platform?

Analysis

With new technologies developments and instructional strategies, the online education continues to remain a steady rising trend both in the number of enrolled students and commercial marketing.

Competitive Analysis

Pros:
  • Study whenever & wherever you like
  • Industry recognized certification
  • For free
Cons:
  • Lack of supervision
  • Poor systematic learning
  • Limited range of subject resources

Target Audience

After analyzing, the main target users is aged 18- 35, such as students and technical employees and instructors.

Student

“When I face challenges within studies, I would like to seek help from others.”

Students need to easily find private tutors/teachers  in order to help their study.

Employee

“I cannot ensure the teaching quality of unacquainted tutors”

Employees need to make sure the quality of teaching in order to launch or advance their career.

Instructor

“I rely on educational agencies to find students. However, agencies would charge a fee.”

Instructors need to find student sources in order to increase their incomes.

Personas

ideate

User Journey Map

After research and analytics, I informed simple and institutive user journey map from student perspective.

Workflow

I sketched preliminary wireframes and workflows. Then, I presented my ideas and get critiques from the internal team review.

design

Task #1

From Search to Enroll

I illustrated my initial concept for this task to create an appealing homepage & course detail page that helps students find their favorite course and drive them to enroll it in as quick and simple a way as possible.

Initial Concept

Homepage
  • Users can search courses according to the grade, subject, type and course code.
  • Trending courses are categorized by subject and recommended based on star ratings
Results of Searched Courses
  • The basic course information is displayed on the results page, including tutors’ name and course details etc.
  • The course results are filtered by the price, location and star rating etc.
Course Details Page
  • Detailed course information is shown on the details page.
  • Students can enroll the course, appoint and contact tutors in this page.
  • After the enrollment, it is available for students to pay, drop, and rate the course.
  • The chatting feature allows users to communicate with classmates and teachers.
Profile Page
  • Users can edit and update their personal profile information.
  • The calendar helps users manage their class schedules.
  • Students can manage their enrolled courses and track their progress.
  • Tutors can publish new courses and manage them effectively.
  • Users can add their favorite courses to their list.

Iteration

User Test

The initial prototype aims to test visual aspects and usability of my design solution. I created a series of protocol and interview questions, then conducting multiple rounds of user testing.

  • How would you describe that experience from search a course to enroll it?
  • What features do you find most valuable, such as filter, search result card enroll button, contact and timetable?
  • What was significant about the interaction/interface to make you feel frustrated? What would you change? Explain why?

Feedback

After user testing, I gained an overall impression of the interface/interaction from users. I analyzed the feedback in order to make necessary changes to my high-fidelity prototype.

“I have to handle multiple actions before searching because too many filter options and they limits the scope of results out of the comfortable range.”

“Course Description is clear but sounds robotic. It is not engaging to read long merged paragraphs. It doesn't help me know how the course addresses my specific needs.”

“Separate the blocks of course description clearly and use more space to distinguish different sections of information.”

“It has low contrast between some interface elements, like course detail cards.  It makes these visual compositions hard-to-read.”

“The time conflict error is only indicated by using color on the timetable. There is no actionable feedback to ease the process for a correct entry.”

“Good to have a chat box on the course page because it helps me to get help and clarification about the course whenever needed.”

Style Guide

In order to minimize visibility issues and improve aesthetic & consistency of design, I followed and maintained the established Etomon style guide with comprehensively annotated design specs to create high-fidelity prototype.

Prototype

Search Bar
  • Users can personalized the search bar to discover courses that best suit their expectations
Live Streaming
  • 83% of users prefer to watch short informational videos, that engage potential users to make a purchase.
Special Offer for You
  • This special offer design recommend students to get best-advanced course.
Students at Etomon are saying
  • The real opinions written by students are always the best informative advices of a course.
Filter
  • Filter can help students navigate their course options and make a decision.
  • The user can filter the courses according to specific group, course type, level, language, price, location and time.
Course Details Cards
  • The user can see the short but crucial details, such as photos and course descriptions that allow students to find their favorite course quickly.
Course Detail Page
  • Course detail page contains useful course information, including key objectives, course mission, learning experience, required knowledge and what to prepare etc.
  • Users can read course information and reviews for increasing the level of understanding and trust towards course.
Enroll Class
  • Course type, date and price are clearly labeled, helping to convey basic information about the course to users.
  • Also, promotion and how many seats left are highlighted in order to draw attention and help users to enroll the most suitable course.
Chat with Course Group
  • If users need a better understanding of what course can offer, they can directly contact instructor or consult their classmates in the course group.

Design

Task #2

Payment/Checkout a course

After users enrolled, they need to checkout their on-demand course. The platform offers 3 different course types and each with a different checkout process:

  • One-time Course: only need to be paid once
  • Long-term Courses (Section & Workshop): require recurring payments

Therefore, my second task is to improve simple, secure and worry-free checkout experience.

Workflow

The idea is to accept a wide range of payment methods, including 3rd-party payment. However, simply adding multiple payment options could complicate the checkout process.

Besides,  the price may be affected by factors such as free trials & promotions, making it essential to display payment information clearly.

I sketched the workflow and defined which of the features were more fitting to resolve these problem.

Prototype

Payment Methods
  • Users can select payment methods on the clear menu, while providing alternative options like Google Pay to save their time.
  • Enabling users to easily complete checkout process with the minimum of form fields.
Phone Verification
  • Useful microcopy is provided to explain why phone numbers need to be verified, and that information will be used to receive class schedule notification.
Order Details
  • Order Details on the right show course information, summary of the order contents and total cost as a useful reminder for user.
Subscription
  • The subscription information is displayed in a clear way.
  • Users appreciate the convenience of recurring payments because it reduces effort associated with repeated checkout processing.
  • Make cancel option as easy and transparent and as possible, aiming at building trust with the users.
Order Success
  • After successfully enroll a course, users are concerned about how to start the class. The “Go to my classes” button is added, informing users that clicking it will take them directly to the online classroom gateway.
  • User can click download Zoom to quickly start their course. If users need further support, they can always visit our Help Page.

Edge Case

The checkout is one of the most complicated process in the project because the likelihood of errors increases here. For example, when users manually enter card information into form, a typo error might creep in.

I discovered that users were frustrated because of such errors and often abandon enrollment. Therefore, I focused on providing a smooth and error-free checkout experience.

Error Prevention
  • Error messages with light red color will be shown in context
  • Error messages will be shown right after the user has clicked out of the field, so users are able to know as soon as they make a mistake
Pop-up vs In-page Notification
  • When user fill in the form, using in-page notification is more effective, as the user won't have to recall or locate the source of the errors
  • However, when the order has been timed out or the timeslot has now been enrolled by others, pop-up windows is a better way to warned users that they were about to leave the current site

Post-order

User experience wouldn't end after they've complete checkout process. By contrast, we should give clear instructions to users on the next steps in order to ease their potential concerns.

Order Confirmation
  • After users place an order, they will received a receipt which contain order details, such as course information.
  • Users can check the receipt to confirm their course order.
Next Step
  • Message is provide to create instant connection between the student and instructor.
  • The newsletters also give instructions to help user understand what needed to prepare and set anticipation for upcoming course.

Responsive Design

The use of mobile devices in online courses is widespread. Since a significant number of learners expressed a desire to complete their courses on smartphones or tablets, the responsive design ensures a seamless experience across all platforms.

Next Project

Etomon•Become an Instructor

Etomon is a virtual education platform where empower instructors to provide their unique teaching experience in a large variety of subjects.

View >>