Дизайн сайта и личного кабинета «Летово»

Главное о кейсе

Создали для школы «Летово» дизайн-систему, которая объединяет конструктор блоков, ключевые страницы сайта и личный кабинет абитуриента. Сделали структуру общего сайта легче.

Проработали путь пользователя от регистрации в личном кабинете до подачи заявки на поступление и прохождения финального собеседования с учителями школы. Версткой и разработкой сайта клиент занимался самостоятельно.

We have developed a design system for the Letovo school that combines the web page block constructor, the key pages of the site and the applicant's personal account. Simplified the structure of the site.
________________________________________________

We thought through the user's path from personal account registration to applying for admission and passing the final interview with school teachers. The coding of the site was performed by the client’s team.

Бизнес-задача и ее решение

Задачи проекта:
1. переработать общую структуру сайта и ключевых страниц;
2. обновить дизайн страниц школы и личного кабинета абитуриента.

Решение:

1. Проработали путь пользователя от регистрации в личном кабинете до прохождения финального собеседования с учителями школы.

2. Чтобы клиенту было проще самому собирать страницы сайта и редактировать контент, мы создали конструктор блоков. Он значительно сокращает время на дизайн и разработку: не нужно каждый раз готовить макет и верстать страницу целиком.

3. Одни из ключевых элементов фирменного стиля школы — пиктограммы и иллюстрации. Разместили иллюстрации так, что их замена не разрушит композицию при изменении системы. Это позволит быстро обновлять элементы, оставаться в единой концепции и без противоречий масштабировать фирменный стиль на разные носители.

4. Добавили таймлайн поступления и систему уведомлений-подсказок для абитуриента. Стало понятно, какие документы нужно досдать, сколько осталось до дедлайна и когда начнется новый этап. Если пропустил уведомление — можно вернутся к ранним сообщениям на отдельной странице.

5. Разработали Личный кабинет, который сохраняет визуальную связь с основным сайтом. При этом адаптировали сетку под задачи кабинета и добавили к общей цветовой гамме дополнительные оттенки для идентификации статусов и обозначения состояния UI-элементов.
________________________________________________

Project goals:
1. redesign the overall structure of the site and key pages;
2. update the design of the pages of the school and the applicant's personal account.

Solution:
1. We determined and thought through every step of the user's path from registration in the personal account to the final interview with the school teachers.

2. To make it easier for the client’s web team to assemble new site pages and edit the content, we have created a block page constructor. It significantly reduces the time for design and development: you do not need to prepare the layout and layout the whole page every time.

3. One of the key visual elements of the school's corporate identity are pictograms and illustrations. We modified the layout in such a way that the illustrations are replaceable and the composition is flexible. This allows to update the elements quickly, stay in a single concept and adjust the corporate identity to different media without contradictions.

4. We added an admission timeline and a system of notification tips for the applicant. It is now easy to track which documents need to be completed, how much time is left till the deadline and when the new stage begins. If the applicant misses the notification, it is possible to return to the earlier messages gathered on a separate page.

5. Personal Account now is visually connected with the main site. But the layout grid is slightly different to fulfill all the tasks of the cabinet and some additional color shades are added to the general color scheme to indicate UI elements and user status.

Прочая информация о кейсе

«Летово» — школа-пансион, в которой обучение каждого ребенка выстраивается по индивидуальной учебной траектории. В диджитал это целая система сервисов: основной сайт школы, онлайн-платформа для занятий и тестирований по школьным предметам, личные кабинеты абитуриентов, учеников, сотрудников, родителей.

Мы переработали общую структуру сайта, обновили дизайн страниц школы, личного кабинета абитуриента и разработали единую дизайн-систему

Над проектом работала дизайн-команда: аналитики, UX/UI дизайнеры, арт директор и продюсер. Комплексный подход помог глубже погрузиться в процессы школы.
________________________________________________

"Letovo" is a boarding school where each child's education is organised according to an individual educational path. It is a whole system of digital services: the school’s main website, an online platform for classes and tests for the school curriculum, personal accounts of applicants, students, employees and parents.

We have redesigned the overall structure of the site, updated the design of the main website, the applicant's personal account and developed a unified design system.

The project was developed by our design team: analysis specialists, UX/UI designer, art director and producer. An integrated approach helped to dive deeper into the processes of the school.

Скриншоты