SaaS Learning Platform Design

Students Hub is a web platform where all a student's courses live in one place. Lessons, assignments, notes, progress, and schedule - no switching between different tools.

The goal was to bring the entire learning process into one space. Clear course structure, visible deadlines, and organized materials help students focus on learning rather than finding their way around.

Goal: hear about students' past experiences, problems, motivation, and concerns during learning - to define the platform's future feature set.

Students want all their materials, assignments, progress, and schedule in one place

Progress visualization and clear planning sustain motivation

Clear deadlines help organize time and encourage task completion

The main problem is material overload and the absence of a clear course structure

User survey

Goal: collect quantitative data and understand which tools students use while studying.

Desktop is the priority, but mobile is a useful addition

Students juggle multiple apps simultaneously: Zoom, Telegram, Notion, YouTube

Constant switching between tools takes up time and disrupts focus

Video is the most comfortable format for absorbing learning material

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

Some students are experienced with digital tools, others are not

All need structured materials and an organized learning space

Help with time management is a shared need: students frequently miss deadlines

Competitor analysis

Main competitors: Coursera, EdX

Goal: analyze features, identify strengths and weaknesses, and walk through the full user journey from registration to homework submission.

Clear course structure: lesson and test dates are visible, as well as assignment completion status

Students can add notes from transcripts or their own summaries

The platform offers a chatbot to help resolve technical and learning issues

No unified dashboard, which makes overall learning management harder for students

Supports integrations with ChatGPT and Google Translate

After lessons, students can discuss the material with others in a dedicated community space

Students can set learning goals and track their progress toward them

The platform design is not modern and needs improvement for easier navigation

Sketching ideas

At this stage the focus was on three core screens: dashboard, course page, lesson page. This is where the main feature set took shape and the product's distinctive elements were defined.

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.