Ставилон

клиент

Компания «Ставилон» оснащает бары, рестораны и магазины посудой, упаковками и профессиональным кухонным оборудованием. А еще помогает с организацией точки питания с нуля. Работает как с розничными покупателями, так и с крупными оптовиками.

задача

• Провести исследование аудитории и анализ конкурентов.
• Предложить дизайн-концепции для нового интерфейса, который будет отражать масштабы компании.
• Проработать каталог и упростить пользователям поиск среди тысяч позиций.
• Продумать функционал личного кабинета, чтобы пользователи могли легко управлять заказами, своими данными и оставлять обращения.
• Повысить интерес к ассортименту и услугам «Ставилона».

решение

• Собрали 30 респондентов, детально изучили 18 сайтов конкурентов и проанализировали 1000 карточек товаров, чтобы применить лучшие решения рынка на проекте.
• Продумали логику каталога: добавили поиск по сериям и брендам, настроили фильтры поиска, и в итоге у нас получился многоуровневый каталог. Подобрали и обработали изображения для каждого раздела и анимировали их, чтобы добавить живости сайту.
• Проработали карточки товаров: пользователь увидит, что товар можно купить по-разному — в розницу, оптом, коробками.
• Разработали базовый функционал личного кабинета: регистрация, обращения, заказы. А еще добавили папки для избранных товаров, чтобы пользователи сортировали понравившиеся позиции и делились своими подборками.
• В корзине мы прикрепили систему скидок. Пользователь увидит, действует скидка или нужно заказать что-то еще. И добавили рекомендации, например, когда человек покупает стаканчики для кофе, система предлагает крышки нужного размера. Так мы и о пользователе заботимся (напоминаем), и о бизнесе (увеличиваем конверсию).

новый визуальный стиль и функции

Перед тем, как разработать дизайн-концепцию, мы изучили отзывы клиентов и собрали фокус-группу из 30 человек. Вот, какие инсайты мы получили от респондентов:

• Фотографии товаров качественные, но нет такого, что хочется сложить в корзину и то, и то, и другое.
• Ощущение, что сайт с пользователем не заодно, а по отдельности. Задача сайта — выдать полотно фильтров и товаров, а моя — отыскать товар и попасть на кнопочку.
• Товарам как будто тесно в каталоге: их очень много. Каждый из них хочет внимания. А получает он его не всегда из-за того, что теряется среди стопки других товаров.

Но еще у нас были референсы от клиента — ему хотелось добавить необычные формы как у ВкусВилла. Мы добавили такие необычные формы, сохранили визуальный фирменный стиль «Ставилона» и доработали логотип. А еще добавили на сайт анимацию, что сделало сайт живым и интерактивным. Суммарно мы предложили восемь дизайн-концепций, но утвердили девятую — она стала синергией идей из предложенных нами концепций.

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

реорганизация каталога

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

У «Ставилона» 16000 товаров. поэтому мы внедрили мегаменю — это вложенность категорий. Например, в категории «посуда» есть категория «бокалы». Пользователь проваливается в нужную категорию и ему не нужно листать весь каталог, чтобы посмотреть, какие бокалы можно заказать. Но также можно искать товары по фильтрам, которые настраиваются.

• Раработали многоуровневый каталог для быстрого поиска по категориям.
• Добавили удобный фильтр с учетом всех параметров ассортимента.
• Создали универсальный компонент карточки для выбора товара в разных количествах.

карточка товара

Карточка товара — страница, на которой пользователь принимает решение покупать или нет. Мы должны были сделать так, чтобы пользователь легко ознакомился со всеми характеристиками, ценой, рассмотрел товар и решился на покупку. Классическая карточка: фотография + описание. Но нам пришлось об этом напрочь забыть. В «Ставилоне» тысячи товаров, разного цвета, формы, из разных материалов, которые еще и продаются по-разному — что-то только оптом, что-то поштучно, что-то коробками. 

Мы перекопали весь ассортимент, узнали, как продают товары и разделили их по типу продаж. Если товар продается в коробке, то нужно решить, сколько позиций будет в коробке, а может, коробки будут разные — по 100шт, 300шт и 1000шт? Также узнали у клиента, какие товары продаются только оптом, от 20 штук. Это тоже время: позвонить клиенту, найти такие товары, структурировать и отобразить в карточках. 

Если пользователь захочет купить для ресторана 20 коробок бокалов, нужно сделать так, чтобы он сразу увидел: сколько штук в коробке, сколько коробок он добавил, как изменилась цена.

• Добавили блок с предложением приобрести товары из данной серии или коллекции, а также аналогичные товары.
• Для каждого блока о товаре мы разработали свой тип отображения для более информативного и качественного просмотра .

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

В личном кабинете пользователь может управлять заказами, отслеживать статусы, повторять покупки, просматривать и редактировать личные данные, настраивать уведомления и так далее. У нас получился продуманный до мелочей личный кабинет. 

Выбрали стандартное левостороннее меню, чтобы освободить часть экрана для основного контента.

корзина

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

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

оформление заказа

Добавили возможность оформить заказ близкому человеку, а также выбрать удобную дату и время доставки.

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

Руководитель проекта 3  ●  Менеджер проекта 2  ●  Бизнес-аналитик  ●  Арт-директор  ●  Ux/Ui-дизайнер 2

Front-end разработчик 3  ●  Back-end разработчик 3  ●  SEO-специалист