Меню

UX-дизайн для компании ТБМ

www.tbm.ru
Логотип Tbm

Цель проекта

Объединить 3 существующих сайта, снизить стоимость обслуживания, упростить процесс заказа для клиентов.

Как мы создавали новый сайт для ТБМ

Клиент

Компания ТБМ 25 лет продаёт комплектующие для производства окон, дверей, фасадов и мебели, а также краску и клей по всей России.

В компании ТБМ работает 2500 человек.

Охват — более 150 регионов России и СНГ.

Проблемы

Внешние

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

Внутренние

По мере роста бизнеса появлялись новые направления, и к 2019-му году компания пришла с тремя разными сайтами с разным функционалом: сайт для розничных покупателей, оптовиков и личный кабинет. Обслуживать эти экосистемы стало слишком дорого, невозможно вносить быстрые изменения. Сайты слишком завязаны на внутреннюю базу данных и не позволяют подключать удаленные команды по доработке, а также нет API.

Задача

Диаграмма задачи
  1. Объединение 3-х сайтов
    в один
  2. Улучшение пользовательского опыта и скорости обслуживания
  3. Снижение стоимости поддержки цифровой инфраструктуры

I. Предпроектное обследование

Диаграмма

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

1. Интервью с бизнесом

Провели 5 встреч с ключевыми стейкхолдерами и впоследствии постоянно дополняли свое понимание проблематики и бизнес-процессов компании, уточняя детали по мере проработки решений.

2. Интервью с оптовиками

Заказ через сайт занимал слишком много времени менеджеров закупок, так как процесс заявки был очень проблематичный:

  1. 1. Чтобы сделать один заказ, нужно оформить несколько заявок.
  2. 2. Оформляя заявку оптовые клиенты часто загружают файлы с артикулами товаров, которые иногда меняются на основном сайте. Таким образом, клиенты получали не те заказы.

3. Интервью с  клиентами ТБМ

Было принято решение использовать собственный опыт команды.

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

Персоны и сценарии

Обработали результаты интервью и сформировали 4 персоны с достаточным числом сценариев покрывающих основные задачи. Описали персоны и пересечение сценариев.

  • Портрет
    Сергей
    Менеджер по закупкам
  • Портрет
    Владимир
    Производитель корпусной мебели
  • Портрет
    Алексей
    Частный мастер по ремонту
  • Портрет
    Петр
    Частный клиент
  • Персона 1. Менеджер по закупкам

    Сергей — менеджер по снабжению в компании. Компания специализируется на производстве пластиковых окон и дверей. У компании есть 3 юридических лица, 2 менеджера по снабжению. Конкретное юридическое лицо определяется в каждом заказе.

  • Персона 2. Производитель корпусной мебели

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

  • Персона 3. Частный мастер по ремонту

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

  • Персона 4. Частный клиент

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

Итог ППО

Проблемы и подробное задание на проектирование.

99

— количество страниц в предпроектном исследовании.

Страницы предпроектного исследования

II. Проектирование

Диаграмма

Команда проекта

5 сотрудников ТБМ

Бизнес-аналитик, директор ДИТ, руководитель проекта ТБМ-Онлайн, руководитель розничной торговли, контент-менеджер

7 сотрудников Agima

Руководитель проектирования, 2 ведущих проектировщика, дизайнер, арт-директор, менеджер проекта, аккаунт-директор

Схема работы

Спринты по две недели

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

Пять калькуляторов

Сайт разделили на функциональные блоки и модули. Специфика бизнеса требовала 5 разных калькуляторов и 4 принципиально разных карточек товаров. Так, расчет лакокрасочных материалов принципиально отличается от материалов на распил и от простых товаров, к которым мы привыкли в обычных интернет-магазинах, продающихся поштучно.

1

/

Результат проектирования

457

— количество прототипов десктопа

III. Дизайн-концепция

Диаграмма

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

Задачи дизайна

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

Ход работы

Обработали результаты интервью и сформировали 4 персоны с достаточным числом сценариев, покрывающих основные задачи. Описали персоны и пересечение сценариев.

Итог работы

Объединили три разных сайта в единый портал с корзиной и логином.
Решили основные боли заказчика:

  1. 1. Предложили вывести на карточку товара возможность добавлять его напрямую в заявку. Заявкам дали возможность добавлять название, чтобы их можно было отличить, не просматривая состав.
  2. 2. Вместо того, чтобы заставлять клиента два раза заказывать один и тот же товар, мы предложили новые возможности — бронировать все товары в заказе и отменять те, которые клиент не хочет ждать.
  • 78 страниц
    ППО

  • Дизайн концепция и дизайн-система

  • 457
    прототипов

  • > 2000 часов
    команды

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

Никита Борисенок

руководитель проекта ТБМ-онлайн

Над проектом работали

Команда

  • Петр Федюшкин

    Аккаунт директор

  • Артем Гриценко

    Руководитель проектирования

  • Парий Ольга

    Менеджер проекта

  • Константин Кислейко

    Арт-директор

  • Анна Романова

    Ведущий проектировщик

  • Дмитрий Кожевников

    Дизайнер

  • Дмитрий Подлужный

    Ведущий проектировщик

Клиент

  • Афанасьева Татьяна

    Бизнес-аналитик

  • Борисенок Никита

    Руководитель проекта ТБМ-Онлайн

  • Зубков Денис

    Директор ДИТ

  • Решетов Григорий

    Контент-менеджер

  • Ястребова Олеся

    Руководитель розничной торговли

  • Кутлугильдин Алексей

    Руководитель отдела интернет — маркетинга Департамента розничных продаж