Дизайн веб-интерфейса Kontragent.io
Кейс • UX/UI-дизайн • UX-исследования • 2018
Kontragent.io — онлайн сервис проверки контрагентов, который предоставляет широкий спектр информации о юр. лицах в России. Задача — проектирование и полный редизайн адаптивного интерфейса.
Моя часть
Это долгосрочная работа над SaaS-продуктом совместно с командой разработки с постепенным внедрением нового функционала.
В мою компетенцию входило UX-исследования, анализ поведения пользователя, составление гипотез, построение структуры и навигации, дизайн всех экранов интерфейса. Разработка дизайна посадочных страниц.
Моя часть
Это долгосрочная работа над SaaS-продуктом совместно с командой разработки с постепенным внедрением нового функционала.
В мою компетенцию входило UX-исследования, анализ поведения пользователя, составление гипотез, построение структуры и навигации, дизайн всех экранов интерфейса. Разработка дизайна посадочных страниц.
UX-исследования
На старте работ проект уже имел предварительный дизайн и MVP, требовалось проанализировать текущую версию, сделать выводы, и приступить к созданию нового подхода. Старые экраны были взяты за основу и полностью переработаны.
Дизайн-макеты первоначального MVP
По итогам интервью с бизнесом произведен анализ продукта, клиентов и целевой аудитории, план развития, цели и задачи сервиса. Сформированы новые user stories для развития проекта и собран backlog.
Проведя data-анализ конкурентов и текущей версии проекта, было составлено представление по географии, возрасту целевой аудитории, основных устройств (которые оказались преимущественно десктопные), среднем времени, которое пользователь проводит на сайте. А также составлен список конкурентов для дальнейшего анализа возможного функционала, паттернов поведения пользователей.
Составлены портреты ЦА, используемых устройств и KPI на этапах — знакомства с продуктом, работы с основными экранами, принятие решения о покупке платной подписки и стадии заботы о пользователях уже перешедших на платный план.
Проведя data-анализ конкурентов и текущей версии проекта, было составлено представление по географии, возрасту целевой аудитории, основных устройств (которые оказались преимущественно десктопные), среднем времени, которое пользователь проводит на сайте. А также составлен список конкурентов для дальнейшего анализа возможного функционала, паттернов поведения пользователей.
Составлены портреты ЦА, используемых устройств и KPI на этапах — знакомства с продуктом, работы с основными экранами, принятие решения о покупке платной подписки и стадии заботы о пользователях уже перешедших на платный план.
Дизайн
Первый этап дизайна — полная визуальная переработка MVP, разработка дизайн-системы для дальнейшего развития проекта. Второй этап — работа в дизайн-спринтах над улучшением продукта, внедрением нового функционала, улучшения пользовательского опыта и поведения. Сбор обратной связи от пользователей, интервью и опросы.
На начальной стадии основные экраны интерфейса — это поиск и его результат, а также карточка контрагента с подробной информацией о юр. лице и их состояния. Все экраны предполагают адаптивный дизайн под все популярные устройства, но приоритетным является десктоп.
На начальной стадии основные экраны интерфейса — это поиск и его результат, а также карточка контрагента с подробной информацией о юр. лице и их состояния. Все экраны предполагают адаптивный дизайн под все популярные устройства, но приоритетным является десктоп.
Новый дизайн экранов поиска
В новые карточки сформированного отчета помимо уже текущей информации необходимо было заложить возможность расширения всех блоков, а макеты делать максимально гибко. Карточка должна была иметь удобную адаптивную структуру для полного и урезанного отчета.
Адаптивный дизайн экранов отчета
Для ускорения сборки на стороне команды разработчиков для проекта был создан универсальный конструктор модальных окон для быстрой сборки любой формы и запросов от сайта, а также дизайн-система.
Макеты шаблонов модальных окон
Следующим этапом была разработка кабинета пользователя с платными услугами с визуальным разграничением разделов на платную и бесплатную. Адаптация текущих экранов под новый функционал и развитие пользовательского опыта в соответствии с результатами юзабилити тестов и опросов.
Макеты шаблонов платной части кабинета
Мобильная версия интерфейса содержит весь функционал десктопной, но исходя из данных UX-анализа ориентирована не на полноценную работу, а на несколько пользовательских путей в рамках быстрого поиска и беглого ознакомления с данным агентов.
Результат работы
Продуманный дизайн интерфейса позволил стабильно развивать сервис в течение нескольких лет, что повлекло увеличение лояльной аудитории, показателей KPI и общий положительный фидбек. Для сервиса было нарисовано более 100 макетов и состояний экранов.
*Сервис Kontragent.io – победитель конкурса Правительства РФ «Открытые данные Российской Федерации 2018» в номинации «Лучшее решение по развитию инфраструктуры открытых данных»
Продуманный дизайн интерфейса позволил стабильно развивать сервис в течение нескольких лет, что повлекло увеличение лояльной аудитории, показателей KPI и общий положительный фидбек. Для сервиса было нарисовано более 100 макетов и состояний экранов.
*Сервис Kontragent.io – победитель конкурса Правительства РФ «Открытые данные Российской Федерации 2018» в номинации «Лучшее решение по развитию инфраструктуры открытых данных»
Проект в Figma
