Школа 21

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

Результат
Разработан новый дизайн, основанный на принципах юзабилити. Сформирована компонентная база проекта. Отрисовано более 200 экранов образовательной системы. Подготовлены иллюстрации 14 иконок в стиле Pixel-art. Более 1000 прошедших учеников за год работы.

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

Наша задача была полностью переработать юзабилити существующего сайта Школы 21 и привести дизайн к единой системе в соответствии с брендбуком:
Обновление UI-kit клиента
Дизайн и проработка логических мини-игр для сайта
Проектирование и адаптация форм под различные размеры экранов
Отрисовка иконок для ачивок

Дизайн до и после
Серый, скучный интерфейс сменился на лаконичный дизайн с вкраплениями акцентных элементов фирменного стиля.

Игры на логику и память
Одна из основных задач - проработка дизайна логических мини-игр. Этот раздел предназначен для тестирования студента - основной акцент на лаконичность и юзабилити.

Запись на встречу
После прохождения игр пользователь попадает на встречу, где может обсудить все этапы обучения.

Отрисовка иконок
Для наград за успехи в обучении были отрисованы иконки в стиле Pixel-art в соответствии с брендингом.

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

Понятное и простое разделение на этапы
Весь путь, который должен пройти пользователь, был разбит на понятные, небольшие этапы, последовательно продвигаясь по которым, пользователь дойдет до своей главное цели — поступления в Школу 21.

Обучение
Финальный этап, после которого пользователь отправляется в увлекательное приключение — обучение.

Адаптивная версия
Элементы дизайн-системы легко адаптируются
под любые разрешения, а также могут быть использованы в дальнейшем при создании мобильного приложения. Предусмотрено 5 ключевых разрешений, включающих в себя десктоп версии, версию для планшетов и мобильных устройств.

Дизайн — система
На основе гайдов заказчика, была составлена цветовая схема, а также сформированы текстовые стили.

Большая библиотека компонентов
Готовые компоненты, которые легко адаптируются под различные разрешения.

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

«Школа 21» — образовательная инициатива Сбербанка, основанная на методике «школы будущего», используемой в инновационной французской школе программирования "Ecole 42" с 2013 года.

Реализована разработка всего дизайна с ориентиром на брендбук и гайдлайн заказчика. 200 + экранов (включая адаптив) образовательной системы: регистрация, данные о себе, подготовка к играм, игры, разработка и дизайн игры, встречи и обучения. Ориентировалась по прототипам заказчика. Составлен с нуля UI Kit и компоненты.

Скриншоты

Комментарий заказчика

Dex оказалась одной из немногих команд, коллектив которой обладает необходимыми практическими знаниями для выполнения задуманных нами сложных технических задач.