Начинаем работу с генерации идей и обзора существующих решений в сфере онлайн-образования и бизнес-СМИ. Собираем презентацию, показываем ее заказчику и убеждаемся в том, что наши идеи совпадают с условиями задачи.
Главной фишкой платформы хотим сделать движение не от продуктов, а от потребностей людей. Сайт предлагает для решения целый набор инструментов: обзорные и узкоспециальные статьи, отдельные лекции и онлайн-курсы, офлайн-мероприятия и партнерские услуги. Основой платформы является сообщество экспертов и пользователей, которые формируют содержимое, помогают друг другу и налаживают деловые связи. Внимательно следим за заказчиком, который уточняет задачу, показывая на пальцах.
Собираем всю информацию о проекте в огромную карту мыслей, которая в итоге трансформируется в логичную информационную структуру сайта.
Чтобы разобраться с перечнем и составом страниц, смотрим, кто и как будет пользоваться платформой. Прикидываем карты переходов.
Из-за сжатых сроков проектировщики, дизайнеры и технологи начинают работу над проектом одновременно. Собираем и передаем программистам информационную структуру страниц, чтобы ускорить работу над программно-аппаратной частью.
Одновременно делаем первый подход к графическому стилю. Придумываем ленту этапов управления компанией, боковую навигацию и слой «Самое важное за 30 минут».
На странице этапа решаем показать его прокачку лентой иллюстраций, которые закрашиваются по мере изучения материалов раздела. Получается одновременно и прогресс-бар, и полка с ачивками.
Используем это как один из приемов мотивировать людей возвращаться на сайт. Второй прием — история просмотров и избранное, доступное даже неавторизованным пользователям. Когда у пользователя появляется личное пространство, сайт советует создать персональный профиль, чтобы сохранить свой прогресс и подписки.
Думаем над страницей траектории — пошагового руководства по открытию определенного бизнеса. Предусматриваем в конце страницы подробный чек-лист со всеми шагами и полезной информацией. Люди будут добавлять его себе в избранное, чтобы всегда иметь под рукой и отмечать пройденные этапы.
Уже что-то вырисовывается. Постоянно показываем промежуточные наработки заказчику. Ему нравится функциональность, но пока не устраивают цвета, антиква в тексте и лента этапов на главной странице: она не кажется функциональным блоком.
Меняем шрифт и цвета, делаем интереснее сетку материалов. Вместо карточек этапов придумываем ползунок, который прокручивает ленту этапов и тем.
Думаем над мобильной версией ползунка и главной страницы в целом.
Показываем заказчику. Вроде бы то, что нужно. Но графика кажется слишком детской, нужно ее дорабатывать.
Тем временем готовим видеопрезентацию платформы и показываем ее на Всемирном фестивале молодежи в Сочи.
Параллельно получаем срочную задачу. Нужно придумать сценарий для формы онлайн-регистрации компании. Это будет первая онлайн-услуга, доступная на платформе. Делаем сорок макетов с разными состояниями интерфейса.
Обсуждаем десктопные и мобильные макеты с заказчиком на общей онлайн-доске.
Возвращаемся к дизайн-концепции. Пробуем уйти в сторону от первоначального варианта и даем волю фантазии. Переносим выбор этапов влево, делаем дизайн строже, придумываем новый формат показа траекторий в ленте материалов.
Клиентам больше нравилось решение с переключалкой этапов. Пробуем ее упростить и в результате еще раз пересматриваем общий стиль. Вместо игривой графики совсем не про бизнес готовим строгие и лаконичные изображения, основанные на логотипе «Деловой среды». Пиктограммы получаются нарисованными одной тонкой линией.
Из значков отлично собирается прелоудер для сайта.
Превращаем массивный блок выбора этапа в минималистичный ползунок. Выбор подтем появляется, только когда человек начинает тащить ползунок и выбирать этапы.
Делаем страницу светлее и солиднее, а карточки материалов — контрастнее и разнообразнее.
Заказчику все нравится. Приступаем к остальным страницам сайта. Делим процесс на этапы, собираем команду дизайнеров и распределяем задания. Учет ведем в таблице «Гугла»: у каждого макета есть ответственный, дедлайн и текущая степень «прожарки».
Думаем над разными видами продуктовой выдачи.
Получаем концептуальные правки от заказчика: все курсы, видео и статьи нужно объединить в общий раздел «Знания». Отказываемся от подтем внутри этапов и бокового меню на страницах каталогов: их не получается реализовать к моменту запуска платформы.
Параллельно собираем мобильные версии страниц.
На странице о платформе пытаемся разбавить сухую подачу чем-нибудь интересным. Пробуем показать блок с лучшими материалами платформы в виде ленты со скроллом.
Вместе с карточными выдачами рисуем страницы материалов: курсов, статей, лекций и презентаций. Продумываем сценарии создания профиля и авторизации.
Рисуем финальные версии всех иконок сайта. В итоге получается внушительная таблица.
В процессе работы над проектом создаем в «Скетче» библиотеку со всеми компонентами пользовательского интерфейса и дизайн-паттернами проекта, с помощью которых заказчик самостоятельно собирает новые страницы.
Проводим авторский надзор сверстанных страниц и отлавливаем баги.
Следим за реакцией премьер-министра и других членов правительства на получившийся результат и запускаемся четко по плану.
