У нас была простая задача — освежить дизайн. А мы структурировали 15000+ товаров для опта и розницы

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

Наши задачи:

• Провести исследование аудитории и анализ конкурентов;

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

• Проработать каталог и упростить пользователям поиск среди тысяч позиций;

• Продумать функционал личного кабинета, чтобы пользователи могли легко управлять заказами, своими данными и оставлять обращения;

• Повысить интерес к ассортименту и услугам «Ставилона».

Упор будет не столько на дизайне, сколько на глубокой проработке UX. К такому выводу пришли после опроса 30 респондентов. Затем составили богатый мудборд и провели глубокую аналитику — проанализировали 18 сайтов и 1000 карточек. Продумали навигацию, показали дизайн-концепции клиенту. Не все получалось сразу.

В итоге продающей силой сайта стали каталог, карточки товаров и личный кабинет. Мы собрали лучшие практики сильных игроков и внедрили их в наш проект — папки с подборками, коллекции и емкие карточки товаров.

«Ставилон» на рынке уже более 20 лет. За это время компания обновила дизайн сайта всего 2 раза, последний — в 2016. Так часто бывает у мастодонтов рынка, которые сосредоточили в своих руках огромную клиентскую базу и сколотили себе большое имя. Им не нужно переживать о внешнем виде сайта, потому что он не влияет на продажи.

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

Даже крупным игрокам придется пересобрать сайт. Либо придется мириться с падением продаж. Второе не устраивало ни нас, ни клиента. Поэтому мы замахнулись сделать такой интерфейс, чтобы пользователи моментально вспоминали «Ставилон» и закупались именно там, когда им понадобится инвентарь для ресторана или дома.

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

Сейчас пользователи заходят на сайт, не потому что им нравится на нем заказывать, а потому, что нужно. И это проблема — значит, сайт не закрывает потребность пользователей в удобстве при заказе. Это не догадки, а выжимка из исследования. Мы изучили отзывы клиентов и собрали фокус-группу из 30 человек. Вот какие инсайты мы получили от респондентов:

• Фотографии товаров качественные, но нет такого, что хочется сложить в корзину и то, и то, и другое;

• Ощущение, что сайт с пользователем не заодно, а по отдельности. Задача сайта — выдать полотно фильтров и товаров, а моя — отыскать товар и попасть на кнопочку;

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

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

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

Затем составили мудборд. Он состоял из 4 опорных направлений: цветовая гамма, графика, типографика и формы. Внутри каждой категории были подкатегории. Из разнообразия этих компонентов мы составили общую композицию сайта.

У «Ставилона» несколько направлений: упаковка, посуда, оборудование, бытовая химия. Мы изучили, как конкуренты и другие игроки отражают товары в карточках, что показывают на главной странице, что пишут в описании к товару. По каждой категории и товару мы искали интересные решения. Вдохновлялись крупными интернет-магазинами: М.Видео, OZON, Мегамаркет.

Мы проанализировали 18 сайтов и 1000 карточек товаров. А дальше перешли к дизайн-концепции.

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

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

На каждом макете старались сделать формы неправильными, разбавляли цвета, компоновали элементы. И — тупик. Главную страницу мы не могли утвердить месяц. Да, так бывает. Все потому, что сложно сломать то, над чем ты так трудился.

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

«То, о чем говорил клиент и то, что было на макетах — разные вещи. Нужно уметь читать клиента между строк. Бывает, что не сразу получается уловить ход мыслей клиента, но это приходит с опытом» — Анна Патурина, Teamlead 365 Media Group.

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

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

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

Когда мы продумывали такую навигацию, появилось ощущение, что мы сходили в баню и сильно там пропарились. Ведь в «Ставилоне» 16250 позиций. Они могут быть разного цвета, размера и сделаны из разных материалов. Каждую нужно отнести к подкатегории, а подкатегорию к категории. Это тяжело, потому что нужно подумать за пользователя — а как ему будет легче и быстрее?

Изображения для иконок категорий мы брали с фотостоков, но каждое обрабатывали часами — перекрашивали в нужный цвет, обрезали, делали акцент на каком-то предмете, а на других предметах заглушали цвет. И таких картинок по 3 на выбор к каждому разделу.

Основной графический прием — как раз те необычные формы, над которыми мы долго бились. Чтобы пользователь не скучал, мы добавили ховер-эффекты и микроанимацию. Все шевелится, пульсирует и заигрывает с пользователем.

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

Другое дело — холодильники. Их не покупают оптом, значит, искать будут поштучно. И для поиска таких товаров здесь уже другие правила: поиск по бренду.

Самое сложное — сделать просто и филигранно. У нас получился простой и живой каталог, который приглашает пользователя посмотреть, из чего он состоит.

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

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

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

Кажется, что карточка — про товар. На самом деле, она про пользователя. Мы учли десятки сценариев, изучили особенности продажи тысяч позиций и отобразили это на экране.

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

Мы хотели добавить избранное для товаров. А потом подумали, что пользователям будет приятнее не просто сохранять товары в избранное, а сортировать их по папкам и создавать свои подборки.

Это очень удобно, если нужно показать кому-то понравившиеся различные столовые приборы, например: выбрал, сохранил в папку, а потом этой папкой поделился. Так мы превратили скучный список избранных товаров в инструмент для структурирования и планирования покупок.

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

В итоге получился продуманный до мелочей личный кабинет.

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

Если пользователь покупает одноразовые стаканы и совсем забыл про крышки, мы напомним и предложим крышки нужного размера. И так не только со стаканами и крышками.

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

Но и это не все. В дополнение к товару мы рекомендовали услуги «Ставилона». Человек покупает плиту — показываем услугу по сервисному обслуживанию.

• Собрали 30 респондентов, детально изучили 18 сайтов конкурентов и проанализировали 1000 карточек товаров, чтобы применить лучшие решения рынка на проекте;

• Предложили 8 дизайн-концепций;

• Предсказали каждое действие пользователей;

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

• Изучили десяток тысяч позиций в каталоге и проработали карточки товаров, чтобы пользователь увидел, что товар можно купить по-разному — в розницу, оптом, коробками;

• Разработали личный кабинет: регистрация, обращения, заказы. А еще добавили папки для избранных товаров, чтобы пользователи сортировали понравившиеся позиции и делились своими подборками;

• Придумали, как дополнительно продвигать услуги «Ставилона»;

• Не просто предложили дизайн-концепцию, а пересобрали функционал интернет-магазина.