Type: Mooc E-Learning Website
Duration: 2020
Context: Startup Company Project, MOOC E-learning Video Website,
Role: UX Researcher and Designer
Check the clickable prototype:
https://www.figma.com/proto/MNg8zNC8CVYMoPMRhusLdZ/ReaLearn?node-id=7470-1378&scaling=min-zoom&page-id=5191%3A654
Define Problem
Industry: MOOC Website
Example：
Watch video - MOOC website
Take notes - Notebook
Discussion - Slack
Check answer - Google
Review PPT - Dropbox
Finish class - MOOC website
Discussion - Slack
Check answer - Google
Review PPT - Dropbox
Finish class - MOOC website
etc.
Final Delivery
1. Use live chat feature in the learning video, which helps students to better understand the class content.
2. Get the instant respond for the assignment, which helps to comprehensive the answers and key points.
3. Finish your Learn, Test, Discussion, Review all in one page. Flatten the learning process.
Discover
User Interviews
I manage to guess my friends and colleagues learning habits by observing their behavior, and then choose four target users to have one-on-one interviews. Through questions about who, which, what why, I understand users' situations, behaviors, and needs.
Finding 1: Users are usually attracted by website reputation, course price, course context, study situation, etc.
Finding 2: It occurs a lot that many people have difficulties finishing the whole course. Not only about the website design, it's also about users' determination and resolution.
Finding 3: There is a big percentage of MOOC users are looking for career development and breakthrough.
Prioritization Matrix
Based on the brainstorming, I draw the prioritization matrix about the key feature the project may need, including: assignment upload, live comments, class chat, PPT review, write & download notes, live video class. Keep the high essential and low effort features as MVP(Minimal Viable Product).
Key Features:
Assignment upload
Live comments
Class chat
PPT review
Competitors Analysis
I draw the four-quadrant diagram based on analyzing the profession and course difficulty among 5 different Mooc websites. It's not hard to see that, the more professional the platform is, the more difficult for the users to finish learning.
The competitors analysis is focusing on 5 pages: Home, Searching, Course Information, Learn, Personal Account. I try to learn the advantages and disadvantages by observing the website framework and structural logic.
Develop
User Flow
This structured flow allows users to access course materials, gain knowledge from videos, participate in discussions if desired, reinforce learning through assignments, review slides for revision, and conclude the class.
Card Sorting and Sketch Screens
In this phase, the key point is to arrange the content of each page.
Home: This is the main page in charge of attracting users. Based on the user research, it should have Website Reputation, Course Price, Course Context, Study Situation, etc.
Search: It should layout the courses' Searching Result clean and clear, with the functional Filter to choose the course.
Course Information: On this page, it has Course Introduction, Course Price, Classes Content, Teacher Background, and Course Comments.
Learn: According to the user flow, the page layout should be the same with using habit. The order is Video, Assignments, Discussion, PPT Review.
Personal Account: In order to communicate easily, Notification is the most active section on this page. It also has Courses You Buy and Courses in Your Cart. Because this page is related to consumption, it also has an ADs section to promote purchasing.
Bullet live comments design
In our analysis of video layouts, we have strategically positioned the bullet comments on the right side of the screen. This deliberate placement ensures that the comments complement the video content without obstructing the main visuals or distracting learners from the primary learning materials.
By having the bullet comments on the right, learners can simultaneously access additional insights, questions, and discussions from fellow learners.
Low Fidelity Prototyping
We add some visual attributes based on hand-drawn sketches, key elements of the content, and interactive effects for important components.
High Fidelity Prototyping
ReaLearn is designed for individuals who want to improve professional skillsets in their spare time. It has several main pages: Home, Search, Course Information, ReaLearn, Personal Account.
The highlight for this website is on the ReaLearn page. It compresses the functions of Learning, Test, Discussion, and Reviewing Slides all in one. By smoothen the learning curve, the completion rate will increase. Therefore, students raise the satisfaction of the website.
Check out the clickable prototyping
Outcomes
Prototyping Testing and Iteration
Our high-fidelity prototype for the e-learning website received positive feedback from all three testers during the usability testing.
They praised the intuitive layout, seamless navigation, and engaging placement of bullet comments. The visual hierarchy and user-friendly interface were also highlighted as strengths, contributing to an exceptional learning experience. With this validation, we are confident in the effectiveness of our design approach and excited to deliver an outstanding educational platform.
Design System Styleguide
Logo
The logo combines two letters "R" and "L" to emphasis the brand ReaLearn. It also shows the most special feature for website is adding live comments while watching videos.
Color
We're combing a bright activating blue and another subtle light ones. Thus creates visual tension with friendly and cool tone.
Typography
Studying online requires digging through a lot of information. By using Inter sans-serif fonts, we're reducing the visual buzz for our users and are contributing to an approachable look and feel.
UI Elements
Input fields, labels and buttons are designed generously in terms of size to allow for high usability. Their appearance is still subtle by using thin, medium-grey lines.
Reflection
The ReaLearn project achieved several positive outcomes:
1. User-centric approach: Throughout the project, we prioritized the needs and experiences of online learners.
2. Iterative design process: We kept iterating on our product based on productivity and user feedback.
3. Collaboration and teamwork: As a small team, we fostered a collaborative and supportive work environment.
The ReaLearn project faced challenges and ultimately did not succeed due to the following reasons:
1. Unclear business model: We identified two major pain points for online learners, namely ability and motivation. This lack of clarity in our business model limited our capability to deliver a comprehensive solution.
2. Lack of experience in business operations: Our team lacked the necessary experience and expertise in running a business. This included challenges in securing venture capital funding and expanding our team.
