Экологичный редизайн: кейс перезапуска монобрендового интернет-магазина SYNERGETIC от aim digital

Помогли производителю экологичных средств для уборки и личной гигиены создать современный e-commerce и наладить работу с клиентской базой. Команда aim digital рассказывает о редизайне интернет-магазина для экобренда SYNERGETIC.

Клиент

SYNERGETIC — российский бренд экологичных средств для уборки дома и личной гигиены: от стиральных порошков до зубных паст. Продает 10 000 000 товаров ежемесячно в магазинах по всей России.

Проблемы и задачи бизнеса

Сайт был разработан еще при запуске компании. Дизайн устарел, появились проблемы с масштабированием, сайт не был полноценным каналом для интернет-продаж.

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

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

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

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

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

Роман Каган,

Head of digital SYNERGETIC

Проблемы интернет-магазина SYNERGETIC:

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

Задачи бизнеса:

  • сделать дизайн интернет-магазина современным и дружелюбным;

  • упростить путь пользователя;

  • спроектировать программу лояльности;
  • создать удобный личный кабинет с учетом трендов и потребностей пользователей;

  • создать единую клиентскую базу;

  • избавиться от «костылей» и проблем с масштабированием
  • повысить глубину просмотра и время взаимодействия с брендовым контентом.

Сделать удобный и современный e-commerce — вот, что нам было нужно. Убрать все, что бесит пользователей. Дать пользователям нормальный клиентский опыт, упростить их путь и сэкономить время на оформление заказа и поиск товаров, получить их контакты для стимулирования повторных продаж . Мы хотели сделать сайт понятным и удобным, как для десктопов, так и для мобильных устройств.

Роман Каган, Head of digital SYNERGETIC

Прошли путь пользователя и заказали набор для эко-уборки

Если хочешь понять целевую аудиторию, то поговори с ней или сам стань ею.

Мы учли обратную связь клиентов бренда, а затем и сами прошли пользовательский путь и заказали набор для дома «ЭКО-УБОРКА». Ребята из нашей команды и раньше пользовались средствами SYNERGETIC, но не пользовались сайтом.

Столкнулись примерно с теми же проблемами, что и другие пользователи:

  • устаревший и не очень удобный сайт;

  • невозможно управлять заказами, нет их истории;

  • нельзя повторить заказ, а так не хочется каждый раз искать товары заново;
  • неясно, зачем покупать товары именно на официальном сайте.

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

Изучили референсы

При разработке концепции ориентировались на минимальный CJM с заказом, регистрацией и авторизацией в 1 клик. Изучили референсы и механики заказов М.Видео и функционала подписок от Danone.

Вдохновлялись референсами монобрендовых магазинов разных тематик.

Werby parker — сайт бренда очков зацепил воздушностью и пастельной цветовой гаммой.

Сайт украшений бренда Sokolov легкостью и фотографиями и форматом подачи категорий.

У Apple фокус на эстетике продукта, живые фото, минималистичный стиль.

У интернет-магазина косметики Mowellens мягкие, атмосферные цветовые заливки с акцентами на продуктах, природные элементы.

До старта работ над прототипами и интерфейсами мы собрали мудборд на основании лучших практик и решений.

Концепция и дизайн главной

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

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

В фокусе первого экрана — баннеры и позиционирование. Донесли выгодные предложения и рассказали об экологичности бренда.

Визуально разделили категории товаров.

Нативно внедрили позиционирование и ценности в разные блоки страницы.

Карусель из акций

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

Бестселлеры

Отдельным блоком выделили самые продаваемые товары с промо. Пользователи часто ищут их на сайте, часто покупают. Мы облегчили путь и вывели бестселлеры на главную.

Повысили доверие к экобренду с помощью блока отзывов

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

Дайджесты

Бренд SYNERGETIC постоянно генерирует полезный контент для клиентов: чек-листы, лайфхаки, инструкции, идеи для дома и обзоры. Материалы подтягиваются в дайджест из разных источников бренда. Раздел помогает делиться полезным контентом из разных источников в одном месте и привлекать аудиторию в социальные сети.

Каталог

Продумали и внедрили умные фильтры, которые помогают за минуту найти нужный продукт. Например, пользователь ищет гели, чтобы стирать детскую одежду. Фильтр «Для детской стирки» сузит поиск и сэкономит время клиента.

Карточки товаров

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

В новых карточках объединили дизайн-решения классического e-commerce и приоритеты клиентов.

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

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

Личный кабинет и корзина

Корзину сделали в привычном для пользователей месте — в правом верхнем углу. Всплывающее окно не оставляет сомнений у пользователя: товар попал в корзину.

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

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

Избранное — альтернатива корзины. С помощью избранного решили еще одну проблему пользователя — сохранить товары и не искать заново.

Бренд SYNERGETIC активно использует механики с приятными подарками и бонусами для клиентов. При проектировании дизайна учли ключевые механики. Добавили подарки и бонусы в дизайн корзины, чтобы повысить мотивацию пользователей к покупкам на брендовом сайте.

Технологии и интеграции

Новый интернет-магазин SYNERGETIC разработали на 1С-битрикс, как и его предыдущую версию. Клиенту было важно продолжить работу с привычной для себя CMS. Фронтенд написан на нативном JavaScript. В качестве html-шаблонизатора использовали Underscore.js, а стили писали на SCSS.

Объединили все данные о клиентах за последние полтора года в одной базе данных.

Сделали интеграции с системами аналитики, 1С, SendPulse, и OZON-доставкой.

Результаты: создали современный e-commerce с дружелюбным интерфейсом, повысили лояльность и глубину просмотра

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

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

У бизнеса появилась полноценная удобная площадка для продаж и взаимодействия с клиентами, сайт готов для масштабирования и развития полноценной D2C-площадки.

Посещаемость сайта: > 200 000 пользователей в месяц.

Глубина просмотра и коммуникации с брендом выросли на 50%.

Оценка удовлетворенности клиентов выросла на 10% после перезапуска.

Мы решили свои задачи. Убрали все, что бесит в интернет-магазинах. Сделали идеальный e-commerce без лишних сложностей и действий для пользователя. Учли, что большинство транзакций с мобилок и уделили много внимания мобильной версии. Технически мы расширили воронку на 1 шаг и при этом не уронили конверсию. Люди стали тратить меньше времени на сам заказ, больше взаимодействовать с товарами и брендом. Лояльность клиентов стала выше.

Нам был нужен подрядчик, который вместе с нами пойдет в неизвестность. Подрядчик на продукт — это партнер, который вместе будет идти вместе с вами и подсветит путь в темном лесу.

С aim digital не страшно идти в неизвестность. aim — это гибкая команда, которая не ограничена техническим заданием

Роман Каган, Head of digital SYNERGETIC

Авторы кейса — aim digital



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

0
77 комментариев
Написать комментарий...
Erik Gimaletdinov

В чем сакральный смысл на этикетку лепить флаг Германии? Обманывать потребителя?

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

закос под немецкое качество?)

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

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

Ответить
Развернуть ветку
6 комментариев
Лаврентий Петренко

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

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

Герб - столицы химии Дзержинск предлагаете влепить?

Ответить
Развернуть ветку
2 комментария
Псков Бурито

в том же, что и фейковые скидки в 80%. Барыги!
Не о каком бренде и речи быть не может

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

Так и есть

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

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

Ответить
Развернуть ветку
Марина Балашова

Почему меньше процента? А даже если так, то тем более стоит задача - сделать так, чтобы покупали больше напрямую. И тогда вложения в нормальный сайт очень быстро окупятся.
Почему надо выбирать что-то одно, если можно развивать и партнёрку и самостоятельные продажи? По-моему, все правильно сделали. Это лучше, чем сидеть со старыми сайтами и ждать с моря погоды =))

Ответить
Развернуть ветку
4 комментария
Владислав Брючко

1. Человек может гуглить незнакомую для себя продукцию и зайти на сайт производителя. Лучше познакомиться с продукцией и сделать заказ.
2. 5% (предположительно на основе других похожих моделях продаж) от 6,3 млрд выручки уже 315 млн. 300 млн лишними не бывают, даже с учетом того, что за новый сайт клиент отдал котлетку в 2-5 млн. Аим — недешевое удовольствие.

Ответить
Развернуть ветку
8 комментариев
Екатерина Корчагина

Я покупаю большие наборы раз в пару месяцев именно там)

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

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

Ответить
Развернуть ветку
Леван Какубава

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

Ответить
Развернуть ветку
Ivan the Not So Terrible

Даже у фейри нет отдельного магазина.
Нафига и кому это надо? Кроме подрядчика.

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

Это было нужно бизнесу и его клиентам.
У SYNERGETIC много товаров для уборки и личной гигиены. 200 000 пользователей в месяц взаимодействуют с сайтом.

У бизнеса была цель — развивать сайт, как еще одну площадку для продаж и базу знаний о продуктах экобренда. Клиенты часто детально изучают составы таких продуктов и отзывы еще до покупки.
Нужно было сделать сайт удобным, внедрить личный кабинет, повысить лояльность. Люди заказывали продукцию еще до редизайна.

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

Мы не генерировали задачу бизнеса, мы помогали её решать)

Ответить
Развернуть ветку
Псков Бурито

Это нужно Роману Кагану, Head of digital SYNERGETIC, чтобы получать зарплату

Ответить
Развернуть ветку
3 комментария
Александр G

Анимация круто выглядит, но будет сложно поддерживать, увеличивает скорость загрузки. Какой в ней (анимации)смысл вы закладывали?

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

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

Ответить
Развернуть ветку
Псков Бурито

Смысл один. Заказчик платит...
Там анимацию не нужна, т.к. смотреть не на что

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

Вот это вот (с сайта) просто пугра какая-то:
...
"В составах экопродуктов SYNERGETIC — только последние достижения науки"
...
Как вы достижения в составы запихнуть ухитрились?

Ответить
Развернуть ветку
Глеб Голубев

Отличный интернет-магазин. Видно, что команда разбирается в акцентах и балансировке пространства.
За счет белого фона и серых разделителей делает акцент на главном — товарах. Но есть пара вопросов по деталям:
1. Перечисления и каталог в шапке набраны исключительно малыми буквами, хотя подавляющее большинство текста на сайте написаны по классике — первая буква большая, остальные малые. Чем продиктовано такое решение?
2. В каталоге и др. страницах, где рядом находятся несколько карточек товара, используется залитая цветом кнопка. В сравнении с ней контурная кнопка позволяет не смещать акцент с контента (нарисовал сравнение от руки на телефоне). Может быть вы сравнивали два этих вида кнопки в тестах? Было бы интересно узнать результаты конверсии.

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

Рефы не смотрел, а так сайт обычный продуктовый ИМ.
Как и продукция, часть товаров норм, но большинство товаров не соответствует цена/качество.
Смысл брать товар с доставкой, если можно заказать на МП и забрать в удобное время чуть ли не в соседнем подъезде.

Ответить
Развернуть ветку
Псков Бурито

В этом сайте вообще нет никакого смысла. Если бы там просо была инфа про компанию и технологии, пользы бы было больше

Ответить
Развернуть ветку
Псков Бурито

У них за цифровой бизнес почему-то отвечает маркетолог, поэтому бизнеса нет, только дизайн. Но по идее, можно было бы сделать подписку на чистящие средства, например, для бизнеса, сервисы по заказу уборки и т.п.

Ответить
Развернуть ветку
Владислав Брючко

Клиент: "Хорошая работа"
Аим: "Спасибо. С вас 5 млн"

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

Как будто это что-то плохое)

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

Что-то у вас сайт умер

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

Битрикс не выдержал напор виси юзеров.

Ответить
Развернуть ветку
1 комментарий
Владислав

Фиксированный Header слишком высокий. В обзоре товара блок с маркетинговой чепухой "Заказывайте напрямую – это удобно!" – лишний. Лучше вывести похожие товары или вместе покупают.

Ответить
Развернуть ветку
Псков Бурито

там все просто наговнячино в кучу без всякой мысли. Уровень дизайна и UI/UX ниже среднего, уровень продукта - нулевой. Т.е. они вообще не в курсе что такое ecom

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

Мыло и шампунь, конечно, жутко похожи дизайном на химию чистящих средств

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

Так себе средство. Основной упор в продажах это распродажи

Ответить
Развернуть ветку
Псков Бурито

при этом за последний год цены сильно выросли, что покупать это просто нет смысла

Ответить
Развернуть ветку
Псков Бурито

Посещаемость сайта: > 200 000 пользователей в месяц.
Враки

Ответить
Развернуть ветку
Евгений В.

Очень напоминает Перекресток

Ответить
Развернуть ветку
Псков Бурито

разработчики один и тот же шаблон всем продают

Ответить
Развернуть ветку
1 комментарий
Псков Бурито

Все это выглядит, как тема за $100 на WordPress

Ответить
Развернуть ветку
Псков Бурито

Иконки из 2015... пипец

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

Не забудьте продублировать это Циану ;)

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

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

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

Сайт дико тормозной, а я уже думал затарится.

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

Минутка критики: на многих карточках почему-то решили, что нужно не добавлять слово «гель» (для стирки, для посуды), зато пишется капсом СИНЕРДЖЕТИК. (Что это значит? Это задумка бренда такая, что у них не гель, а синерджетик? Синерджетиком можно и стирать и посуду мыть? Или все же нельзя?)

Да и зачем вообще писать капсом название бренда, когда это монобрендовый магазин?

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

Сайт не доделан что ли? Куда не зайдешь в каталог - пустота

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