Как проектировали и разрабатывали дизайн сайта Intertop.ua
Intertop.ua – это один из крупнейших ритейлеров Украины, лидер онлайн-сегмента по продаже обуви. Большой опыт в работе с ведущими e-commerce площадками Украины позволил экспертам Promodo еще до старта проектирования сайта заложить фундамент для дальнейшего продвижения и будущих маркетинговых активностей.
Как разрабатывался дизайн для проекта, на основании чего формировались гипотезы и принимались решения – об этом рассказывает команда отдела проектирования и дизайна Promodo.
Проблематика
Новые улучшения компании, которые уже были вынесены в офлайн и розницу, – смена фирменного стиля, программа лояльности и прочее – не находили в полной мере отражения на существующем на тот момент сайте. Вносить точечные изменения было невыгодно и нецелесообразно, поэтому было принято решение о полной смене платформы, архитектуры и визуального оформления нового сайта.
Старая и новая версии сайта
Анализ и подготовка
Разработка нового продукта внутри компании обычно начинается с анализа всех доступных ресурсов на стороне клиента. Мы использовали данные из систем аналитики сайта Intetop.ua, а также проводили интервью с клиентом, чтобы уточнить вопросы, на которые она не могла ответить.
Анализ сайта помог нам найти ответы на ряд сформированных гипотез. Например, просмотр страницы каталога с перечнем продукции значительно усложнял процесс выбора обуви из-за стандартного функционала переключения между страницами. Это приводило к «отвалам» со страницы категории. Решением данной проблемы стало внедрение автоматической подгрузки новых товаров на страницу, когда пользователь продолжает скроллить вниз. Это позволяет клиенту видеть всю витрину товаров и запоминать понравившиеся модели, не уходя со страницы категории – ровно так же, как это происходит и в офлайне.
Отказ от привычной навигации между страницами
Отказ от привычной навигации между страницами
Мы решили проверить работу службы доставки и колл-центра: совершили тестовые покупки, оставили комментарии с вопросами, попытались вернуть товар. К счастью мы не столкнулись с какими-либо проблемами, и с полной уверенностью, что за экраном «Спасибо за Ваш заказ!» всё функционирует как надо, начали работу над созданием будущего сайта.
Уже на старте работ был составлен список проблем, которые должен был решать будущий сайт, и гипотез, которые необходимо проверить сразу после его запуска.
Основные проблемы на старте:
- нет связки с бонусной программой и магазинами;
- несоответствие интерфейса новому фирменному стилю;
- не были реализованы мультиканальные сценарии.
После анализа и обсуждения с представителями Intertop.ua рабочих процессов и пожеланий к функционалу сайта был определён трехсторонних формат работы над проектом, где третьей стороной выступила компания-разработчик. Каждая сторона сформировала команды, расставила приоритеты, определила задачи и приступила к работе.
От сложного к простому
Проектирование будущего интерфейса было разбито на этапы и приоритеты. Чтобы запустить параллельно работу всех членов команды, мы сформировали основу проекта в виде основных конверсионных цепочек.
Примеры конверсионных цепочек
Примеры конверсионных цепочек
После утверждения прототипа и дизайна каждая страница передавалась сразу на верстку, а команда переходила к следующим страницам и модулям. Такой формат работы позволил разделить сложный и большой продукт на мелкие задачи и выстроить приоритет по каждой из них с указанием сроков и ответственных лиц. Кроме того, в ходе работы мы имели возможность тестировать рабочие макеты и сразу же вносить в них правки.
Данный подход позволил клиенту вовремя получить ту часть сайта, которая участвует в продажах непосредственно. Уже после этого можно было постепенно подключать функционал второстепенной важности: элементы личного кабинета, информационные страницы и т.д.
Что узнали нового
Запуск сайта не должен быть последним этапом в работе. К сожалению, многие клиенты забывают об этом. Завершив тестирование сайта, они полностью погружаются в бизнес-процессы, выводя сайт на второй план. Со стороны это выглядит так: «Сайт же сделан, что там еще исправлять?». Но в случае с проектом Intertop, наше сотрудничество с компанией не прекращается. После запуска, используя данные из аналитики, мы смогли проверить свои гипотезы и узнали много полезного о пользовательском поведении.
Приведём характерный пример. Сомнение, что попап быстрой покупки неудобен в использовании, подтвердились данными из аналитики. Доля покупок на сайте после перехода с попапа (всплывающего окна) в общей сумме заказов составляет всего 3-4%. Но, добавив показатель электронной торговли, мы заметили, что средний чек заказа с попапа на 73% выше, чем со страницы товара. Это говорит о том, что, определившись с нужной парой обуви, клиент покупает ее сразу из категории товаров.
Pop-up быстрой покупки
Первые результаты
«Получен обновленный интерфейс сайта, который соответствует современным тенденциям. После запуска проекта мы подключили интеграцию с бонусной программой, что повысило лояльность наших клиентов и привлекло новых. Были также полностью запущены мультиканальные сценарии, которые бесшовно объединили все магазины сети с сайтом и сделали покупки более удобными, а также дали клиентам весь ассортимент, существующий в сети» – Толочина Валерия, маркетинг директор INTERTOP.
Постоянный анализ, работа с конверсионными воронками, эксперименты с визуальными акцентами – всё это позволяет каждый день делать продукт лучше и удобнее для клиента. Петля улучшений не имеет конечного цикла и правильного ответа; необходимо развивать продукт, пока этого требует рынок.
Дизайн-процесс и петля улучшений
Опыт показывает, что в веб-дизайне не существует окончательно завершенного продукта. Сегодня продукт готов на столько, на сколько готов сегодняшний пользователь. Завтра он придет уже с новым опытом, соответственно необходимо будет менять и сам продукт.
Немного цифр
- 6 месяцев работы от первых вопросов до финального макета;
- 5 человек в команде: UX-специалист, web-аналитик, менеджер проекта, дизайнер интерфейсов, арт-директор;
- 600+ часов на проектирование и дизайн;
- 180+ утвержденных дизайн-макетов.
Уроки, полученные в ходе работы
- Не существует только одного идеального решения. Аудитория на каждом сайте ведет себя по-разному. То, что работает у конкурента, может не сработать у вас.
- Тестирование сайта необходимо делать на всех этапах разработки.
- Гипотезы нужно проверять сразу же после запуска, на «живой» аудитории, по ходу дела внося изменения и улучшения.
- У петли улучшений интерфейса есть начало, но нет конца.
«Компания Promodo является лидером в данной отрасли, поэтому мы не ошиблись, обратившись к ней. Все работы выполнялись в заранее согласованные сроки. Работа была построена так, что ребята предоставляли изначально прототип, а потом на основании общих обсуждений предоставляли дизайн. По всем задачам предлагались креативные, а не бросовые варианты решений» – Толочина Валерия, маркетинг директор INTERTOP.
Мы придерживаемся мнения, что сайт представляет собой информационную прослойку между брендом и клиентом. Бренд должен сохранять принципы своей работы вне зависимости от места коммуникации с клиентом.
Сайт – это информационная прослойка между брендом и клиентом
Если покупатель выбирает товар на сайте и принимает решение самостоятельно примерять его в магазине, то сервис, цена и условия обслуживания не должны меняться только лишь из-за того, что он вышел из онлайна в офлайн.
Комментарии | 17
Открыл. Это вроде магазин но первые пару блоков с промо не имеют сразу цен и ведут на ландинги. Где цена?
Через минуту появился pop-up перекрывший мне весь сайт — это бесит меня как покупателя и очень дешево есть море способов привлечь людей зарегестрироваться мягко.
Узкий баннер сверху остается на второстипенных страницах он довольно раздражает своим миганием убарть его не могу.
Сама страница товара и категории и lazy scroll очень вкусно сделаны — молодцы.
сайт интертопа бесит, куча всего дергается, мелькает, накладывается друг на друга. Особенно выводят товары в списке которые подгружаются и раскладываются уже после того как ты прокрутил страницу. А еще иконка почты которая висит постоянно справа и дрожит. бррр
а еще с мобильного они загружают изображения в большом разрешении, а модальные окна смещаются за пределы видимости 🙂
Это плюс ко всему, что сайт криво отверстан и в отзывах, например, рейтинг и название товара налазит на изображение. Это только часть того, что было обнаружено за пару минут…
>Как проектировали и разрабатывали дизайн сайта Intertop.ua
Взяли дизайн Lamoda и немного переделали. Вот примерно как-то так.
цвета блеклые, контраста нет, попапы всплывают, все мигает… сайт плохой
ИМХО меньше бы меготни… а так, сайт как сайт. «серый», не примечательный… и да, ассоциации с Lamoda … промодоровцы долго голову не ломали ))) такое… как-то старая версия лояльней к покупателю была.
при фильтрации размером выдает ВСЕ модели с таким размером, а не которые есть в наличии.
необходимо открывать каждую модель, чтоб узнать о наличии. Неудобно!
Вигляд і функціонал як у звичайного шаблона з TM за /- 100$, все добре але нічого видатного. Навіщо «6 месяцев работы, 600 часов на проектирование и дизайн» — загадка. Все смикається, проблеми з адаптацією під телефони.
Про это как раз в статье и пишут — основная работа в проекте Анализ (45%)
Но анализ не видно в финальной работе)))
Сайт Инетртопа — яркий пример того, как вэб дизайнеры «раздевают» заказчиков, игнорируя реальные задачи по взаимодействию продавца и покупателя. Красивая картинка и интерфейс, но ужасная функциональность, которая «достает» через первые пару минут пользования сайтом. Фильтры работаю неправильно, найти необходимый товар практически нереально… В топку!
Тут просто не ЦА сидит
О Lamoda… Странно, что разработчики из промодо просто не взяли уже готовый дизайн розетки.. Перешли на новый уровень — Lamoda.
И что за дебильное решение «Слушать радио», да еще и в новом окне? Если делать, так уже как в ВК.
и «Трясущаяся иконка подписки» — зачем?
Я конечно не слепой, но font-size: 10px это ад!
Честно сказать не знаю, по коментария ужас ужас. Посмотрел сайт, неплохой сайт.
Где там что то дергается? Аргументируйте а то похоже на полеп или может тут собрались конкуренты?
я просто пользователь, хотела купить ботинки, но не смогла, моя нервная система это не выдержала. Я не специалист, чтоб сказать ошибки, но прошлая версия была понятна и удобно, этот вариант — мрак.
Bitrix jQuery???… Где оптимизация изображений, минификация скриптов, стилей. Я даже уже не говорю про куки фри домен для статики. 5.4мб главная страница весит. По интерфейсу все резко дергается туда сюда. lamoda и это просто небо и земля.
Ужасный сайт, отбить руки и головы создателям. Интертоп верните старый сайт, ваш сегодняшний победить не смогли, заказала в другом инет-магазине.