Etomon
Etomon, an online education website engaged in helping every student and learner get knowledge fairly and efficiently. Etomon provides more opportunities for teachers who have prominent education experience and want to share their knowledge with others.
Type: Internship
My Role: UX Designer, Graphic Designer
Tools: Figma, Adobe XD, Adobe Illustrator
Duration: 3 months
Back story
When I joined Etomon, the company was in the early stage, with a team of 10-15 people. This is the stage where everything is still being tried. The founding team was in the process of financing and publicity, and the product team was creating the platform from scratch. To be honest, some functions and details of the product are incomplete, and there are new iterations after my dismission. But in the process of working, I created utility designs and learned a lot of ideas that can be applied in business.
My main job was to design the website interfaces for the platform. Including the home page, course interface, message center, video room, and other interfaces.
In the process of my work, I met some problems:
I was new to Online Education. I had no idea about this field and what were the needs of users. There was no detailed research in the early stages of the company.
The product did not have a complete design guide, and the design style has not been finalized
In the short term, the product team needs a well-functioning website to communicate with investors. I didn't have much time to polish the details
1.
For the first problem, the lack of user data, I hoped I could find out the pain points through the users in a short time, rather than by asking the company staff.
I asked my manager if I could have some time to interview the target users so that the information I got could be used by the group.
Because our team knows the clear target audience of the product, I decided to use the form of user interviews to understand the pain points and difficulties they encountered in the field of online courses. And the interview time will not be too long, which is an efficient research method for me.
My idea was approved by the product manager. She thought I could find three types of users to interview: students, teachers, and parents. These three types could cover all user categories for the product. Since Etomon is dedicated to serving users worldwide, the product manager suggested me find participants from different regions.
After discussion, we made the following positioning for the three types of users.
Student: 7-18 years old, studying in school or applying for a degree.
Teacher: 25+, engaged in or with educational experience.
Parents: 35+, with school-age children, relatively stable jobs, and incomes.
Research - User Interview
Research is an important part of the company to know more about users: teacher, student, and their parents. Due to the time limitation, I choose user interviews as a research method to understand target users. I interviewed a young girl and her mom based in China as the user of student and parent. And I interviewed a faculty who worked at Boston University as a user of the teacher.
Some problems I found from research:
Students want to communicate directly with their teachers and classmates, rather than through email or other social software.
Before deciding whether to buy a course, both students and parents want free trial sessions.
Students expect a detailed introduction to each lesson, rather than a general lecture introduction.
Teachers want the degree options to be prominently displayed to attract students to sign up.
2.
As for the design guide, I initiated a simple typeface and color palette for the company to standardize the design layout and elements.
3.
Dive into the stage of exploring features
Since our team didn't have time to polish and refine the UI, I worked efficiently to finish the design. After each discussion with the product manager on the completion of the low-fidelity diagram, we quickly entered into the high-fidelity design phase. Then I delivered it to the development team to produce.
After discussion, we have some ideas
1. I raised the idea to design a Chat Room feature for users to share their thoughts instead of using email. In Message, teachers could easily view the status of the student to answer their question specifically. Students could communicate with their classmates to share ideas in the class.
2. Highlight the degree of highly educated teachers on the homepage. Parents care about if their kids could have well-educated by online class, especially for their school curriculums. Present the degree of these highly educated teachers in the homepage recommendation part, and attract parents to explore their courses and register.
3. To avoid childish design, reduce the number of sketched illustrations. The course layout is more compact and organized. Use more brand green to increase the vitality of the interface, won’t let the young user feel dull. I also use bright orange to design the CTA buttons to attract users. To catch users’ attention, In the middle position of the video room screen, there is a countdown alarm and class opening date to remind users visually.
From my research, I decided to add the chat room feature after finding out the need to improve communication. I quickly set up the information architecture and basic framework of the chat room. Message List locates on the left side and Chat window on the right side.
At the beginning of the process, I didn't think about the function of Q&A.
The product manager asked me if I had considered Q&A as another communication feature, and I began to think about the relationship between Q&A and Chat Room.
Q&A is a feature of most online education platforms. Questions about the form and content of the course will increase students' understanding of the course and help them learn the knowledge better. So I think Q&A is essential.
I tried to distinguish between the two approaches. In order to focus on the interaction between the student and the teacher regarding classroom knowledge, I restricted the chat room to only those students who purchased the course. And every user can ask a question in the question box, and it's open.
Version I
In the first version, I didn't add detailed Student Information in the chat interface, because I could see their profiles by clicking on their avatars. But after I showed the wireframes, the teacher said that many questions were based on the student's current courses. If the information of students can be directly displayed on the interface, the teacher can see their class situation intuitively, and it is more convenient for the teacher to evaluate and measure the problems of students.
Version II
Landing Page
Here are some outcomes I'm proud of!
Showed complete interfaces and elements I designed to stakeholders to further promote business cooperation.
The website elements designed by me were added into the brand advertisement shooting, which made the online publicity and promotion better.
Take away:
Since the startup didn't have a mature product team, in the early stage of creating user flow, I can discuss some issues with the technical leader. They would give some suggestions from a technical perspective.
In the absence of a stable style for their products, sometimes the product manager would be attracted to some interfaces of other products on the market. Product designer needs to calmly analyze whether the market positioning of these products is in line with the style of their products and whether they can solve user problems through the reference.
What more I can do:
Make a more detailed and comprehensive design system. This includes brand colors, gaps, fonts, buttons, and elements.
Help users set up a personal information profile. In my opinion, this is a very important section. The profile contains Account information, Course history, and payment information. These contain many different forms of interaction and layout. How to present these content and elements in a reasonable and orderly way is the aspect that I need to explore more.