IT Contact Logo

25 УЧАСТНИКОВ

В КОМАНДЕ РАЗРАБОТКИ

3 ДИЗАЙНЕРА

В ДИЗАЙН ОТДЕЛЕ

B2B + B2C

DESKTOP / TABLET / MOBILE

ИТ Контакт

A/B Тестирование

Дизайн-система

Дизайн-процессы

«ИТ Контакт» - финтех-компания, которая разрабатывает и поддерживает продукты для оптимизации бизнес-процессов клиентов по всему миру.

Продукты, над которыми работал:

  • Портал для ипотечных брокеров
  • Chat Bot - чат бот с искусственным интеллектом
  • Loyalty Program
  • B2C Портал для заёмщиков (с нуля)
  • Дизайн система (с нуля)
  • Внешний лендер сайт
  • Ипотечный калькулятор
  • CRM
  • Внутренний сервис для работы с документами
  • HR-brand

St Portal

Исходный сценарий оформления заявки имел низкую конверсию из-за

  • низкой скорости заполнения формы
  • слабой визуальной иерархии элементов интерфейса
  • высокой когнитивной нагрузки на пользователя

Пользователи испытывали затруднения в навигации и часто прерывали процесс на промежуточных этапах

Loan info (before)

Loan info (before)

Решение:

  • Провел пользовательские исследования и UX-тесты для подтверждения гипотезы и выявления реальных болевых точек взаимодействия.
  • Подготовлено и протестировано несколько вариантов прототипов.
  • Перестроение структуры форм, объеденив поля в логичные смысловые блоки.
  • Внедрение внутренней продуктовой дизайн системы.

Loan info (wireframe)

Loan info (wireframe)

Результат:

  • снижение времени на заполнение заявки.
  • увеличение кол-ва пользователей, кто успешно завершил заполнения.

Loan info (redesign)

Loan info (redesign)

Broker Portal

Проблемы:

  • Согласно аналитике часть пользователей бросает заполнение, не доходя до конца.
  • Отсутствие визуальной иерархии.
  • Ошибки и неточности в верстке со стороны разработчиков.
  • Отсутствует адаптивная верстка под основные разрешения экранов.

Решения:

  • Подготовлено и протестировано несколько вариантов прототипов.
  • Провел пользовательские исследования и UX-тесты для подтверждения гипотезы.
  • Реализована пошаговая форма с возможностью автосохранения и возврата к заполнению с последнего шага.
  • Введение процесса дизайн-ревью с целью контроля качества верстки оригинальных макетов.
  • Подготовлены адаптивные версии продукта + помощь в разработке PWA

step-by-step filling (after)

ПОШАГОВОЕ ЗАПОЛНЕНИЕ+НАЧАТЬ С МЕСТА, ГДЕ ОСТАНОВИЛСЯ

Interactive stories

МОБИЛЬНЫЕ ГАЙДЛАЙНЫ ДЛЯ НОВОГО ФУНКЦИОНАЛА

Lender Website

На главной странице пользователи не просматривают все слайды карусели, что приводит к:

  • снижению вовлеченности.
  • низкому взаимодействию с ключевым СТА
  • пользователь не понимает, что слайдов более двух

slider before

ДИЗАЙН-СИСТЕМА

Решение:

  • Был проведён конкурентный анализ и реорганизована структура главной страницы.
  • Проведение UX тестов с использованием прототипов на пользователях для подтверждения гипотезы.
  • Доработан дизайна и запуск А/В тестирования в разных регионах.

WIREFRAMES

wireframes

Результат:

  • Повышение конверсии и CTR на отрезке трёх недель.

BENTO-GRID (AFTER)

ПРИМЕР

Design System

Проблемы до внедрения:

  • Несогласованность интерфейсов между продуктами.
  • Сложность в масштабировании.
  • Высокая нагрузка на команду.
  • Сложность при онбординге новых сотрудников.

Решения:

  • Создание единой внутренней дизайн системы для внутренних продуктов с компонентами, гайдами и паттернами.
  • Обновление Figma-макетов в соответствии с новой дизайн-системой.

Результат:

  • Сокращение времени разработки новых экранов и фич.
  • Оптимизация взаимодействия с разработчиками.
  • Повышение гибкости продукта.

Component description

ДИЗАЙН-СИСТЕМА

Button component

ПРИМЕР

Dropdown component

ПРИМЕР

Другие кейсы

Росбанк лого
Android
Росбанк
ВТБ лого
IOS
Росбанк
Здоровье.РУ лого
IOS
Здоровье.РУ