Редизайн: Как команда сервиса для заказа еды 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%.

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

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

0
28 комментариев
Популярные
По порядку
Написать комментарий...

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

Развернуть ветку
ivan krapivin

Благодаря редизайну подорожала Филадельфия

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

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

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

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

Ответить
13
Развернуть ветку
Maximka Eronin

До главная страница выселее была. Теперь все безлико и уныло...

Ответить
10
Развернуть ветку
Игнат Смирнов

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

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

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

Ответить
2
Развернуть ветку
Марк Львов

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

Ответить
5
Развернуть ветку
John Doe

За казака!
Странное название же?

Ответить
4
Развернуть ветку
Алексей Бирюков

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

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

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

Ответить
2
Развернуть ветку
Eugeny Plokhoj

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

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

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

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

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

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

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

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

Рередизайнул

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

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

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

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

Развернуть ветку

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

Развернуть ветку

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

Развернуть ветку
Mikhail Shamov

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

Ответить
1
Развернуть ветку
Филипп ЕФименко

Если сравнивать... В редизайне что-то нравится, что-то нет. НЕ нравится главная... Нравится корзина и страница ресторана.

Как по мне, отсутствие персонажа это плюс или надо перерисовать его.

Ответить
1
Развернуть ветку
Azat Minvaliev

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

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

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

Ответить
1
Развернуть ветку
Eric Lee

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

Ответить
–1
Развернуть ветку
Яков Осипенков

Чем ответит delivery club?

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

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

Ответить
0
Развернуть ветку
Яков Осипенков

Я в курсе, этот была ирония, шутка, юмор, подтекст...

Ответить
3
Развернуть ветку
Вильгельм Богачев

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

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

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

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

Ответить
0
Развернуть ветку
Вильгельм Богачев

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

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

Ответить
0
Развернуть ветку
Олег Сороченко

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

Ответить
0
Развернуть ветку
Дмитрий Байбухтин

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

Ответить
0
Развернуть ветку
Дмитрий Скорик

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

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

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

Ответить
0
Развернуть ветку
Konstantin Kuzin

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

Ответить
0
Развернуть ветку
Читать все 28 комментариев
Baring Vostok инвестировал $13 млн в российскую платформу автоматизации маркетинга Mindbox Статьи редакции

Деньги направят на развитие продуктов, опционный пул и сделки.

Голова не варит: 10+ советов, как предотвратить умственное переутомление

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

Сооснователь Endel Владислав Пинский запустил в Германии сервис распознавания документов ABC Doc и привлёк €500 тысяч Статьи редакции

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

Пример работы ABC Doc
В OTUS стартует первый онлайн-буткемп «Java developer»
Фоторамка 2.0 или что подарить бабушке на Новый год

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

Юристы оценили решение Верховного суда по штрафу из-за маски по фото

Советник административной и уголовно-правовой практики юридической фирмы «Надмитов, Иванов и Партнеры» Булат Тугутов дал комментарий для РБК о решении Верховного суда РФ по штрафу из-за маски.

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

В 2024 году ФНС обещает внедрить обязательный электронный документооборот. Интернет-бухгалтерия «Моё дело» проанализировала насколько активно сейчас используется ЭДО в малом бизнесе на базе 70 тысяч клиентов.

Тинькофф запустил рассрочку для покупателей Яндекс.Маркета

Тинькофф и Яндекс.Маркет расширяют сотрудничество в сфере e-commerce: теперь с помощью сервиса «Тинькофф Кредит Брокер» пользователи маркетплейса смогут купить товары в рассрочку на 3, 6, 12 или 24 месяца без комиссий и переплат.

Дольше всех на рынке: почему компаниям с большим опытом сложнее работать с клиентами?
Как поднять продажи фармы в диджитале? Рассказываем про стратегию продвижения бренда «Ультра-Д» и показываем результаты

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

null