StuddyMo: How to build an online education platform. UX/UI case study. Designing complex solutions like a Pro

Challenge

To create a clear, user-friendly online education service in the shortest terms. It should serve both State Universities, which courses may be unavailable publically, and for companies or freelance tutors with open for sale courses.

Solution

A web platform for placement of different types’ courses and tracking the education process, which depends on the education type and user’s role.

Duration / Tools / Team

600 hours / Figma / 2 UX/UI designers

Fig.1 — StuddyMo Platform screenshots.

Market Research

Due to the Covid-19 pandemic and lockdown periods, the education process switches to the online mode for halftime or even 100% of the time. Here are some numbers about market expectations and learners’ preferences:

• 63% of American high school students use digital learning tools daily / Source: Statista;
• 39% of American undergraduate students consider online college-level education to be superior to classroom learning / Source: Statista;
• An annual growth rate of 29% is projected for the global MOOC (Massive Open Online Courses) market from 2020 to 2025. This makes it the quickest growing market in education. / Source: Mordor Intelligence;
• In 2019, the global MOOC market was valued at $5.16 billion. By 2025, the global MOOC market size is expected to reach $21.4 billion. / Source: Mordor Intelligence;
• 44% of learners who use MOOCs have a postgraduate degree. / Source: Guide2Research;
• Every dollar invested in online training results in $30 in productivity. / Source: Elearn2Grow.

Competitive Analysis

We researched 13 education websites on navigation and features issues.

It occurred, that part of them has an overcrowded design, so it’s quite complicated to distinguish essential screen points for further user flow. This is especially true for navigating within the course.

Also, we noticed, that the user’s progress in education and essential tasks, that have to be done as soon as possible, are usually not reflected in the interfaces in a proper way. This could better motivate the learner.

The client had his vision of the future product’s features, described in the Specification. But thanks to competitive analysis doing, after browsing through all online education stages, we proposed some new platform features to the client. One of them was different course plans targeted at experienced learners and beginners, as well as on those who value time more than money.

Fig.2 — Some of the analyzed competitors.

Roles of Users. Data Model Diagram

The complexity of the future platform was obvious for us, so in the next step, we focused on detailing the data for the user flow creation.

First of all, we identified the main roles of website users and their variants:

1. A Teacher

• The Freelance Teacher
• The University Teacher
• The Teacher's Assistant
• The Head of University Department
• The University Rector
• The University Supervisor

2. A website Manager / Administrator

3. A Student

• The University Student
• The Freelance Student

The case is also possible when the same person may use this website as a teacher and a student.

For better information structuring we described particular role or education process elements attributes. As the result, we systemized them in the Data Model Diagram:

Fig.3 — Data Model Diagram.

We fixed a lot of differences are in the education process of University teacher courses, which are for the groups of students, and freelance teacher courses for one student or several ones. They are in the learning process organization, types of lessons, schedule creation, course advertising, etc.

User Story Map

Before starting a User Flow creation, we’ve made a User Story Map. The aim was to detail the user’s steps when the main types of users are fulfilling specific goals. At that stage, the differences between user flows of freelance and university teacher/student became even more clear. These are some of the varying ways:

• to join the platform (e.g., a university teacher is joining by the University platform supervisor — he prefills most of his profile mandatory data fields. At the same time, a freelance teacher should give all the proofs about his personality and qualification level by himself, including video message about his communication specifics);
• to work with the course (e.g., a freelance teacher doesn’t need a grade log, because he doesn’t need to control student attendance and strictly evaluate their knowledge), etc.

Fig. 4 — User Story Map.

Also, at this stage, we decided that we would use only a few entities for all types of platform education processes. They are the lesson, the unit (several lessons), the course (it may consist of lessons and/or units), the plan (a course, scheduled for one student or a particular group of students). These entities may vary by their characteristics sets. So a test, homework, consultation, exam, online or prerecorded class, individual class, etc., are the lessons with a different set of attributes.

As for the students, they may be united into groups (in University/Organization or freelance teacher case) or study the course individually (online with teachers or by themselves). We called a group of students with their teacher on the course a team.

User Flow

All the data we systemized earlier, helped us to create User Flow with a pinned detailed description of every screen content. This User Flow appears to be mixed with wireframes and low fidelity prototypes. That saved us a lot of time because we had to deliver the prototype on a very tight schedule.

Fig. 5 — A part of the User flow.

As we already have had the whole picture of how the platform should work, we decided that it’s quite possible to start prototyping at the same time with UI design. But before this, the UI style had to be defined.

UI Style Guide

We chose the UI Style Guide, which is based on Material Design and includes the Typographic Scale (font styles, sizes), Color Palette (primary, secondary, and accent colors and their shades), and Elevation. Vivid, clear colors and strict, well readable, but a little bit playful font Fira Sans supposed to create the good learners’ mood.

Fig. 6 — UI Style Guide.

Prototyping

We started prototyping from the most visually significant page — Landing/Home Page. Platform screens are expected to be very loaded, so we used the classic 12 Column Layout Grid with 24px gutter for a more flexible design.

Fig.7 — Home screen for unlogged and logged user.

As soon as the customer approved the style, we began prototyping the rest of the screens. But at first, it was very important to design the right and clear navigation system.

We decided that the 3-level Figma navigation scheme fits our project the best way: global navigation through the site with quick access to notifications, wallet, etc., and additional two levels on the Dashboard, on the lesson/course pages, etc., when on the left side menu you choose the vertical level of detailing (such as University/Organization, course, plan, student), and on the top menu you may filter what do you want to see on this level.

Here are some of the screens which we’ve delivered.

Fig.8 — University Teacher’s Dashboard: primary tasks (the left screen) and courses info.

Fig.9 — University and Freelance Teachers’ Dashboard.

Fig.10 — Lesson content creation.

Conclusions

When doing a complex, large project, data detail becomes especially vital. Till you haven’t done it, the project seems to be a big monster and you constantly are afraid to forget something. Data detailing helps to understand deeper the project workflow.

That further allows you to unite some design stages in User Flow. So you may save a lot of time for the customer, especially if he needs it hard.

We hope this article was helpful to you. To know more about how we work, please schedule a call.