Лого vc.ru

Редизайн: Как команда сервиса для заказа еды Zakazaka разрабатывала новую версию сайта

Редизайн: Как команда сервиса для заказа еды Zakazaka разрабатывала новую версию сайта

Команда российского сервиса для заказа еды Zakazaka рассказала о процессе редизайна своего сайта — какие показатели удалось улучшить, с какими проблемами столкнулись в процессе и что из намеченного не получилось.

Поделиться

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

Обычно глобальный редизайн в крупных проектах проводят не чаще, чем раз в 3-5 лет, но мы, пользуясь своей гибкостью и гордо называясь cтартапом, решили не ждать и, пойдя в all-in, обновились спустя полтора года.

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

  1. При первичной разработке были допущены существенные ошибки в интерфейсе сайта из-за отсутствия опыта в электронной коммерции.
  2. Получая всё больше данных о поведении пользователей, мы обнаружили целый ряд ошибок в UX.
  3. Основной цвет сайта и дизайн плохо воспринимались пользователями.

Первой версией дизайна занималась студия Endy, а редизайн мы доверили Филиппу Фильченко.
18 марта мы обновили наш сайт и представили новый концепт. От идеи до реализации прошло много месяцев, но это того стоило.

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

Также хочу обратить ваше внимание на то, что промежуточных вариантов тут не будет — сравнение будет первоначального дизайна от Endy и последнего выпуска от Филиппа.

Главная страница

До редизайна:

После редизайна:

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

1. Цвет

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

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

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

2. Категории

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

3. Фильтр

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

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

Имея такую скудную выдачу, пользователь с вероятностью в 97% покидал сайт. Классический фильтр присутствует только на странице каталога ресторанов и по умолчанию показывает все рестораны, отсортированные по популярности. Мы пошли по принципу «Огласите весь список, пожалуйста!» и не прогадали.

4. Персонажи

Они получились очень крутыми и милыми. Кому-то они напоминали миньонов, а кто-то говорил, что это картошка, но свою миссию — создать иллюзию живого бренда и понравиться пользователям, они выполняли на все 100%.

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

5. Отзывы

На макете вставлен лишь пример, в рабочей версии тут отображались отзывы представителей прессы из журналов «Собака», The Village и еще двух изданий.

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

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

6. Статистика

Блок со статистикой отображал количество заказов, отзывов и зарегистрированных пользователей в режиме онлайн.

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

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

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

Результат: процент отказов уменьшился на 26,5%, на 61% увеличилось количество просмотров страниц на один сеанс, длительность сеанса увеличилась на 41,6%. Коэфициент транзакций вырос на 55,3%.

Каталог ресторанов

До редизайна:

После редизайна:

На странице каталога ресторана мы столкнулись со следующими проблемами.

1. Кухни

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

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

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

2. Условия доставки и минимальная сумма заказа

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

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

3. Рейтинг

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

Но эта идея не нашла поддержки у пользователей: одним эти цифры казались непонятными, другим просто не нравились. Оценка из пяти звезд имела наибольшую популярность хотя бы потому, что ее используют в Google Play и App Store.

Результат: процент отказов уменьшился на 6%, на 19,6% увеличилось количество просмотров страниц на один сеанс, длительность сеанса увеличилась на 8,46%. Коэфициент транзакций вырос на 9,88%.

Страница ресторана

До редизайна:

После редизайна:

Эта страница претерпела больше изменений в дизайне нежели в интерфейсе, поэтому здесь буду краток.

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

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

Также мы ввели интерактивный задний фон, который меняется в зависимости от основной категории ресторана.

Результат: процент отказов уменьшился на 1,9%, на 13% увеличилось кол-во просмотров страниц на 1 сеанс, длительность сеанса уменьшилось на 9,6%. Коэфициент транзакций увеличился на 7,4%.

Корзина

До редизайна:

После редизайна:

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

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

Результат: в корзине показатель отказов уменьшился на 5,9%, длительность просмотра страницы уменьшилась на 10%, процент выходов уменьшился на 30,7%

Итоговые цифры

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

Процент отказа

  • Главная страница — уменьшился на 26,5%.
  • Каталог ресторанов — уменьшился на 6%.
  • Страница ресторанов — уменьшился на 1,9%.
  • Корзина — уменьшился на 5,9%.
  • Общий — уменьшился на 6%.

Количество просматриваемых страниц на один сеанс увеличилось на 31%.

Средняя продолжительность сеанса увеличилась на 20,5%.

Общая конверсия сайта увеличилась на 19,27%.

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

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

Популярные статьи
Показать еще
Комментарии отсортированы
как обычно по времени по популярности

Название сменить надо

Всегда вот мне нравится эта штука с процентами :)

> Общая конверсия сайта увеличилась на 19,27%.

Звучит вроде бы классно. Но если конверсия была, например, 7%, то увеличилась она по факту до 8.33, ну то есть результат хороший, но и без ПОЛНОГО редизайна как-то можно достичь такого прироста.

Редизайн от бога! Мне все понравилось

Старый дизайн лучше, новый абсолютно безликий.

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

До редизайна было значительно лучше

Если сравнивать... В редизайне что-то нравится, что-то нет. НЕ нравится главная... Нравится корзина и страница ресторана.
Как по мне, отсутствие персонажа это плюс или надо перерисовать его.

Так это ж копия структуры ДеливериКлаба. Что тут отвечать

0

Я зашел и ничего не понял...
Вот я захотел заказать роллы, (почему-то подписанные как суши)... Вместо того чтобы показать мне список с роллами, показывают список с компаниями, которую я впервые слышу, чтобы выбрать они предлагают мне каждому из них заглянуть? А что мешает тогда мне заказать через сайт этой доставки?

Шо то гавно шо это гавно

0

Так где дизайн? Выглядит, как сайтик из стандартных зурбовских/бутстраповских шаблонов.

Похоже целью редизайна было убрать какой-либо дизайн

Никак не могу осознать красоту "дащыщих" сайтов с кучей свободного места. Редизайн кинопоиска подтвердил это. Я хочу видеть контент, а не скролить.

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

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

Такое ощущение, что всех лихорадит от очередного тренда и надо успеть в уезжающий поезд...

0

Ага, еще дополню возмущение... Это rozetka.com.ua

Раньше много у них покупал, потом переключился на местных дилеров, поскольку они в цене ощутимо уделывают розетку. Недавно зашел после длительного перерыва и бльооооо, что за ужос? А парни всего лишь последовали современным тенденциям...

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

0

У розетки отличный дизайн, на порядок лучше старого! Все красиво, понятно и удобно. Есть только некоторые тормоза, но это другой вопрос

0

Первый дизайн кажется мультяшным, детским, слишком ярким. Редизайн понравился тем, что он стал "взрослее" что ли, более спокойным, приятным глазу. Да, таким образом он потерял свою необычность, в какой-то мере, но, с моей точки зрения, и приобрел серьезности что ли. Не просто очередной яркий взрывной мельтешащий сайт, который хочет меня отвлечь и обмануть, а обычный спокойный сервис. Конечно тут может играть свою роль то, что мне уже 30 лет и силу возраста меняю свое отношение к таким разным в плане дизайна вещам,но тут уже ничего не поделаешь.

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

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

Почему на главной ко мне обращаются на «ты»? Ненавижу когда мне тычат с сайта. А вот ниже - молодцы, уже на «вы» перешли.

0

Меня всегда удивляет блок "Как мы работаем" - найди ресторан, выбери еду, наслаждайся.... вот к чему это???

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

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

А писать как мы работаем, где это на каждом лендинге одно и то же вообще бессмысленно.

Поправьте меня, пожалуйста, если я не прав

Стало уныло чуть более, чем полностью

0

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

Сейчас обсуждают
Дмитрий Трипалюк
hyper weapon

Идея неплоха. Я бы поюзал, если бы мне это дало N единиц новой лояльной аудитории ;)

«ЧатКвест» — инструмент для создания маркетинговых квестов в мессенджерах
0
Татьяна Бочкарева

Есть мысли о тезисе номер два. Очень скоро грядет революция в области перевозок людей. Люди будут перемещаться на воздушном метро, стоимость строительства которого в 100! раз дешевле подземного, а скорость до 500 км/ч при цене строительства путевой структуры в $5 млн за 1 км. Причем перемещаться люди будут почти бесплатно, так же как мы сейчас бесплатно звоним через Скайп. Окупаемость будет за счет попутных грузов. Как вам такое - ездить на каждые выходные на свою дачу с Москвы до Анапы за 3 часа?
Уже сейчас можете увидеть этот транспорт в движении (он запущен 29 ноября 2016г). Поддерживайте этот проект воздушного метро (струнный транспорт). Ещё можно успеть стать инвестором данного проекта. Увидеть его в движении и подписаться на новости можно на сайте проекта: goo.gl/qlfD2z

«Через 50 лет стран не будет — останутся только города»: основные тезисы лекции Кьелла Нордстрема о будущем
0
조냐 박

Если я пользуюсь только этими бесплатными 15 ГБ, то мне не о чем волноваться?

Google предупредила российских пользователей о повышении цен с 2017 года из-за «налога на Google»
0
Amar Ak

500-200? И даже не принято? В какой развитой стране такое есть? Так проще всем онлайн магазинам перенестись в юрисдикцию Гонконга и торговать, никаких пошлин, никакого НДС, раб сила по 200usd/месяц... и цены будут хорошие, правда в россии будет еще меньше рабочих мест и налоговых сборов...

Власти России намерены снизить беспошлинный порог для ввоза интернет-посылок до 500 евро с середины 2018 года
0
Johnny Vorony

Мне очень стыдно, коллеги, но до этой статьи я не знал кто такая Алена Владимирская.

Алёна Владимирская и оператор Wi-Fi в московском метро запустили проект с бесплатными карьерными советами
0
Показать еще