Online university for employees
The bigger the company, the more onboarding process matters — it’s important for adaptation and training of new employees. Our client is Alexey Platonov, the head of iZum, a chain of mobile phone stores. He wanted to improve the company’s onboarding system. They had a very simple service for online courses with raw design and basic functionality.
In summer 2020, Alexey requested us to build a high-quality online education platform where people could create courses. For example, courses on using Excel and making presentations, personal growth courses, mental health courses, etc. There would be several roles on the platform:
The client chose us because he’s, in a good sense, a design geek — and we specialize in UI/UX design. Geolocation was another factor that influenced his choice. The HQ of iZum is located in Omsk, so is our company’s office. Since the client wanted to work with ‘neighbors’ — we were the perfect match.
UVP and competitor research
After the first release, the system will be used only by iZum’s employees, later the product will be available for all users — the client plans to sell it to other companies. That’s why right from the start we researched other online education platforms: Coursera, Skillbox, and Skillshare. What we’ve got in common?
- audio;
- video;
- text;
- homework check;
- forum for discussions.
To stand out from competitors, we focused on UGC (User Generated Content) — employees can create their own courses for onboarding of newcomers. The courses are not only about work: people can share their experience in anything, for example, refinancing a mortgage or investing.
Course programme page
Also, any user of the platform can become an assistant and check other’s homework. To create a course, a mentor needs to: state what the course is about, what skills students will learn, and choose a category. Courses can be private or public, with or without forum discussions.
Here users can create courses — add description, materials, and set a price
We started with an MVP, so the project scope included UI/UX design and the development of the alpha version for internal use within the company.
We used Nest.js for the backend and Next.js for the frontend. Next is perfect for platforms that require search engine indexing — so that the platform is shown in the results to users’ search requests. We knew that the client planned to enter the online education platforms market with the product, so indexing was highly important.
The online education development team consisted of 2 UI/UX designers, 4 developers, a QA engineer, and a project manager.
Keeping achievements for later
As for design, the client asked us to use Airbnb as a reference. The accent color on the platform is orange with neon illumination on active elements and buttons — to resonate with Airbnb but not duplicate it.
Usually, we work in sprints. It seemed reasonable to do one role at a sprint, but since the roles were closely related and intertwined, we decided to move from the general to the specific:
- Authorization.
- Courses.
- Student pages: courses, lessons, calendars, profile.
- Mentor pages: creating courses, lessons, calendar.
- Admin pages: profile, courses, forum, calendar.
- Assistant role.
- Supervisor role.
As it often happens, at every Zoom meeting the client generated new ideas that ran far beyond the limits of the MVP. We kept all the suggestions in mind but insisted on working within the initial scope.
For example, we didn’t include the ability for admin to look through other users’ calendars in the MVP because of the deadline — it would have taken too much time.
Mentors add events to students’ calendars
We also cut down the system of achievements that would motivate students to study and assistants to check homework, because the logic behind it was complex and the client had no time to think it through. The task was left in the backlog, yet we already designed it so there won’t be any problem with implementing it later.
A role inside of another role inside of another role
We expected that it would be hard to develop the system of roles, and we faced a problem with this. If roles hadn’t interacted with each other and had ‘lived’ in separate accounts, it would have been much easier. But there’s one account for one user, and they can switch between different profiles. However, mentors, students, supervisors — all the roles have different abilities and access levels. So here was the problem.
There is a hierarchy of roles: admin has all rights, mentor has rights of students, and so on. Together, the roles can build something like a matryoshka: every bigger role includes the rights of the smaller ones.
The user can switch between roles right from the profile settings: just tap the button and choose what you need
Carefully chosen tech stack
The client had a product manager who helped him create a detailed project roadmap, which he shared with us. That way we knew about the client’s future plans on making the product public and offering other companies to place their courses on the platform.
It was crucial to choose the right technology stack. Of course, we could use our good old React. People online say that search engine bots (Google, Yandex, etc.) can index apps written in React but one of the past projects showed us that it’s not true. That’s why we decided to choose Next.js for the frontend. Usually, we don’t use it for corporative projects (internal, closed for the general public). But since the project would soon become public, Next.js was a great choice.
Unexpected pause and telephone games
Staff troubles were haunting us from the very beginning. The designer who started working on wireframes took a vacation and couldn’t provide all the design requirements to the new designer. As a result, the finished concept was in green colors.
As you remember, the client wanted us to rely on Airbnb, and there is no green in their color scheme. We decided to hand the project over to another designer, who managed to catch the spirit of Airbnb. This second concept was finished by other designers who made the design responsive, created UI-kits, and fixed some small bugs.
In the middle of the project, the development team along with the project manager caught Covid. As a result, we were behind schedule for a couple of weeks. When everyone got back in the game, we included two more developers in the team, to catch up.
Changing work processes
Design challenges made us think that we can do better. After that, we decided to reorganize the design system of our company.
On previous projects, designers worked alone and their capacity couldn’t be higher than 40 workhours a week. We used to start the work by creating a concept and only high-level mockups because it was convenient and effective. It was until we decided to try something new and see how a different process can affect the result.
Now we build a team of designers for every project — they share the expertise and insights with each other. The work is done faster because there are more people on the project 🙂 Now we start with mind mapping and creating a concept, prepare a mockup for devs, thus reducing the number of design bugs and paying even more attention to the concept presentation.
Against all odds
Despite Covid, we met the deadline. In January, 6 months after the start, we finished the first version of the online education platform for internal use. Employees can already create and study courses, do homework, and discuss tasks at the forum.
What we built is not just an MVP but a project that can be easily scaled without refactoring.
Now we are fixing small bugs that always appear after the release and discussing the next iteration. The client and his employees already test the service and collect feedback. It will help to define the next step in the development of online education. So far, this is the plan:
- Train the company’s employees.
- Offer the platform to other companies for their courses.
- Create a P2P-platform (platform with paid courses, open for all users).
