Как мы за 2 месяца пересобрали государственный бизнес-портал и даже получили удовольствие в процессе.

На связи агентство Make It Wow. Рассказываем, как крупная информационная платформа для бизнеса пришла к нам за UX-аудитом. И осталась, чтобы мы полностью переосмыслили весь сервис и отрисовали дизайн заново.

Главная страница crpp.ru
Главная страница crpp.ru

Мы — Make It WOW, дизайн-студия с экспертизой в создании wow-сервисов.

У нас большой опыт работы с финтехом, мобильными приложениями и e-commerce. С экспертизой более 15 лет, мы работали на международном рынке, а теперь плавно выходим на российский и ищем новых клиентов. Познакомиться с нашими wow-интерфейсами можно на нашем сайте для России, и мира.

Про клиента и задачу

Центр «Мой Бизнес» Санкт-Петербург — это государственный фонд развития предпринимательства для малого и среднего бизнеса. В центре можно узнать всё про меры господдержки, получить бесплатные консультации и пройти обучение. А ещё подать заявку на гранты и субсидии, узнать новости из мира бизнеса и многое другое.

Изначально заказчик пришел с запросом улучшить навигацию личного кабинета. Но после стало очевидно, что весь сервис нуждается в доработке: тупиковые сценарии заявок, неструктурированные статьи, устаревший дизайн, сложные тексты – все требовало изменений. Отдельным челленджем стало ограничение в измении бэкэнда, его просто нельзя трогать!

Исходный дизайн клиента
Исходный дизайн клиента

Ключевые результаты

  • Пересобрали пользовательские сценарии, упростили навигацию.
  • С нуля спроектировали разделы личного кабинета, которых раньше не хватало. Например, добавили раздел «Мои документы» — в этом разделе у пользователя хранятся все QR-коды и декларации, которые он получил после заявок в личном кабинете.
  • Переработали информационную часть портала, систематизировав статьи, новости и видео, добавив фильтрацию и удобный поиск.
  • Обновили дизайн так, чтобы портал больше не выглядел как серый и запутанный сайт государственного органа.
  • Получилось чисто, свежо и с учётом фирстиля заказчика. 250+ макетов, документация для разработчиков, гибкая дизайн система – и все это за 2,5 месяца.

Процесс

Начали с UX-аудита личного кабинета и выявили основные проблемы:

  • Запутанная навигация. Пользователи терялись в большом количестве разделов, часть ссылок вообще никуда не вела
  • Огромные флоу заявок со сломанными юнитами.
  • Отсутствие календаря событий пользователя.
  • Неструктурированные уведомления с разными точками входа.
  • Сложные таблицы по ведению документации. Безумно сложные таблицы!

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

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

Итоговая карта сайта
Итоговая карта сайта

Далее мы перешли к отрисовке дизайн-концепции. Остановились на простом и аккуратном дизайне — без сложных сеток и в фирменных цветах сервиса.

Оптимизировали главную страницу

Мы сделали ее информативнее: добавили виджет с услугами, блок новостей и баннеры для важных объявлений.

Главная страница
Главная страница

Проработали навигацию и формы заявок

Мы пересобрали навигацию и дали понятные названия разделам. Так, мы объединили заявки, документы и прочие разделы, относящиеся к ведению бизнеса в одноименный раздел, а все события – в календарь.

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

Заявление на получение гранта
Заявление на получение гранта
QR-коды организации
QR-коды организации

Переосмыслили календарь

Раньше события и пользователя и центра были объединены в одном календаре – это вызывало путаницу. Мы отделили личные события пользователя в понятный календарь с интуитивным управлением. А события центра вынесли в разделы коворкинг, мероприятия и консультации.

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

Мои события
Мои события
Мобильная версия событий и мероприятий
Мобильная версия событий и мероприятий
Мероприятия
Мероприятия
Страница мероприятия
Страница мероприятия

Разработали понятную систему уведомлений

Сделали боковой pop-up с последними уведомлениями, чтобы их было удобно просматривать. А для самых важных предусмотрели плашку в шапке платформы, чтобы пользователь точно её заметил.

Уведомления
Уведомления

Структурировали всю информацию в статьи на портале

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

Информация
Информация
Страница статьи
Страница статьи

Подсветили важные инфоповоды

На старой версии портала все новости были одним списком. А заказчику хотелось подсветить ещё и самые важные инфоповоды.

Мы расположили вверху страницы главную новость недели, а ниже — новости поменьше. Добавили кликабельные теги и подписку.

Новости
Новости

Нарисовали более 40 иконок

Чтобы добавить акцентов, мы отрисовали больше 40 иконок для разделов «Статьи», «Услуги», стикеры для «Мероприятий» и несколько элементов для других блоков.

Иконографика
Иконографика

Что в итоге

Если честно, мы не верили, что можно так здорово сработаться с государственной организацией. К нам прислушивались, охотно принимали идеи и доверяли. Теперь ждём, когда команда заказчика сверстает новый дизайн, — и предпринимателям из Санкт-Петербурга будет удобнее обращаться за помощью и развивать свой бизнес.

Другие экраны
Другие экраны

Рассмотреть кейс подробнее можно на нашем сайте или Dprofile

1212
33
11 комментариев

Очень интересная статья. Респект таким ребятам как вы!

3
Ответить

Классная статья, есть что взять на заметку)

2
Ответить

🔥

2
Ответить

Отличная статья! Видно, что команда горит идеями и не боится креативных вызовов! Такие примеры вдохновляют: когда подход не просто про бизнес, но и про желание сделать WOW 😁 для клиента.

1
Ответить

Ну, лучшие! супер полезная и подробная статья)

1
Ответить

Отличный проект! Супер интересно🔥🔥🔥

1
Ответить

Познавательно, спасибо за статью!

1
Ответить