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

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

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

14

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

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

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

13

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

10

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

6

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

2

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

5

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

4

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

3

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

2

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

2

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

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

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

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

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

2

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

2

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

–1

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

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

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

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

1

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

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

1

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

1

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

1

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

–1

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

0

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

0

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

3

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

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

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

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

0

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

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

0

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

0

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

0

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

0

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

0

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

0
Читать все 28 комментариев
Как я заработал свой первый миллион просмотров на лонгридах

Мой опыт ведения текстового блога на «Виси», «Пикабу», «Хабре», Дзене и еще пачке площадок. Сколько потратил на них сил и какую отдачу в итоге получил.

Потратили $1 млн на клинику для профилактики здоровья зубов в Москве — и через десять месяцев закрыли проект

История о неудачном запуске монопродукта в стоматологии — его пришлось переформатировать.

Та самая клиника
Как у меня украли 600 тысяч с карты, а Тинькофф нарушает федеральный закон

Спойлер: я НЕ вводил никуда код, НЕ переходил по ссылкам и НЕ сообщал данные карты.

Я всегда считал себя финансово грамотным человеком, сам когда-то работал в банке, соблюдал цифровую гигиену, держал деньги на нескольких счетах, не привязывал основную карту в непонятных сервисах, в 90% оплат пользовался Google Pay. Когда родственники присылали…

Пятерочка списала баллы вместе с деньгами и не желает исправлять ситуацию

Так получилось, что за покупками в основном ходим в пятёрочку, есть их "Выручай-карта" на которую копятся бонусы с покупок. 28.09.21 решил использовать эти бонусы в магазине по адресу Москва. Ул. Лухмановская 17А. При оплате терминал, со слов продавцов выдал ошибку, о невозможности списания баллов, и я оплатил деньгами. Вышло так, что списались и…

Наследник Рокфеллера, сын Софи Лорен, боксёр и продюсер: история француза, обманувшего Рурка, Ван Дамма и других звёзд Статьи редакции

СМИ прозвали Кристофера Роканкура звёздным мошенником: его жертвами были голливудские знаменитости и американские предприниматели. Точная сумма ущерба от действий француза неизвестна, но сам он утверждает, что за свою жизнь «заработал» $40 млн.

Кристофер Роканкур и Наоми Кэмпбелл francetvinfo
Хочу кухню как у подруги: зачем в Циан сделали поиск квартир по фото

Рассказывает Юлия Зыкова, руководитель команды «Аудитория» в Циан.

Яндекс.такси списал деньги за поездку, которую я не совершал!

И так предстояла поездка по городу и я выбрал яндекс такси зайд я в приложение я увидел что у меня образовался долг и я как законопослушный гражданин оплатил его, и какого было мое удивление когда у меня списалась довольно круглая сумма 4206 руб, пообщавшись с службой поддержки я понял что там какие то роботы и искать помощи нет смысла в общении…

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

По данным Startup Genome, 9 из 10 стартапов терпят неудачу. Возможных причин «смерти» много: недостаточно протестированная гипотеза, неподтвержденная юнит-экономика, неверная стратегия или просто неудача в подходе к продажам.

Бизнес — как ребенок: как мамы совмещают свое дело с заботой о детях

Как совмещать бизнес и семью? Ко Дню матери своими историями поделились бизнесвумен, которые работают c ЮKassa и занимаются детьми. Читайте, как им удается сохранять жизненный баланс и добиваться успеха.

Бот, который сделает маму счастливее

Kind Bot напечатает и отправит по почте фото вашей маме. В 2 клика.

Из науки в IT: как создать свой стартап и стать преподавателем

Как перейти в IT из другой сферы? Как разработать курс, которому нет аналогов? Как студенту получить максимум пользы от занятий? Рассказывает преподаватель OTUS Сергей Окатов, руководитель курсов «Kotlin Backend Developer» и «Kotlin Developer. Basic».

null