Команда российской службы заказа еды Заказака рассказала о процессе редизайна своего сайта – какие показатели были улучшены, какие проблемы возникли в процессе, а что не получилось так, как планировалось.
Обновление дизайна сайта действительно было очень масштабным и, по сути, первым за все время существования нашего сервиса.
Предыдущие обновления были незначительными и в большинстве случаев вносили лишь некоторые коррективы в элементы сайта.
Обычно глобальный редизайн в крупных проектах проводится не чаще, чем раз в 3-5 лет, но мы, воспользовавшись нашей гибкостью и гордо называя себя стартапом, решили не ждать и, пойдя ва-банк, обновились.
мы сами полтора года спустя.
Решение о редизайне появилось в середине августа 2014 года, то есть спустя десять месяцев после запуска проекта.
Причин для такого решения было немало, но если коротко, то их три.
- При первоначальной разработке в интерфейсе сайта были допущены существенные ошибки из-за отсутствия опыта работы в электронной коммерции.
- По мере того, как мы получали все больше и больше данных о поведении пользователей, мы обнаружили ряд UX-ошибок.
- Основной цвет и дизайн сайта были плохо восприняты пользователями.
18 марта мы обновили наш сайт и представили новую концепцию.
От идеи до реализации прошло много месяцев, но оно того стоило.
Ниже мы сравним макеты сайтов до и после редизайна и объясним, чем мы руководствовались, решая их изменить.
Также хотелось бы обратить ваше внимание на то, что промежуточных вариантов здесь не будет – сравнением будет первоначальный дизайн от Endy и последний релиз от Philip.
Домашняя страница
До редизайна:
После редизайна:
Пойду по порядку и расскажу подробнее о тех моментах, которые нас не порадовали на главной странице.
1. Цвет Было принято решение отойти от фирменного оранжевого цвета в пользу синего.
Считается, что оранжевый цвет оказывает энергетическое действие и вызывает эмоции, связанные с радостью и хорошим настроением.
Он идеально вписывался в оригинальный дизайн и наше направление, но мы решили отказаться от него в пользу синего цвета.
Синий цвет действует успокаивающе, вселяет доверие и создает атмосферу безопасности.
В отличие от оранжевого, он не отвлекает пользователя и дает возможность уделить больше внимания непосредственно содержанию нашего сайта.
Да, мы все знаем, что оранжевый, как и красный, лучше стимулирует активность и аппетит, но мы руководствовались тем, что эти цвета в изобилии содержатся в нашем контенте — логотипах ресторанов и фотографиях еды.
2. Категории Здесь все просто – контент должен продавать, а в нашем случае еще и вызывать аппетит, поэтому мелкие иконки категорий были заменены большими и сочными картинками.
3. Фильтр В промежуточной версии его вырезали, так как он часто путал посетителей и показывал пустые результаты.
Например, пользователь выбирает европейскую кухню с минимальной суммой заказа 300 рублей и добавляет еще один фильтр «еда за баллы», после чего получает в результатах поиска один-два ресторана.
При таких скудных результатах вероятность ухода пользователя с сайта составляла 97%.
Классический фильтр присутствует только на странице каталога ресторанов и по умолчанию показывает все рестораны, отсортированные по популярности.
Мы руководствовались принципом «Огласите весь список, пожалуйста!» и они были правы.
4. Персонажи Они получились очень крутыми и милыми.
Кому-то они напоминали миньонов, а кому-то говорили, что это картошка, но свою миссию - создать иллюзию живого бренда и привлечь пользователей - они выполнили - на 100%.
Однако, углубившись в аналитику и проанализировав поведение пользователей, мы пришли к выводу, что они приносят больше вреда, чем пользы, поскольку в первые секунды посещения сайта пользователь обращает на них внимание и, как следствие, тратит на них меньше времени.
контент, который мешал пониманию сервиса.
Мы их удалили полностью, но они обязательно вернутся.
5. Отзывы В макет вставляется только пример; в рабочей версии были показаны отзывы представителей прессы из журналов «Dog», 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%.
Страница ресторана
До редизайна:
После редизайна:
Эта страница претерпела больше изменений в дизайне, чем в интерфейсе, поэтому здесь я буду краток.
Мы немного скорректировали блок с информацией о ресторане и представили еду за баллы и акции отдельными блюдами.
Это сделано для того, чтобы показать пользователю максимально возможное количество блюд в зоне видимости первого экрана.
Итак, вместо трех позиций мы будем показывать шесть, плюс добавили возможность просмотра увеличенной фотографии блюда при наведении, что просто необходимо при электронной конвертации.
Также мы ввели интерактивный фон, который меняется в зависимости от основной категории ресторана.
Результат: показатель отказов снизился на 1,9%, количество просмотров страниц за сеанс увеличилось на 13%, а продолжительность сеанса уменьшилась на 9,6%.
Скорость транзакций выросла на 7,4%.
Корзина
До редизайна:
После редизайна:
Большинство посетителей сайта «сваливаются» по пути, так и не дойдя до корзины, поэтому те, кто смог до нее дойти, на вес золота.
Мы удалили с этой страницы абсолютно все ненужные элементы, чтобы ничто не отвлекало внимание пользователя от самого главного – процесса заказа.
Также мы объединили два этапа заказа в один, а это значит, что теперь пользователю нужна всего одна страница, чтобы просмотреть свой заказ, отредактировать его, оформить и оформить заказ.
Результат: показатель отказов корзины снизился на 5,9%, длительность просмотра страницы уменьшилась на 10%, процент выходов снизился на 30,7%.
Итоговые цифры
Я кратко рассказал об изменениях, произошедших на четырех основных страницах взаимодействия пользователей с нашим сайтом.Теперь немного цифр, чтобы понять, к чему привели эти изменения.
Уровень отказов
- Главная страница - уменьшилась на 26,5%.
- Каталог ресторанов - уменьшен на 6%.
- Страница ресторанов - уменьшилась на 1,9%.
- Корзина - уменьшилась на 5,9%.
- В целом – снизилось на 6%.
Средняя продолжительность сеанса увеличился на 20,5%.
Общая конверсия сайта увеличился на 19,27%.
Результатом редизайна мы остались довольны, хотя надеялись на более существенные изменения показателей.
Но помимо результата мы получили новый опыт и более четкое понимание того, насколько важно уделять внимание каждой мелочи и деталям в интерфейсе.
Также мы гораздо лучше научились работать с поведенческими факторами пользователей, что дало нам новые данные для аналитики и идеи, которые мы реализуем в ближайшем будущем.
-
Индексирование И Pr
19 Oct, 24 -
Как Редактировать Страницу В Wordpress
19 Oct, 24 -
Проекционное Моделирование
19 Oct, 24
