Минус корзина, плюс бронь: сократили путь пользователя до трех кликов. ЦифроСити

Мы сотрудничаем с командой Цифросити с 2015 года. Перед вами уже третья версия сайта, которую мы разработали.

В этот раз задача звучала так: создать самый короткий пользовательский путь при оформлении заказа.

Вместо стандартной еком-воронки мы сделали сервис бронирования, который помогает выбрать смартфон и приводит в офлайн-магазин. Рассказываем, какие UX-решения позволили сократить путь до покупки и не потерять пользователей по дороге

«ЦифроСити» — сеть магазинов техники

Основное направление — продажа смартфонов и электроники популярных брендов, в первую очередь iPhone и Samsung.

Витрина, а не классический еком

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

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

Главная задача — сократить путь пользователя

Клиенту нужно было упростить путь до покупки. Поэтому мы убрали корзину, оформление заказа и онлайн-оплату, оставив только бронирование. 

Выбор модели — заявка — визит в магазин. Всего 2-3 действия вместо длинной воронки.

Разделяем сайт на два 

Бизнес существовал в двух разных городах с разными процессами.

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

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

Мультирегиональный сайт перестал отражать то, как бизнес работает на самом деле. 

Поэтому мы разделили продукт на два сайта — «ЦифроСити» и «ЦифраПитер»: с общей UX-логикой, но с учетом особенностей и сценариев каждой сети.

Карточка-конструктор, которая заменяет каталог

Одним из решений стала переработка карточки товара. Вместо обычной страницы мы сделали из нее удобный конструктор.

Мультирегиональный сайт перестал отражать то, как бизнес работает на самом деле. 

Поэтому мы разделили продукт на два сайта — «ЦифроСити» и «ЦифраПитер»: с общей UX-логикой, но с учетом особенностей и сценариев каждой сети.

Внутри карточки можно:

1. переключаться между моделями и сериями;

2. сравнивать варианты, не возвращаясь в каталог;

3. менять цвет, объем памяти, конфигурации;

4. сразу видеть цену и наличие нескольких моделей.

При этом всю эту информацию мы вынесли на первый экран. 

Интеллектуальный поиск на модуле Bitrix

Отдельная боль старого сайта — поиск. Классический поиск не прощает опечатки, транслит, неправильную раскладку.

В итоге пользователь должен догадаться, как правильно написать запрос.

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

Теперь неважно, как человек написал запрос — сайт все равно приведет его к нужному товару.

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

Как особенности логистики легли в интерфейс

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

1. если модель есть в любом магазине города, пользователь видит плашку «Можно забрать через 10 минут»;

2. если товар нужно везти из другого региона — срок меняется на 1-2 дня.

Дизайн: обновить, но не усложнить

Мы обновили визуальную часть сайта без радикального ребрендинга: аккуратно доработали логотипы, заменили шрифты и освежили графику. Цель была не «удивить дизайном», а сделать интерфейс понятным и приятным в использовании.

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

На главную страницу добавили круглые карточки для быстрого перехода в популярные разделы. Раньше карточки с новинками и хитами шли подряд. Мы добавили баннеры и визуальные паузы, чтобы страница не воспринималась как однообразное полотно.

— Иосиф Ясюкевич, арт-директор KLBR

Все сервисные страницы в одном месте

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

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

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

Ваш сайт может продавать не хуже маркетплейсов. И даже стабильнее

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

И не забудьте подписаться на наш канал:)