;-)

Создание образовательной платформы «Деловая среда»

Описание• Процесс

Начинаем работу с генерации идей и обзора существующих решений в сфере онлайн-образования и бизнес-СМИ. Собираем презентацию, показываем ее заказчику и убеждаемся в том, что наши идеи совпадают с условиями задачи.

Главной фишкой платформы хотим сделать движение не от продуктов, а от потребностей людей. Сайт предлагает для решения целый набор инструментов: обзорные и узкоспециальные статьи, отдельные лекции и онлайн-курсы, офлайн-мероприятия и партнерские услуги. Основой платформы является сообщество экспертов и пользователей, которые формируют содержимое, помогают друг другу и налаживают деловые связи. Внимательно следим за заказчиком, который уточняет задачу, показывая на пальцах.

Собираем всю информацию о проекте в огромную карту мыслей, которая в итоге трансформируется в логичную информационную структуру сайта.

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

Из-за сжатых сроков проектировщики, дизайнеры и технологи начинают работу над проектом одновременно. Собираем и передаем программистам информационную структуру страниц, чтобы ускорить работу над программно-аппаратной частью.

Одновременно делаем первый подход к графическому стилю. Придумываем ленту этапов управления компанией, боковую навигацию и слой «Самое важное за 30 минут».

На странице этапа решаем показать его прокачку лентой иллюстраций, которые закрашиваются по мере изучения материалов раздела. Получается одновременно и прогресс-бар, и полка с ачивками.

Используем это как один из приемов мотивировать людей возвращаться на сайт. Второй прием — история просмотров и избранное, доступное даже неавторизованным пользователям. Когда у пользователя появляется личное пространство, сайт советует создать персональный профиль, чтобы сохранить свой прогресс и подписки.

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

Уже что-то вырисовывается. Постоянно показываем промежуточные наработки заказчику. Ему нравится функциональность, но пока не устраивают цвета, антиква в тексте и лента этапов на главной странице: она не кажется функциональным блоком.

Меняем шрифт и цвета, делаем интереснее сетку материалов. Вместо карточек этапов придумываем ползунок, который прокручивает ленту этапов и тем.

Думаем над мобильной версией ползунка и главной страницы в целом.

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

Тем временем готовим видеопрезентацию платформы и показываем ее на Всемирном фестивале молодежи в Сочи.

Параллельно получаем срочную задачу. Нужно придумать сценарий для формы онлайн-регистрации компании. Это будет первая онлайн-услуга, доступная на платформе. Делаем сорок макетов с разными состояниями интерфейса.

Обсуждаем десктопные и мобильные макеты с заказчиком на общей онлайн-доске.

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

Клиентам больше нравилось решение с переключалкой этапов. Пробуем ее упростить и в результате еще раз пересматриваем общий стиль. Вместо игривой графики совсем не про бизнес готовим строгие и лаконичные изображения, основанные на логотипе «Деловой среды». Пиктограммы получаются нарисованными одной тонкой линией.

Из значков отлично собирается прелоудер для сайта.

Превращаем массивный блок выбора этапа в минималистичный ползунок. Выбор подтем появляется, только когда человек начинает тащить ползунок и выбирать этапы.

Делаем страницу светлее и солиднее, а карточки материалов — контрастнее и разнообразнее.

Заказчику все нравится. Приступаем к остальным страницам сайта. Делим процесс на этапы, собираем команду дизайнеров и распределяем задания. Учет ведем в таблице «Гугла»: у каждого макета есть ответственный, дедлайн и текущая степень «прожарки».

Думаем над разными видами продуктовой выдачи.

Получаем концептуальные правки от заказчика: все курсы, видео и статьи нужно объединить в общий раздел «Знания». Отказываемся от подтем внутри этапов и бокового меню на страницах каталогов: их не получается реализовать к моменту запуска платформы.

Параллельно собираем мобильные версии страниц.

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

Вместе с карточными выдачами рисуем страницы материалов: курсов, статей, лекций и презентаций. Продумываем сценарии создания профиля и авторизации.

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

В процессе работы над проектом создаем в «Скетче» библиотеку со всеми компонентами пользовательского интерфейса и дизайн-паттернами проекта, с помощью которых заказчик самостоятельно собирает новые страницы.

Проводим авторский надзор сверстанных страниц и отлавливаем баги.

Следим за реакцией премьер-министра и других членов правительства на получившийся результат и запускаемся четко по плану.