eXpress 2.0: Редизайн B2B-платформы

7 месяцев, 4 дизайнера, 1000+ экранов, подтвержденных на 290 активных пользователях. Еще одна мощная точка продаж продукта. Гибкий, адаптируемый код. Дизайн-система.

Проблемы

  1. 1

    Заказчики давно просили редизайн, хотели кастомизацию цветов

  2. 2

    Сложно конкурировать с Telegram, WhatsApp, GoogleMeet, Slack и тд. при слабом UI

  3. 3

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

  4. 4

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

  5. 5

    Продуктовая слепота: 30% функционала не использовалось юзерами из-за нарушения UX-паттернов 10-летней давности;

  6. 6

    Поверхностное вовлечение в экосистему и низкая глубина просмотров в экосистемных сервисах.

Все помним кейс Кинопоиска с редизайном?
Такого не хотелось, конечно
Подошли серьёзно к вопросу

Гипотезы

  1. 1

    Адаптация дизайн-системы разблокирует сделки с крупными B2B-заказчиками, требующими кастомизацию;

  2. 2

    Обновление UI до уровня ключевых конкурентов усилит восприятие бренда на демо-презентациях и упростит вход в крупные тендеры. Cнизит барьер входа для B2C-пользователей и повысит органический рост.

  3. 3

    Унификация компонентов через Дизайн-систему сократит время разработки интерфейсов на 30-50%;

  4. 4

    Пересмотр кода под новую дизайн-систему упростит поддержку и удешевит внедрение новых фич в будущем.

  5. 5

    Улучшение “обнаруживаемости” функций через редизайн повысит юзабельность существующего функционала, который пользователи ранее не замечали;

  6. 6

    Устранение выявленных UX-барьеров в навигации снизит поток однотипных тикетов в поддержку на прогрозируемые 20-30%.

Дискавери

Провели 2 опроса на ~800 и 792 респондента. Первым опрос был направлен на выявление основных болей: удобство проведения звонка, понимание текстовок, навигация, дизайн и тд. Второй опрос был направлен на свободное высказывание предложений.

Сводка результатов пользовательского опроса
Таблица с ответами пользователей
Комментарии пользователей из опроса
Приоритизация пользовательских проблем
Подборка идей и предложений пользователей

Инсайты

  1. 1

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

  2. 2

    20% ответов содержали просьбы добавить фичи, которые уже есть. Мы поняли, что расположение не очевидно

  3. 3

    Интерфейс не был готов к тому объему фич, которые мы внедрили. Они просто терялись, создавая эффект каши и расфокуса

  4. 4

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

Работа

Разделила работу на три параллельных стрима:

Операционка

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

Работа руками

Мы отказались от идеи перерисовать всё сразу и разделили продукт на 4 ключевых стрима: Чаты, Звонки, Контакты, Настройки. Работа над каждым стримом строилась так:

Анализ

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

Пример: В стриме «Чаты» выявили проблему навигации - пользователи терялись в списке из-за плохой считываемости статусов и типов чатов.

Решение: Совместно с бизнес-аналитиками сформировали гипотезы (например, «Если мы изменим группировку и визуальный вес непрочитанных сообщений, скорость поиска чата вырастет»).

Проработка решений и Техническое валидирование

Провели детальный анализ прямых и косвенных конкурентов (Telegram, Teams, Slack...)

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

На этапе проработки гипотез мы подключали техлидов разработки, чтобы отсечь нереализуемые идеи сразу

Проработка сценариев чатов
Сравнение решений конкурентов

Визуальный MVP и Коридорки

Далее работали над MVP нового дизайна. Согласно опросу 80% пользователей используют ПК для ВКС, поэтому именно ВКС стала отправной точкой. Собрали 3 разных видения редизайна и провели серию коридорных тестов на внутренней аудитории и лояльных пользователях.

Первый вариант визуального MVP
Второй вариант визуального MVP
Третий вариант визуального MVP

Мы просмотрели разные векторы развития событий: уникальный стиль, воздушность, но останавились на нативном формате. Редизайн - это довольно “нежная” история. Наша задача улучить UX и привлечь пользователей, а не оттолкнуть их.

Дизайн

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

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

Внутреннее бета-тестирование

Разработка собрала рабочую бета-версию нового раздела.

300+ сотрудников нашей компании начинали использовать новый дизайн в своей ежедневной работе. Это давало нам мгновенный и честный фидбек по реальным кейсам, которые невозможно поймать на тестах (все комментарии принимались к сведению, анализировались, и на их основе выдвигались гипотезы, которые становились базой для итеративного процесса доработок).

Дизайн ревью

Сравниваем реализацию в коде с макетами.

Макет экрана чатов Реализация экрана чатов в коде
Макет экрана контактов Реализация экрана контактов в коде
Макет экрана настроек Реализация экрана настроек в коде
Фрагмент макета Фрагмент макета Фрагмент макета Фрагмент макета
Пилю макеты

Бизнес-ценность

Топ 10

eXpress входит в топ 3 российских корп. мессенджера

15

новых заказчиков появилось за этот год

ура

Финальный экран редизайна eXpress 2.0