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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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