UX-отдел на аутсорсе для строительного интернет-магазина

«От Винта» — компания, торгующая строительными и отделочными товарами в Орехово-Зуевском районе Московской области. Интернет‑магазин — важный канал работы с целевой аудиторией: не только местными жителями, но и дачниками со всего Подмосковья.

Мы начали сотрудничество с компанией в конце 2022 года с UX-аудита и точечного редизайна ключевых страниц интернет-магазина «От Винта».

Первый опыт был более чем успешным. Через неделю после релиза продажи через сайт выросли более чем в 2,5 раза, а заказчик вернулся, чтобы продолжить сотрудничество.

С тех пор мы работали (и работаем) с «От Винта» как UX-отдел на аутсорсе.

Бизнес-задача

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

Главная

Дизайн-задачи

Добавить новые разделы сайта и новую функциональность интерфейса.

❮ ❯

Работа со сметами в мобильной версии. Меню, добавление товара, выбрано несколько товаров чекбоксом, один из товаров недоступен

Результат

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

Доработали многие из существующих ключевых старниц (главную, каталог, карточку товара и т.д.).

❮ ❯

Страница заказа, закрытый заказ, заказ на согласовании

Спроектировали абсолютно новые разделы и возможности интерфейса. Главные из них:

• Биржа профессионалов
• Личные кабинеты покупателя и строителя
• Сметы
• Коллекции

Биржа профессионалов. Страница для заказчиков

Биржа профессионалов

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

Биржа профессионалов. Список строителей

Составили сценарии взаимодействия пользователя с инструментов для нескольких типичных жизненных ситуаций.

❮ ❯

Биржа профессионалов. Некоторые сценарии

Use cases — пользовательские сценарии, сценарии взаимодействия, сценарии использования, пользовательские сценарии — последовательное описание поведения человека при взаимодействии с системой и системы, когда с ней взаимодействует человек. У нас есть модуль дизайн-задачника «Сценарии взаимодействия» для тех, кто хочет научиться их использовать в дизайне интерфейсов.

Спроектировали профиль профессионала в разных состояниях: вот строитель, вот такие работы он делает, вот его кейсы.

❮ ❯

Строитель создает профиль, предпросмотр. А вот так его профиль выглядит для заказчика

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

❮ ❯

Строитель создает кейс, заказчик просматривает кейс 1, заказчик просматривает кейс 2

Интересное решение: мы предложили показывать в кейсе, какие материалы использовались при строительстве или ремонте именно этого дома или помещения.

Биржа профессионалов. Фрагмент кейса со списком материалов.

Личный кабинет

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

❮ ❯

Левое меню: в личном кабинете обычного пользователя, в личном кабинете строителя, стать стороителем

У строителя есть дашборд, который позволяет вести более сложные расчеты с «От Винта». Тут же, в дашборде, показываем состояние счета строителя, скидки и выгоды — сколько профессионал уже сэкономил благодаря сотрудничеству с «От Винта».

Личный кабинет строителя. Дашборд

Кроме того, у строителя более подробные сметы. Но про них расскажем отдельно.

Сметы

Этот инструмент мы придумали, когда работали над сайтом совсем другого строительного магазина. Но в тот раз идею не реализовали, зато она очень пригодилась для «От Винта».

Сценарий создания сметы

Смета — это список товаров, которые пользователь выбирает для конкретного строительного проекта.

Смета

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

Смета, в которой есть несколько категорий и товары без категории

Для обычного пользователя смета — это инструмент наподобие «Избранного», только «Избранное» всего одно, а смет может быть сколько угодно.

Список смет

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

❮ ❯

Работа со сметами в мобильной версии. Список смет, поделиться сметой, popup копирования сметы, рopup создания категории, добавление заметки, редактирование заметки

И в результате этот инструмент мотивирует профессионалов делать покупки именно в «От Винта».

Коллекции

Некоторые строительные товары составляют коллекции. Для керамической плитки это скорее правило, чем исключение.

❮ ❯

Коллекции плитки. Разводящая страница и всплывающее окно быстрого просмотра

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

Страница коллекции

Плитку можно смотреть по коллекциям, а можно по отдельным элементам.

Коллекции плитки. Элементы

При поиске по коллекциям результат можно выводить как по коллекциям, так и по отдельным элементам.

❮ ❯

Результаты поиска. Выводим коллекции и элементы, выводим только элементы

Интересное решение. Предложили связать страницу коллекции со одной или несколькими страницами дизайн-проектов, использующих эту коллекцию.

Страница дизайн-проекта

Особенности

Мы сотрудничаем с «От Винта» как UX-отдел на аутсорсе. Они приносят новые задачи нашей команде, постоянно работающей именно над этим проектом.

Очень удобный режим работы для всех участников.

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

2. Заказчику не нужно тратить время на поиск подрядчика или деньги на постоянное содержание своего UX-отдела. Он платит только за сделанные задачи.

«От Винта» — редкий случай заказчика, который делится с нами статистикой, свидетельствующей о том, насколько сотрудничество с нами было полезно для бизнеса.