SaaS Learning Platform Design

Description Students Hub is a platform where all of a student’s courses are collected in one place. It allows convenient organization of lessons, completing assignments, and receiving feedback.

Goal To combine the entire learning process of the student. Convenient organization of lessons, assignments, notes, and time planning helps avoid confusion between different tools.

User interviews Goal: to hear past experiences, problems, motivations, and fears of students during learning, in order to determine the future functionality of the platform based on this information.

Students want to have all learning materials, assignments, progress, and schedule in one place.

Motivation is supported by progress visualization and clear planning.

Clear deadlines help organize time and motivate to complete tasks.

The main difficulties for students are information overload and the lack of a clear course structure.

User survey Goal: to gather general information, quantitative data, and find out which services students use during learning.

The desktop version of the platform is more important, but the mobile one is also a useful addition.

Students often use different applications for learning, among the most popular: Zoom, Telegram, Notion, and YouTube.

Students spend a lot of time switching between apps, which complicates learning organization.

Video is the most convenient format for perceiving learning information.

User personas and stories Goal: to identify and structure the main user needs and define the main user types.

We have many types of users with different needs.

Among students, there are those who have extensive experience using gadgets and platforms, and those who do not.

Students need structured knowledge and an organized learning space.

They also need help with time management, as they often forget about deadlines.

Competitor analysis Main competitors: Coursera, EdX

Goal Analyze functions, identify strengths and weaknesses of competitors. Go through the path from registration on the platform to completing a homework assignment to understand the platform’s functionality.

The course has a clear structure where lesson and test dates as well as task statuses are visible.

Students can add notes from transcripts or summaries.

The platform offers a chatbot that helps students solve technical or learning problems.

The platform does not have a single dashboard, which complicates the overall organization of the learning process.

The platform supports integrations with popular tools such as ChatGPT and Google Translate, which expands functionality.

After completing lessons, students can immediately discuss the material with others in a special community.

Students can set learning goals and track their achievement.

The platform design is not modern and convenient, so it requires improvement for easier navigation.

Sketching ideas The main focus was on the core screens (Homepage, Course page, and Lesson page).

Goal At the sketch stage, the main functionality of the platform and the features that could make the product unique were developed.

Homepage It should be multifunctional to cover all the main needs of a student. On it, a student can:

quickly go to the last lesson;

see their assignments;

learn about upcoming online lessons.

Course page Created for easy navigation and content structuring. Information is divided into sections by importance:

Assignments and lessons (most important).

Curriculum with key dates and details.

Progress of all students and notes.

Lesson page Designed to provide maximum convenience for the student. Its structure consists of two main parts: video and information sections.

easily complete homework without being distracted from the video lesson.

quickly record important information in notes.

Moodboard collection At the moodboard stage, I collected references to form the visual style of the platform.

The moodboard helped to determine:

visual solutions that will make the platform stand out among competitors.

interface elements that improve usability.

analysis of design trends to make the platform modern and attractive.

Wireframing I made sure that the key content was easily accessible: students immediately see assignments, progress, and upcoming events. For quick iteration, I started with black-and-white wireframes, focusing on structure and interaction logic.

Maze test Goal: to learn about user behavior in situations:

When a user left the platform without finishing a lesson and needs to quickly return to watching it.

When a user completed a course, left the platform for some time, and later needed to read notes from the completed course.

When a user watched a lesson but did not complete the homework and needs to find it.

In most cases, students find the last unfinished lesson and quickly return to viewing it.

Students found course notes, but they went through many steps. The success rate was quite low because students were not sufficiently familiar with the platform earlier, but most still found the shortest path.

The task board was successful, and students easily found the needed lesson.

Final prototype The prototype is divided into flows, separated into two categories:

Active learning: Dashboard, Courses, Course, Lesson.

Start of learning: Onboarding, Dashboard-start, Courses-start, Course-start, Lesson-start.

Design system I created a design system for the web platform to ensure convenient use of all components, easy scalability, and visual consistency of the interface.