<aside> <img src="/icons/star_yellow.svg" alt="/icons/star_yellow.svg" width="40px" /> Задача: сделать оформление учебного пространства и первого курса на GetCourse для корпоративного университета компании DocsInBox. Заказчик уже пытался сделать своими силами, но стандартного оформления оказалось недостаточно. Перед нами стояла задача “Сделать просто, но симпатично”. Также важно было учитывать корпоративный стиль (бренд-бук), придумать “фишку” и добавить маскотов. И все это до Нового года:)
</aside>
Как мы работали: я провела брифинг заказчика, где мы определили функционал и принципы, по которым будем понимать, что работа сделана хорошо. А также определила уровень компании по спиральной динамике и ключевые архетипы - это помогло лучше понять главные посылы, которые компания хочет донести до своих сотрудников. Затем я нашла дизайнера-верстальщика, мы собрали референсы, определились с концепцией. А после - в несколько этапов рисовали макеты страниц в Figma и сразу верстали. Поскольку проект был срочный, мы работали этапами с утверждением (Waterfall), но здесь не все было гладко - об этом чуть ниже.
На брифинге мы составили вот такой список для верстки:
Страница входа на геткурс
Боковая панель с меню
Страница списка тренингов
Страница тренинга со списком разделов
Страница раздела со списком модулей/ уроков (или гармошка в разделах)
Шаблон оформления урока, включая квиз (тест)
Профиль студента
Мобильная версия тренинга и гк
Функция поиска
Прогресс-бар студента
Проект мы реализовали за 2 недели (с праздниками и подписанием договора вышло на 3). Вот, как это было.
<aside> <img src="/icons/star_yellow.svg" alt="/icons/star_yellow.svg" width="40px" /> В качестве первой концепции я предложила идею “Бумага как материал для творчества и письма”, поскольку компания занимается электронным документооборотом. То есть переводит бумажные носители в цифровые. По этой концепции мы визуально воссоздаем “физические” ощущения от прикосновения с бумагой (писать, складывать, мастерить, сворачивать конверты, решать геометрические задачи, создавать скрапбукинг, архивировать, расставлять по алфавиту и тд), ведь в онлайне так не хватает реальных впечатлений. Но мы поняли, что для этой идеи придется привлекать иллюстратора, и мы не уложимся в сроки.
</aside>
<aside> <img src="/icons/star_yellow.svg" alt="/icons/star_yellow.svg" width="40px" /> Поэтому в качестве второй концепции я развивала тему “Космоса”, поскольку она уже была задействована на сайте компании, и мы могли использовать стоковые иллюстрации. При этом в качестве “фишки” мы оставили **скрепки, соединяющие модули и уроки курсов, напоминающие детали космического корабля или скоросшиватель. “**Космос” также хорошо реализуется в сине-голубой палитре компании, хотя для полной реализации он бы лучше смотрелся на темном фоне. Учитывая, что мы делаем учебное пространство, наша задача была снизить когнитивную нагрузку, убрать шум и помочь студентам сконцентрироваться на учебном контенте. Поэтому мы старались добавить больше света и “воздуха” и не перегружать элементами.
</aside>
(кликните для увеличения)
Прототип
Результат
.png)
Модули раскрываются “гармошкой”: поскольку курсы в компании небольшие, сложные вложения “тренинг-модуль-урок” создавали бы лишние действия для пользователя. При текущей версии студент может перейти сразу на любой урок. Мы также предложили добавить время прохождения, чтобы студент планировал свою нагрузку.
Еще нам удалось найти подходящую иллюстрацию собаки - по словам заказчика, некоторые клиенты буквально воспринимают название компании DocsInBox (”собаки в коробке”) 😊, поэтому собака стала негласным маскотом и задает внутрикорпоративное настроение.
До Нового года мы утвердили макеты, чтобы на праздниках начать их верстать. Но с января все изменилось: добавился еще один ЛПР, сменились принципы, механизм принятия решений и подход проектирования. А еще мы поняли, что у нас разные корпоративные культуры. Проект перестал быть срочным, мы заметили, что заказчикам привычнее работать по Agile, где можно вносить правки в утвержденные макеты. Поскольку мы должны были выполнить обязательства по договору и дедлайны, мы решили опираться на принципы “достаточно для учебного результата” и “достаточно комфортно для студента”, без фанатизма.
Agile удобен для штатной команды, где есть пространство для творчества и ошибок. А для работы с подрядчиками с ограниченными сроками проекта, где нет возможности лучше узнать друг друга и поэкспериментировать - Waterfall.
В итоге мы вносили небольшие правки даже после утверждения дизайна, если это действительно помогло бы студенту лучше учиться. Но от переверстки уже залитых на GetCourse макетов были вынуждены отказаться - это выходило за рамки сроков и не играло существенной роли в образовательном процессе.
В результате мы оформили все элементы платформы: страницу курсов (которые меняют цвет при прохождении), тесты, баннеры для навигаций, карту курса, страницу входа, профиль, боковую панель меню с раскрытием, добавили функцию поиска по платформе, прогресс-бар, записали видео-инструкцию по использованию платформы. Теперь, когда появится новый курс, заказчик сможет скопировать оформление и добавить новый контент без привлечения дизайнера и верстальщика.
(кликните для увеличения)
