Разработка интернет-магазина: как локальная омская сеть вышла на всероссийский уровень

Мы сделали из устаревшего онлайн-каталога интернет-магазин, и наш клиент вышел с ним на федеральный уровень. Меня зовут Женя Князев, я — продуктовый дизайнер в Mojo, и это — наш первый кейс на vc.ru.

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

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

Ювелирторг — омская сеть магазинов ювелирных украшений. В интернете у компании был только онлайн-каталог без возможности купить и с «морально устаревшим» дизайном.

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

В конце зимы 2020 года мы пришли к соглашению и начали работу.

Команда провела краткий дизайн-аудит основных страниц сайта и обсудила с заказчиком результаты.

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

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

После этого мы перешли к разработке прототипов основных страниц: главная, каталог, карточка товара, корзина. Мы выбрали Mobile First подход, потому что статистика однозначна: доля мобильных посещений и покупок растет.

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

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

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

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

Мы опросили пользователей и вынесли популярные фильтры «на расстояние клика». Остальные спрятали за кнопкой «еще».

Оставшуюся функциональность я опишу уже на примерах дизайн-макетов.

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

«Фирменный синий» компании был слишком тёмным, для сайта мы согласовали монодиаду голубых цветов. Для акцентов подобрали чистый и яркий голубой, а для менее важных элементов пастельный и нежный светло-синий.

Для каталога мы организовали фотосессию: написали ТЗ, подобрали референсы, контролировали процесс и пост-обработку.

Полностью переосмыслили главную страницу. Вывели дополнительные категории и товары.

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

Избавились от табов и добавили на главную страницу отзывы. Они усиливают доверие к магазину и повышают лояльность пользователей.

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

Допродаём украшения в модальном окне при добавлении товара в корзину.

В корзине мы даём пользователю возможность проверить самые важные данные: изображение, размер, стоимость. Подробно показываем, из чего состоит сумма покупки.

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

Заказ можно завершить без упоминания о регистрации или авторизации — registration wall снижает конверсию.

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

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

После нашей акции с баннерами Ювелирторг получает несколько десятков заказов по всей России каждую неделю. Так локальная омская сеть вышла на всероссийский уровень и превратилась в полноценный интернет-магазин.

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

Напишите или позвоните нам — будем рады помочь и с вашим интернет-магазином. А еще мы написали крутой цикл статей про eCommerce. Его можно найти в нашем блоге.

Ставьте «+1», если кейс понравился. Спасибо за прочтение!