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

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

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

1) При первичной разработке были допущены существенные ошибки в интерфейсе сайта из-за отсутствия опыта в электронной коммерции.

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

3) Основной цвет сайта и дизайн плохо воспринимались пользователями.

Первой версией дизайна занималась студия Endy, а редизайн мы доверили Филиппу Фильченко.

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

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

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

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

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

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

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

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

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

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

3. Фильтр. Он был вырезан еще на промежуточном варианте, поскольку часто вводил посетителей в ступор и показывал пустую выдачу. Например, пользователь выбирает европейскую кухню с суммой минимального заказа в 300 рублей и добавляет еще один фильтр "еда за баллы", после чего он получает в выдаче один или два ресторана. Имея такую скудную выдачу, пользователь с вероятностью в 97% покидал сайт. Классический фильтр присутствует только на странице каталога ресторанов и по умолчанию показывает все рестораны отсортированные по-популярности. Мы пошли по принципу "Огласите весь список, пожалуйста!" и не прогадали.

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

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

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

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

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

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

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

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

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

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

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

3) Рейтинг. Будучи одержимыми идеей предоставить максимальный выбор пользователям, мы также стремились показать объективную и релевантную информацию о ресторане. Как большие любители кино, мы вдохновились десятибалльным рейтингом IMDB и Кинопоиска, поскольку, на наш взгляд, именно десятибалльная шкала может передать максимально детальную оценку. Но эта идея не нашла поддержки у пользователей: одним эти цифры казались непонятными, другим просто не нравились. Оценка из пяти звезд имела наибольшую популярность хотя бы потому, что ее используют в Google play и Apple Store.

Результат: Процент отказов уменьшился на 6%, на 19,6% увеличилось кол-во просмотров страниц на 1 сеанс, длительность сеанса увеличилась на 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%

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

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

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

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

Спасибо за внимание, и высоких вам конверсий!