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

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

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

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

Что было?

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Отчет SimilarWeb

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

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

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

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

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

Baymard Institute

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

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

Дизайн

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Результаты

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

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

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

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

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

Заключение

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

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

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

0
71 комментарий
Написать комментарий...
Andrew Stepanov

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

Ответить
Развернуть ветку
Antro
Автор

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

Ответить
Развернуть ветку
1 комментарий
Alexey Rusanov

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

Ответить
Развернуть ветку
Antro
Автор

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

Ответить
Развернуть ветку
Егор Ярко

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

Ответить
Развернуть ветку
Antro
Автор

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

Ответить
Развернуть ветку
2 комментария
Юлия Сохненко

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

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
2 комментария
Antro
Автор

Юля, если вы не фейк, не расстраивайтесь. Тут так бывает. Спасибо за комментарий!

Если фейк, тоже не расстраивайтесь. Фейк вы приятный :)

Ответить
Развернуть ветку
2 комментария
Ян Одинцов

Поделитесь, что делали для Walmart?)

Ответить
Развернуть ветку
Antro
Автор

VC мне друг, но NDA дороже. Не можем рассказать по условиям договора. 

Ответить
Развернуть ветку
4 комментария
Maxim Sergeevich

В целом дизайн и логика понравились. Но вот их лого (уже понятно, что не ваша работа), а особенно их баннеры - это жуть и колхоз. Реально портят все впечатление (особенно первое). К тому же эти их баннеры совершенно не оптимизированы, что сказывается на быстродействии (на смартфонах Гугл пейджспид выдал 22 и примерно такое же время загрузки для взаимодействия. На десктопах все получше - 61)

Ответить
Развернуть ветку
Antro
Автор

Баннеры не наши( Тоже ведём переговоры, тоже пока безуспешно.

Ответить
Развернуть ветку
Victoria Kolmakova

Это вы еще баннеры в городе не видели. Там хуже...

Ответить
Развернуть ветку
1 комментарий
Art Grom

Сайт работает очень медленно. Особенно на смартфоне, хотя заявляется как mobile-first.
Дополнительную "тормознутость" создает скорость и задержка анимаций элементов, появляющихся при наведении. Например, попробуйте навести на "Сравнение" в шапке сайта. А еще попробуйте навести на этот пункт мышку и быстро убрать ее. Окошко появится но не исчезнет.

Дизайн стандартный и не запоминающийся.
Фильтры – боль. Причем все 3 вида – Опросник – выбери ответ и жди 3-5 сек, пока загрузится выборка. Быстрые фильтры на странице – доступен только единичный выбор, хотя стоят чекбоксы. "Все фильтры" – не работает кастомный скролл внутри попап окна с фильтром. Вместо скролла параметров фильтра скроллится вся страница. 
На странице товара – фото товара прыгает при скролле. Давно уже есть position: sticky
При наведении на пункт "Каталог" в главном меню, нет выпадающего списка с категориями каталога, хотя это стандарт. Вместо этого нужно нажать, перейти на страницу каталога и искать нужную категорию среди огромных плиток.

Ответить
Развернуть ветку
Antro
Автор

Всё справедливо, передали в разработку.

Всё, кроме плавающей картинки, так задумано. Фото украшения всегда рядом.

Ответить
Развернуть ветку
2 комментария
Сергей Никитин

https://omskuvelir.ru/catalog/koltsa/
Заголовок "Какое кольцо вы ищите?" - это ваши SEO специалисты такие грамотные?

Ответить
Развернуть ветку
Antro
Автор

Спасибо за верную службу на посту орфографии :) Передам, чтобы исправили ошибку

Ответить
Развернуть ветку
1 комментарий
Abdurahmon Olimov

Короли UI-дизайна и интернет магазинов вернулись)

Ответить
Развернуть ветку
Antro
Автор

Снимаем шляпу 🎩

Ответить
Развернуть ветку
Андрей Михайлюк

То самое чувство, когда пользователи vc делают работу за тестировщиков 😃

Ответить
Развернуть ветку
Antro
Автор

Самый внимательный отдел качества на аутсорсинге 👍

Ответить
Развернуть ветку
Руслан Киямов

Мы делали им первый сайт, кажется в 2013 году, господи прости на Joomla. Возможно это именно та какашка, которую вы переделали.

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

А вот баннерную болезнь, они так и не вылечили к 2020 году. Очень жаль.

В целом, с ЮТ приятно было работать, но тяжело в плане реализации идей и новшеств.
У вас получилось, вы - молодцы!

Ответить
Развернуть ветку
Antro
Автор

Спасибо большое за теплые слова 💙 Мы не сдаемся ✊

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Antro
Автор

Ну тут какого уровня критика, такого уровня и ответ.

Ответить
Развернуть ветку
2 комментария
Mihael Isaev

О, вспомнилась веб-студия "Сокол" 😃
https://www.youtube.com/watch?v=3io3-R-Vc1E

Ответить
Развернуть ветку
Mihael Isaev
Ответить
Развернуть ветку
1 комментарий
Алексей Максимов

И сколько стоит разработать интернет-магазин?

Ответить
Развернуть ветку
Алексей Максимов

В Омске.

Ответить
Развернуть ветку
4 комментария
Millsey

*Когда сайт студии лучше сайта компании* 

Ответить
Развернуть ветку
Antro
Автор

Придется привлечь отдел аналитики, чтобы разобраться комплимент это или наезд 🤔

Ответить
Развернуть ветку
1 комментарий
Юрий Саютин

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

Ответить
Развернуть ветку
Antro
Автор

В Сибири зима по полгода длится. Нет ей ни конца, ни края – такой вот ребус.
Подсказка: в нашем материале речь о феврале :)

Ответить
Развернуть ветку
Phil Balita

Какие технологии использовали?

Ответить
Развернуть ветку
Андрей Конев

А выросла ли конверсия сайта?

Ответить
Развернуть ветку
Antro
Автор

А какая именно конверсия интересна? В онлайн-каталоге люди только смотрели, поэтому конверсии в покупку не существовало :)

Ответить
Развернуть ветку
Илья Ушаков

Вы, конечно, большие молодцы, но с чего вы взяли, что отзывы повышают лояльность пользователей? Есть какие-то исследования на этот счет? Тот же вопрос к доп. продажам; "...и предлагает товары в комплекте — как это сделал бы хороший продавец" Интересные истории. Только вот оффлайн продавец может менять паттерны поведения на ходу, в зависимости от того, что за человек перед ним стоит. Сущности это неодинаковые, следовательно, не сравниваемые. О мобайл ферсте тоже хочется поспорить, особенно тогда, когда это названо мобайл ферстом, но вся статья посвящена исключительно десктопу. Зреет большое зерно скептицизма, что независимо от того, что было бы "first" (мобайл или десктоп), мобила бы внешний вид бы не поменяла в любом случае 

Ответить
Развернуть ветку
Antro
Автор

Есть исследования Yotpo, подтверждающие рост продаж. В 2014 году 88% людей ответило, что доверяет отзывам, как персональным рекомендациям.

Подробнее в нашей статье https://vc.ru/design/130539-dizayn-internet-magazina-chto-uchest-chtoby-ne-oblazhatsya-chast-chetvertaya

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

Мы уделили большое внимание дизайну мобильного интерфейса в этом проекте, но решили, что десктопные страницы более красочные. Замечание хорошее, потому что это не совсем логично с нашей стороны :)

Ответить
Развернуть ветку
Дмитрий Овсяник

Ребят, а есть смысл давать возможность изменять параметры товара в корзине (размер и т.д)?

Ответить
Развернуть ветку
Antro
Автор

В идеальном мире — да. Писали об этом здесь https://vc.ru/design/131458-dizayn-internet-magazina-chto-uchest-chtoby-ne-oblazhatsya-chast-pyataya.

Планируем реализовать это и в корзине Ювелирторга, но пока что у этой задачи более низкий приоритет.

Ответить
Развернуть ветку
Юрий

Что это за ЦА, которые покупают через интернет украшения за 50+ т.р.? Не знаем таких)

Ответить
Развернуть ветку
pipmaza

Баннера на сайте ужасны

Ответить
Развернуть ветку
Antro
Автор

Наш — только первый :с

Ответить
Развернуть ветку
pipmaza

Кнопка поиска самая крайняя - это провал

Ответить
Развернуть ветку
pipmaza

Соц сети в хедере отстой

Ответить
Развернуть ветку
pipmaza

Слайдер статичный это тоже не очень(

Ответить
Развернуть ветку
68 комментариев
Раскрывать всегда