• 2020.05-2020.11
  • Internship
  • UI/UX Designer
  • Figma
  • Design Team of 3
  • Develop Team of 4


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

Before designing this online education platform, our team divided the entire ecosystem into multiple small 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

Create interfaces that helps students find their favorite course and drive them to enrollment in simple a way.

Task #2: Payment/Checkout a course

Improve the experience for students to enroll & checkout a course during the payment processing.

Task #3: Become an Instructor

Design a complete workflow for instructor registration, verification and course publication.


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?


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

  • Study whenever & wherever you like
  • Industry recognized certification
  • For free
  • 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.


“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.


“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.


“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.



User Journey Map

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


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


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. Also, I talked about the possible ideas that I could include on the first prototype.

Initial Concept

  • Users can search courses according to the grade, subject, type and course code.
  • Popular courses are recommended by star rating and classified with subjects.
Results of Searched Courses
  • The basic course information is displayed on the results page, including tutors’ name and course details.
  • The course results are filtered by the price, star rating and location 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.
Profile Page
  • The timetable system is to help users to manage their class time.
  • Students can manage their enrolled courses.
  • Tutors can publish new courses and manage these courses.
  • Users can add their favorite course in the list.
  • Chatting function for users is to communicate with classmates and teachers.
  • Course process visualization.
  • Personal profile information editing and updating.


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?


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.”

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

“Course Description is clear but sounds like a robot. It is not engage to read long paragraphs merged together. It doesn't help me know how the course resolve my issues.”

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

“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.”

“Chat box is available on profile page only. However, I may need more clarification about course through chat before I enroll one. Good to have a chat link on the course page .”

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.

Task #1: Prototype

Search Bar
  • Users can personalized the search bar and only the courses best suit their expectations will be remained.
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 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, course descriptions and ratings, 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.
  • The user 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 accomplish, they can directly contact instructor and consult their classmates in the course group.


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 type of course has different checkout process. (E.g. One-time course only need to be paid once, but long-term section courses need recurring payments.)  Therefore, my second task is to improve simple, secure and worry-free checkout experience.


The idea is accepting a wide range of payment methods, including 3rd-party payment. However, just adding multiple payment options could introduce complexity to the checkout process. Besides, the price may be affected by other factors such as free trials & promotions. These courses and payments information needed to be display in a clear way. I sketched the workflow and defined which of the features were more fitting to resolve these problem.

Task #2: 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 here, explaining why phone numbers need to be verified, and that information will be used to receive class schedule notification.
  • The subscription information is displayed in a clear way.
  • Users enjoy 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 Details
  • Order Details on the right show course information, summary of the order contents and total cost as a useful reminder for user.
Order Success
  • After successfully enroll a course, users  are concerned about how to start the class. The button “Go to my classes” is added so that users are informed that at the next step they would be directed 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.


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 feature 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 next upcoming course.

Edge Case

The checkout is one of the most complicated process in the project. The possibility of error occurs likely increase here. For example, when users manually entered card information into a payment form, a typo error might creep in. I discovered that users were frustrated because of such errors and likely abandon their course enrollment. Therefore, providing a checkout experience for user as smooth as possible.

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 wont 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.


Task #3: Become an Instructor

After I completed the first 2 tasks, I diverted my sight from the student to the teacher's side. The design challenge is that the workflow of becoming an instructor was kind of confusing, especially for first time users. Therefore, this task aims to improve this journey for users to register as instructors, verify qualifications and publish their course on the site.


Before I jumped into proposing a new design, I tried to go through the instructor registration & course creation process and analyzed existing features. I collaborated with PM and evaluated qualitative data in order to know if other users feel the same as I did when they were trying to become an instructor.

Information Architecture

I found the most common issues users encountered are being unable to complete burdensome process, as well as not knowing where they are in the process without a clear indicator. These issues could cause users getting frustrated and abandoning a half-completed registration/course creation. Therefore, I optimized the information architecture to tackle those problems.

Task #3: Prototype

Basic Info
Your Education
Your Experience
Your Achievements
View Profile
Edit Profile
  • The first step to become an instructor is to create a good profile. I added tips to guide instructors make a knowledgeable, and approachable first impression to their target students.
  • Before, users get frustrated to take many steps and wary of uploading personal information. I removed unnecessary steps and I added more explanations to tell more about why these contents helps them get found and stand out.
Create Course
  • Once instructors complete their profile, they will be approved to customize their course by filling up course details, including name, type, description, price, calendar and images etc. to help students find their course.
  • Process indicators give users an idea of how many steps they’ve completed and what steps are still to come through course creation.
  • I improved the layout of course creation. I also add helper text (E.g. the maximum characters) to help users safeguard against possibilities of making mistakes before publishing.
Course Basics
What are we looking for
Audience and Yourself
Course Details
Price and Promotion
Service and Support
Upload Photos
Upload Video
Set-up Calendar

Other Mini-Tasks :-)

Follow-up Emails
  • In order to ensure teaching quality, instructors are require approval to publish their course. After Etomon review, we will follow up the application status by email.
  • There are different states. I took responsibility to deal with edge cases if instructors didn't get an instant approval.
  • If instructors being notified that their application is pending, the email will tell them don’t worry and inform what are actions required for application undergoes further review.
Video Guideline
  • Since more young users prefer to learn about a new course by watching a video, I pitched  a method that engage the instructors to better attract new students and ​gain the max enrollments by creating their video story & livestreams.
  • However, many instructors  don't have much experience on telling a story through video. Therefore, I did research and testing to resolve this issue, then produced a series of templates and help pages to guide instructors to create their video.
  • Later, many instructors had technical difficulties on editing their video. Therefore, I did research on video editing app for beginners and learn how to use these. Then, I compiled some tips and recommendations into guideline.
  • The methods had successful outcome and were further promoted by the team.
Planning Video
Preparing Shot List
Shooting Video
Editing Video Story

Responsive Design

The use of mobile devices in online courses was widespread. The web interface is designed that look good on all devices, since a sizeable group of learners expressed a desire to complete their course on a smartphone or tablet.