Дизайн веб-интерфейса Kontragent.io
Кейс  •  UX/UI-дизайн  •  UX-исследования  •  2018
Kontragent.io — онлайн сервис проверки контрагентов, который предоставляет широкий спектр информации о юр. лицах в России. Задача — проектирование и полный редизайн адаптивного интерфейса.​​​​​​​

Моя часть
Это долгосрочная работа над SaaS-продуктом совместно с командой разработки с постепенным внедрением нового функционала.

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

Дизайн-макеты первоначального MVP

По итогам интервью с бизнесом произведен анализ продукта, клиентов и целевой аудитории, план развития, цели и задачи сервиса. Сформированы новые user stories для развития проекта и собран backlog.

Проведя data-анализ конкурентов и текущей версии проекта, было составлено представление по географии, возрасту целевой аудитории, основных устройств (которые оказались преимущественно десктопные), среднем времени, которое пользователь проводит на сайте. А также составлен список конкурентов для дальнейшего анализа возможного функционала, паттернов поведения пользователей.

Составлены портреты ЦА, используемых устройств и KPI на этапах — знакомства с продуктом, работы с основными экранами, принятие решения о покупке платной подписки и стадии заботы о пользователях уже перешедших на платный план.
Дизайн
Первый этап дизайна — полная визуальная переработка MVP, разработка дизайн-системы для дальнейшего развития проекта. Второй этап — работа в дизайн-спринтах над улучшением продукта, внедрением нового функционала, улучшения пользовательского опыта и поведения. Сбор обратной связи от пользователей, интервью и опросы.

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

Новый дизайн экранов поиска

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

Адаптивный дизайн экранов отчета

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

Макеты шаблонов модальных окон

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

Макеты шаблонов платной части кабинета

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

*Сервис Kontragent.io – победитель конкурса Правительства РФ «Открытые данные Российской Федерации 2018» в номинации «Лучшее решение по развитию инфраструктуры открытых данных»

Проект в Figma

Back to Top