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

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

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

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

Что было?

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

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

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

Табы скрывают контент от пользователя. Плюсом — неверный масштаб изображений и ужасные анимации вылезающих по бокам камней Старая версия сайта
Табы скрывают контент от пользователя. Плюсом — неверный масштаб изображений и ужасные анимации вылезающих по бокам камней Старая версия сайта
Анимация налетает на контент. Личный кабинет ведёт в никуда Старая версия сайта
Анимация налетает на контент. Личный кабинет ведёт в никуда Старая версия сайта
Фильтры скрываются от пользователя. Ради количества карточек в ряд пожертвовали размером фотографий. Информация о производителе и артикулы почти не видны Старая версия сайта
Фильтры скрываются от пользователя. Ради количества карточек в ряд пожертвовали размером фотографий. Информация о производителе и артикулы почти не видны Старая версия сайта
Два CTA на страницу и неудобная для сканирования взглядом верстка характеристик Старая версия сайта
Два CTA на страницу и неудобная для сканирования взглядом верстка характеристик Старая версия сайта

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

Экспресс-анализ

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

Местами старая версия выглядела откровенно недоделанной. Последний пример старой версии, обещаю
Местами старая версия выглядела откровенно недоделанной. Последний пример старой версии, обещаю

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

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

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

К сожалению, некоторые идеи мы не смогли реализовать в рамках бюджета. Наша команда продолжает поддерживать проект и надеется когда-нибудь дополнить интернет-магазин новыми функциями Пример UX-персоны для проекта «Ювелирторг»
К сожалению, некоторые идеи мы не смогли реализовать в рамках бюджета. Наша команда продолжает поддерживать проект и надеется когда-нибудь дополнить интернет-магазин новыми функциями Пример UX-персоны для проекта «Ювелирторг»

Прототипирование

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

Отчет <a href="https://vc.ru/marketing/106373-digital-trendy-2020-uvelichenie-trafika-usilenie-mobile-otchet-similarweb" rel="nofollow noreferrer noopener" target="_blank">SimilarWeb</a>
Отчет SimilarWeb

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

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

Примеры экранов прототипа
Примеры экранов прототипа

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

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

Baymard Institute
Baymard Institute

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

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

Дизайн

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

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

Часть главной страницы Новая версия сайта
Часть главной страницы Новая версия сайта

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

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

В разговоре с заказчиком выяснилось, что есть постоянные категории товаров со скидками. Вынесли их на главную, потому что <a href="https://api.vc.ru/v2.8/redirect?to=https%3A%2F%2Fwww.bigcommerce.com%2Fblog%2Fcustomer-discount%2F%23customers-genuinely-like-shopping-discounts&postId=147496" rel="nofollow noreferrer noopener" target="_blank">люди любят скидки</a> Новая версия сайта
В разговоре с заказчиком выяснилось, что есть постоянные категории товаров со скидками. Вынесли их на главную, потому что люди любят скидки Новая версия сайта

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

«Хочу подарок» — самая популярная акция. Ювелирторг каждый месяц разыгрывает украшения среди покупателей  Новая версия сайта
«Хочу подарок» — самая популярная акция. Ювелирторг каждый месяц разыгрывает украшения среди покупателей  Новая версия сайта

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

Чтобы показать их подлинность, мы даём сылку на источники Новая версия сайта
Чтобы показать их подлинность, мы даём сылку на источники Новая версия сайта

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

Макеты в Figma Новая версия сайта
Макеты в Figma Новая версия сайта

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

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

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

Человек может добавить товары для ухода в корзине. Это увеличивает допродажи и улучшает пользовательский опыт Новая версия сайта
Человек может добавить товары для ухода в корзине. Это увеличивает допродажи и улучшает пользовательский опыт Новая версия сайта

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

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

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

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

Личный кабинет Новая версия сайта
Личный кабинет Новая версия сайта

Результаты

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

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

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

Анна Анохина, Директор по маркетингу сети «Ювелирторг»

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

Заключение

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

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

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

3838
71 комментарий

Вот вам кейс от известной ювелирной сети: каждый месяц объявляйте о закрытии)

5
Ответить
Автор

Sunlight, залогинься)

8
Ответить

Ребятаааа, логотип магазина, конечно, пиздец

6
Ответить
Автор

Логотип делали не мы. Переговоры об обновлении айдентики ведутся, но пока безуспешно.

1
Ответить

Логотип, конечно, все впечатление портит

6
Ответить
Автор

Пора звать маркетологов Ювелирторга. Если что, логотип не наших рук дело :)

1
Ответить

В Омске у них лучший сервис среди ювелирных маркетов) лого и баннеры действительно портят общий вид, а ваш кейс крутой! Браво! 

3
Ответить