Clickable Prototypes

We designed the interface and information architecture, demonstrated the hierarchy of elements, their mutual arrangement, and semantic accents.

Example of Admin Dashboard Prototype

We configured interactivity and conducted UX tests on users to validate primary business hypotheses. As a result, we identified weak points in the design and improved the interface before development.

Palette and Contrast Points

We implemented a palette and color rules for the project, considering contrast. We also provided a palette for a dark theme.

Creating UI-kit + Element States

We created a UI Kit of core components with necessary states to ensure that frontend developers understand how the interface behaves and how it looks in various scenarios.

Component-Based Layouts

We assembled a dark theme using UI kit components and color palette. Thanks to the systematic organization of the project, designing a dark theme can take just a few days.

Every Page in 4 Sizes

We designed page layouts in 4 resolutions for different devices: desktops, laptops, tablets, and smartphones.

Page States

In the layouts, we anticipated the main page states depending on the context of use. Specifically, the page state when submitting homework, checking, and after the course curator accepts the results, etc.

Public Area Design

We implemented a course catalog on the website and emphasized color on target actions: going to the course page and making a purchase.

Support and Enhancements

We carried out numerous associated tasks: email templates, notification and hint texts, achievement list, promotional banners, etc.

MVP Development

We turned the school website into a SPA application, set up integration with the personal account, acquiring, and amoCRM.

Admin Panel

Administrators manage users, courses, study groups, and have access to system settings. The interface is adaptive, with the same functionality in the mobile version.

Student Dashboard

Students have their own personal account. The profile includes a dashboard with statistics and progress. Students take courses, earn achievements, and there is a chat for communication with classmates and curators.

Curator Dashboard

Curators manage study groups, check homework, view their events in the calendar, and answer questions in the chat.

Integrations

We set up authorization through social networks, connected online payments through Sber API, installments through Tinkoff, and deals in amoCRM. We also configured the storage and transmission of video content through a CDN service.