Главное о кейсе
Промышленная группа Векпром — это один из крупнейших поставщиков станков и промышленного оборудования в стране, а это более 50 000 наименований продукции в наличии, склады общей площадью более 15 000 кв. м., а также единственный в стране демо-зал оборудования.
Компания обратилась к нам в Tiqum с главной задачей для нового сайта — сделать дизайн нового сайта компании Векпром с фокусом на UX-удобство подбора и покупки оборудования, но и не забыть про современный, чистый и понятный UI.
Итогом челленджа для нашей команды стали отрисованные 21 страница интернет-магазина с адаптивными версиями, а это порядка 90 экранов (!). И потратили на это с учетом согласований всего 2,5 недели (!)
Бизнес-задача и ее решение
Ключевые задачи редизайна:
— удобство подбора и покупки оборудования с любого устройства
— современный, чистый и понятный интерфейс
— рассказать о компании и услугах в корпоративном стиле
До работы с нами, ранее заказчик обращался к 2 другим подрядчикам. Инвестировал несколько миллионов рублей и более 1 года на отрисовку и разработку. Поскольку заказчик уже устал, ожидая новый сайт более года, мы решили рискнуть, и приняли вызов — отрисовать новый удобный дизайн интернет-магазина всего за 2 недели, без потери качества и глубины проработки.
Начали мы с масштабного исследования интерфейсов и паттернов поведения пользователей в интернет-коммерции (исследовали лучшие практики маркетплейсов, B2B и B2C интернет-магазинов; исследовали отраслевые магазины, а также другие сегменты). Результаты исследования упаковали в большой мудборд и большую таблицу, провели тщательный анализ, и составили список лучших вариантов решения для каждого пользовательского сценария.
Реализация и инсайты
1/ Одна из наиболее сложных задач в проекте — разработать новую шапку интернет-магазина (это блок, который находится вверху любой страницы). Шапка является одним из ключевых элементов навигации по интернет-магазину. Необходимо было уместить всю ключевую информацию о компании: это все разделы о компании, контакты, каталог, поиск, вход в личный кабинет и другие.
Также, в лучших практиках e-commerce, в шапку были добавлены популярные категории оборудования, каждую категорию можно открыть быстро по наведению мышкой и посмотреть все подкатегории товаров. В итоге у нас получилась лаконичная и хорошо структурированная навигация по сайту и каталогу товаров с учетом лучших практик юзабилити и дизайна.
2/ Страница товара, также была непростая с точки зрения дизайна и верстки. Для промышленного оборудования характерно довольно большое количество информации, которую необходимо отобразить на сайте:
— комбинации вариантов товара,
— технические характеристики,
— подробное описание с графиками, фотографиями и встроенным видео,
— продажа дополнительного оборудования (доп-опции);
— а также продажа запчастей и расходных материалов, которые подходят к просматриваемому станку.
Для этого были разработаны вертикальные табы, которые фиксируются в левой части экрана, а справа можно скроллить контент. Также на странице товара мы добавили триггеры для покупателей: гарантия, доставка, сервис и оплата — каждый с небольшим описанием. Это помогает снять частые боли и страхи клиентов перед заказом и повышает конверсию.
3/ Так как у клиента более 50 000 тысяч наименований товаров, поиск по каталогу необходимо было сделать интуитивно понятным и простым. В реализованном нами интерфейсе поиск можно осуществлять как из шапки сайта, так и находясь внутри любой категории.
Фильтр разработан простым и функциональным: при фильтрации условий, в верхней части каталога дублируются примененные фильтры, которые:
— с одной стороны помогают пользователю понять итоговый набор выбранных фильтров;
— а с другой стороны, быстро очистить любой из выбранных фильтров.
Отдельно стоит отметить, что за это время мы также полностью подготовили макеты для передачи разработчикам: разработали UI-кит, собранный на дизайн-токенах и по принципу атомарного дизайна. Благодаря такому подходу, при внедрении дизайн-токенов в исходный код и в пайплайн CI/CD, можно сделать так, чтобы при изменении дизайнером графического макета страницы, эти изменения автоматически применялись и появлялись на сайте, без программирования, без привлечения разработчиков. Это в несколько раз ускоряет разработку и позволяет в дальнейшем легко масштабировать и поддерживать новый интернет-магазин.
Мобильная версия и адаптивы
Обязательная часть при отрисовке макетов — учитывать разрешения экранов различных устройств. Две трети клиентов Векпрома работают с сайтом с компьютеров, а более трети — со смартфонов. Учитывая тренд на работу с мобильных устройств, проанализировав мобильную версию старого сайта (которая не удобная), и опросив небольшую фокус-группу, мы сделали вывод, что для большинства корпоративных клиентов Векпрома важно наличие мобильной версии. Мы отрисовали каждую страницу в 4 разрешениях: большой экран, ноутбуки, планшеты и мобильные устройства.
В мобильной версии дизайн адаптируется и становится похож на мобильное приложение: все основные разделы переехали с верхней части экрана в таб-бар в нижней части, что делает их максимально доступным для пользователя, а сам сайт — похожим на мобильное приложение.
