Редизайн сайта доставки кафе У Вартана

Провести редизайн и разработать третью версию интернет-магазина доставки продуктов кафе с личным кабинетом, возможностью замены/удаления отдельных ингредиентов блюд, оформлением заказов банкетов и удобной навигацией. Также необходимо было полностью сохранить все результаты по SEO предыдущих версий сайта. Увеличить конверсию (CR) и средний чек (AOV) заказов.

КЛИЕНТ

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

РЕЗУЛЬТАТЫ

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

Увеличили конверсию заказа в среднем на 1,5-2%. Средний чек вырос в среднем по месяцу на 10-15%. Что привело к общему росту выручки интернет-магазина на 25-30%.

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

Клиент остался доволен результатом работ. Работы по сайту и контроль основных показателей выручки ведется по сей день. Общее LT клиента уже более 8 лет.

Подробности проекта ниже

В рамках проекта выполнено:

1. Интервью с конечными пользователями и ответственными лицами клиента.

2. Сбор и описание требований к реализуемому проекту.

3. Анализ структуры страниц текущего сайта и проработка изменений структуры нового.

4. Подбор релевантных референсов и прототипирование.

5. Дизайн на основе полученных данных на предыдущих этапах.

6. Разработка функционала нового сайта, тестирование.

7. Подготовка к переезду.

8. Переезд, запуск, контрольное тестирование.

9. Составление отчетов по результатам редизайна и достижению KPI.

10. Фуд-съемка.

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

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

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

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

Посмотрели последние реализованные проекты в тематике HoReCa в российском и мировом вебе. Оценили сайты конкурентов. Выбрали хорошие идеи и избежали ошибок конкурентов. Составили прототипы всех необходимых страниц и успешно защитили концепт у заказчика.

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

При помощи ТЗ и выполнения всех предыдущих этапов, у разработки было минимум вопросов по функционалу. Все требования заложенные на этапах аналитики и прототипирования были реализованы.

ВЫБОР ИНГРЕДИЕНТОВ

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

КОРЗИНА

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

ОФОРМЛЕНИЕ ЗАКАЗА

При оформлении заказа поработали с API Яндекс.Карта 3.0. Пользователю помогают подсказки карт, метка появляется моментально на адресе для визуального подтверждения.

Оформить заказ можно не только на доставку и самовывоз, но и банкет (про заказ банкета отдельно). Все поля для разных заказов уникализируются и оформление занимает минимум времени, особенно если пользователь авторизован в личном кабинете.

ЛИЧНЫЙ КАБИНЕТ

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

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

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

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

БРОНИРОВАНИЕ

Стала возможность бронировать банкеты в кафе. Постарались учесть особенности оформления заказов на бронирование в кафе и удобство пользователей. Пользователь заполняет форму, указывает необходимые нам данные: дату мероприятия, сколько будет гостей и т.д. После отправки заявки, ему на почту приходит автоматически сгенерированный номер брони и минимальная сумма заказа в зависимости от количества его гостей. Далее пользователю звонит ответственный сотрудник и подтверждает возможность заказа. После подтверждения пользователь может собрать банкетное меню на сайте, в корзине выбирает заказ на банкет, вводит номер брони, который у него есть на почте и все готово. Его заказ уже печатается на принтере в кафе с номером бронирования. А если суммы заказа не хватает, то после ввода номера брони, будет отображаться какая должна быть сумма и сколько не хватает, чтобы отправить заказ.

ФИЛЬТРЫ

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

ТЕСТИРОВАНИЕ

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

Так как это не разработка нового, а редизайн уже существующего сайта, необходимо не потерять все то, что накоплено годами. Для переезда старого сайта на новый, SEO-специалист предварительно подготовил: составление карты переезда, создание новой sitemap, настройка редиректов в htaccess, настройка каноничности страниц. Аккуратно и бережно перенесли: все отзывы пользователей, ранее установленные скрипты, meta-данные, доступы: метрика, аналитика, вебмастер и другие сервисы.

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

ОТСУТСТВИЕ ФОТОГРАФИЙ БЛЮД

На главной странице по решению дизайнеров и аналитиков реализовали вывод всего меню, как это сделано на многих сайтах в этой тематике. Но столкнулись с тем, что у товаров хаотично не отображались фотографии блюд, хотя с технической стороны было все в порядке, и при локальном просмотре сайта проблем нет и, что главное, при тестировании на тестовом домене тоже не обнаружили проблем с картинками. Проблема появилась при запуске сайта на боевом хостинге с привязной домена с защищенным протоколом https. Картинки хаотично отказывались загружаться, без явных ошибок. Лечением послужила отложенная загрузка (lazy loading) с особыми настройками скорости и очередности обработки данных при загрузке контента.

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

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

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

Мы взяли на себя эту задачу. В течение недели провели фуд-съемку более 100 наименований блюд, обработали фотографии, оптимизировали под веб и обновили меню на сайте.

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

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

Увеличили конверсию заказа в среднем на 1,5-2%. Средний чек вырос в среднем по месяцу на 10-15%. Что привело к общему росту выручки интернет-магазина на 25-30%.

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

Клиент остался доволен результатом работ. Работы по сайту и контроль основных показателей выручки ведется по сей день. Общее LT клиента уже более 8 лет.