Результат Разработан новый дизайн, основанный на принципах юзабилити. Сформирована компонентная база проекта. Отрисовано более 200 экранов образовательной системы. Подготовлены иллюстрации 14 иконок в стиле Pixel-art. Более 1000 прошедших учеников за год работы.
Бизнес-задача и ее решение
Наша задача была полностью переработать юзабилити существующего сайта Школы 21 и привести дизайн к единой системе в соответствии с брендбуком: Обновление UI-kit клиента Дизайн и проработка логических мини-игр для сайта Проектирование и адаптация форм под различные размеры экранов Отрисовка иконок для ачивок
Дизайн до и после Серый, скучный интерфейс сменился на лаконичный дизайн с вкраплениями акцентных элементов фирменного стиля.
Игры на логику и память Одна из основных задач - проработка дизайна логических мини-игр. Этот раздел предназначен для тестирования студента - основной акцент на лаконичность и юзабилити.
Запись на встречу После прохождения игр пользователь попадает на встречу, где может обсудить все этапы обучения.
Отрисовка иконок Для наград за успехи в обучении были отрисованы иконки в стиле Pixel-art в соответствии с брендингом.
Бассейн Основной этап обучения — бассейн. Это отборочный период длиной в месяц, где студенты решают различного рода задачи для поступления в школу.
Понятное и простое разделение на этапы Весь путь, который должен пройти пользователь, был разбит на понятные, небольшие этапы, последовательно продвигаясь по которым, пользователь дойдет до своей главное цели — поступления в Школу 21.
Обучение Финальный этап, после которого пользователь отправляется в увлекательное приключение — обучение.
Адаптивная версия Элементы дизайн-системы легко адаптируются под любые разрешения, а также могут быть использованы в дальнейшем при создании мобильного приложения. Предусмотрено 5 ключевых разрешений, включающих в себя десктоп версии, версию для планшетов и мобильных устройств.
Дизайн — система На основе гайдов заказчика, была составлена цветовая схема, а также сформированы текстовые стили.
Большая библиотека компонентов Готовые компоненты, которые легко адаптируются под различные разрешения.
Прочая информация о кейсе
«Школа 21» — образовательная инициатива Сбербанка, основанная на методике «школы будущего», используемой в инновационной французской школе программирования "Ecole 42" с 2013 года.
Реализована разработка всего дизайна с ориентиром на брендбук и гайдлайн заказчика. 200 + экранов (включая адаптив) образовательной системы: регистрация, данные о себе, подготовка к играм, игры, разработка и дизайн игры, встречи и обучения. Ориентировалась по прототипам заказчика. Составлен с нуля UI Kit и компоненты.
