Разработка интернет-магазина: как локальная омская сеть вышла на всероссийский уровень
Мы сделали из устаревшего онлайн-каталога интернет-магазин, и наш клиент вышел с ним на федеральный уровень. Меня зовут Женя Князев, я — продуктовый дизайнер в Mojo, и это — наш первый кейс на vc.ru.
Мы любим интернет-магазины. С пандемией они покорили даже самых консервативных людей и мою маму. Шопинг — святое для меня лично, поэтому он должен быть удобным.
В этом кейсе все неидеально: мы работали в условиях довольно жёстких ограничений, искали компромисс между качественным пользовательским опытом и пожеланиями заказчика.
Что было?
Ювелирторг — омская сеть магазинов ювелирных украшений. В интернете у компании был только онлайн-каталог без возможности купить и с «морально устаревшим» дизайном.
Новый директор по маркетингу обдумывал редизайн еще в 2019 году. Мы провели несколько встреч, но проект не сдвинулся с мертвой точки.
В конце зимы 2020 года мы пришли к соглашению и начали работу.
Экспресс-анализ
Команда провела краткий дизайн-аудит основных страниц сайта и обсудила с заказчиком результаты.
После обсуждений с отделом маркетинга мы провели сравнительный экспресс-анализ конкурентов по функциональности.
Разработали несколько персон, чтобы лучше понимать поведение пользователей и повысить эмпатию команды к ним.
Прототипирование
После этого мы перешли к разработке прототипов основных страниц: главная, каталог, карточка товара, корзина. Мы выбрали Mobile First подход, потому что статистика однозначна: доля мобильных посещений и покупок растет.
Наша команда предложила добавить возможность сравнивать товары, т.к. людям сложно определиться с выбором украшений. В магазине вам всегда готовы помочь консультанты, но в интернет-пространстве спасут только фильтры и сравнения.
В каталоге мы оставили человечный фильтр с вопросами, но добавили пропуск пункта и возвращение к предыдущему.
В карточку добавили недавно просмотренные и популярные товары.
Использовали горизонтальную фильтрацию. Исследования Baymard показывают, что пользователи часто не замечают традиционные сайдбары.
Мы опросили пользователей и вынесли популярные фильтры «на расстояние клика». Остальные спрятали за кнопкой «еще».
Оставшуюся функциональность я опишу уже на примерах дизайн-макетов.
Дизайн
Одной из целей редизайна было повысить качество визуала. Мы решили использовать реальные фото продукции в минималистичном стиле.
«Фирменный синий» компании был слишком тёмным, для сайта мы согласовали монодиаду голубых цветов. Для акцентов подобрали чистый и яркий голубой, а для менее важных элементов пастельный и нежный светло-синий.
Для каталога мы организовали фотосессию: написали ТЗ, подобрали референсы, контролировали процесс и пост-обработку.
Полностью переосмыслили главную страницу. Вывели дополнительные категории и товары.
Сделали заметнее ежемесячную акцию с подарками. Добавили подписку на рассылку в футер, чтобы она была доступна на каждой странице.
Избавились от табов и добавили на главную страницу отзывы. Они усиливают доверие к магазину и повышают лояльность пользователей.
Каждая страница сначала разрабатывалась для смартфонов, а позже адаптировалась для десктопа.
Допродаём украшения в модальном окне при добавлении товара в корзину.
В корзине мы даём пользователю возможность проверить самые важные данные: изображение, размер, стоимость. Подробно показываем, из чего состоит сумма покупки.
Особое внимание мы уделили оформлению заказа. Упростили хэдер и футер, чтобы пользователь не отвлекался от покупок. Сделали каждый шаг максимально простым и понятным.
Заказ можно завершить без упоминания о регистрации или авторизации — registration wall снижает конверсию.
Личный кабинет мы сделали с нуля. Теперь покупатель может хранить здесь свою дисконтную карту, отслеживать заказы и добавить памятные даты для получения скидки.
Результаты
Мы не можем раскрывать данные, но продажи через интернет-магазин во время пандемии существенно поддержали бизнес заказчика.
После нашей акции с баннерами Ювелирторг получает несколько десятков заказов по всей России каждую неделю. Так локальная омская сеть вышла на всероссийский уровень и превратилась в полноценный интернет-магазин.
Заключение
Статья не позволяет в полной мере рассказать обо всем, что мы сделали в этом проекте. Изучите сайт в реальности, нам интересно мнение со стороны. Как и всегда, готовы отвечать на вопросы в комментариях.
Напишите или позвоните нам — будем рады помочь и с вашим интернет-магазином. А еще мы написали крутой цикл статей про eCommerce. Его можно найти в нашем блоге.
Ставьте «+1», если кейс понравился. Спасибо за прочтение!
Вот вам кейс от известной ювелирной сети: каждый месяц объявляйте о закрытии)
Sunlight, залогинься)
Ребятаааа, логотип магазина, конечно, пиздец
Логотип делали не мы. Переговоры об обновлении айдентики ведутся, но пока безуспешно.
Логотип, конечно, все впечатление портит
Пора звать маркетологов Ювелирторга. Если что, логотип не наших рук дело :)
В Омске у них лучший сервис среди ювелирных маркетов) лого и баннеры действительно портят общий вид, а ваш кейс крутой! Браво!
Комментарий недоступен
Юля, если вы не фейк, не расстраивайтесь. Тут так бывает. Спасибо за комментарий!
Если фейк, тоже не расстраивайтесь. Фейк вы приятный :)
Поделитесь, что делали для Walmart?)
VC мне друг, но NDA дороже. Не можем рассказать по условиям договора.
В целом дизайн и логика понравились. Но вот их лого (уже понятно, что не ваша работа), а особенно их баннеры - это жуть и колхоз. Реально портят все впечатление (особенно первое). К тому же эти их баннеры совершенно не оптимизированы, что сказывается на быстродействии (на смартфонах Гугл пейджспид выдал 22 и примерно такое же время загрузки для взаимодействия. На десктопах все получше - 61)
Баннеры не наши( Тоже ведём переговоры, тоже пока безуспешно.
Это вы еще баннеры в городе не видели. Там хуже...
Сайт работает очень медленно. Особенно на смартфоне, хотя заявляется как mobile-first.
Дополнительную "тормознутость" создает скорость и задержка анимаций элементов, появляющихся при наведении. Например, попробуйте навести на "Сравнение" в шапке сайта. А еще попробуйте навести на этот пункт мышку и быстро убрать ее. Окошко появится но не исчезнет.
Дизайн стандартный и не запоминающийся.
Фильтры – боль. Причем все 3 вида – Опросник – выбери ответ и жди 3-5 сек, пока загрузится выборка. Быстрые фильтры на странице – доступен только единичный выбор, хотя стоят чекбоксы. "Все фильтры" – не работает кастомный скролл внутри попап окна с фильтром. Вместо скролла параметров фильтра скроллится вся страница.
На странице товара – фото товара прыгает при скролле. Давно уже есть position: sticky
При наведении на пункт "Каталог" в главном меню, нет выпадающего списка с категориями каталога, хотя это стандарт. Вместо этого нужно нажать, перейти на страницу каталога и искать нужную категорию среди огромных плиток.
Всё справедливо, передали в разработку.
Всё, кроме плавающей картинки, так задумано. Фото украшения всегда рядом.
https://omskuvelir.ru/catalog/koltsa/
Заголовок "Какое кольцо вы ищите?" - это ваши SEO специалисты такие грамотные?
Спасибо за верную службу на посту орфографии :) Передам, чтобы исправили ошибку
Короли UI-дизайна и интернет магазинов вернулись)
Снимаем шляпу 🎩
То самое чувство, когда пользователи vc делают работу за тестировщиков 😃
Самый внимательный отдел качества на аутсорсинге 👍
Мы делали им первый сайт, кажется в 2013 году, господи прости на Joomla. Возможно это именно та какашка, которую вы переделали.
Мы предлагали очень много вариантов развития сайта: UI/UX, различные интеграции, личный кабинет, маркетинговые фишки, крутые фотки... Все тщетно.
А вот баннерную болезнь, они так и не вылечили к 2020 году. Очень жаль.
В целом, с ЮТ приятно было работать, но тяжело в плане реализации идей и новшеств.
У вас получилось, вы - молодцы!
Спасибо большое за теплые слова 💙 Мы не сдаемся ✊
Комментарий недоступен
Комментарий недоступен
Ну тут какого уровня критика, такого уровня и ответ.
О, вспомнилась веб-студия "Сокол" 😃
https://www.youtube.com/watch?v=3io3-R-Vc1E
И сколько стоит разработать интернет-магазин?
В Омске.
*Когда сайт студии лучше сайта компании*
Придется привлечь отдел аналитики, чтобы разобраться комплимент это или наезд 🤔
"В конце зимы 2020 года мы пришли к соглашению и начали работу." люди из будущего нам пишут.
В Сибири зима по полгода длится. Нет ей ни конца, ни края – такой вот ребус.
Подсказка: в нашем материале речь о феврале :)
Какие технологии использовали?
А выросла ли конверсия сайта?
А какая именно конверсия интересна? В онлайн-каталоге люди только смотрели, поэтому конверсии в покупку не существовало :)
Вы, конечно, большие молодцы, но с чего вы взяли, что отзывы повышают лояльность пользователей? Есть какие-то исследования на этот счет? Тот же вопрос к доп. продажам; "...и предлагает товары в комплекте — как это сделал бы хороший продавец" Интересные истории. Только вот оффлайн продавец может менять паттерны поведения на ходу, в зависимости от того, что за человек перед ним стоит. Сущности это неодинаковые, следовательно, не сравниваемые. О мобайл ферсте тоже хочется поспорить, особенно тогда, когда это названо мобайл ферстом, но вся статья посвящена исключительно десктопу. Зреет большое зерно скептицизма, что независимо от того, что было бы "first" (мобайл или десктоп), мобила бы внешний вид бы не поменяла в любом случае
Есть исследования Yotpo, подтверждающие рост продаж. В 2014 году 88% людей ответило, что доверяет отзывам, как персональным рекомендациям.
Подробнее в нашей статье https://vc.ru/design/130539-dizayn-internet-magazina-chto-uchest-chtoby-ne-oblazhatsya-chast-chetvertaya
Офлайн-продавец действительно может менять паттерны поведения на ходу, но предлагать дополнительные товары в среднем приносит больше денег, чем не предлагать. Пока мы не научились анализировать пользователя по его поведению на сайте.
Мы уделили большое внимание дизайну мобильного интерфейса в этом проекте, но решили, что десктопные страницы более красочные. Замечание хорошее, потому что это не совсем логично с нашей стороны :)
Ребят, а есть смысл давать возможность изменять параметры товара в корзине (размер и т.д)?
В идеальном мире — да. Писали об этом здесь https://vc.ru/design/131458-dizayn-internet-magazina-chto-uchest-chtoby-ne-oblazhatsya-chast-pyataya.
Планируем реализовать это и в корзине Ювелирторга, но пока что у этой задачи более низкий приоритет.
Что это за ЦА, которые покупают через интернет украшения за 50+ т.р.? Не знаем таких)
Баннера на сайте ужасны
Наш — только первый :с
Кнопка поиска самая крайняя - это провал
Соц сети в хедере отстой
Слайдер статичный это тоже не очень(