Роллы как у apple: Кейс по обновлению сайта доставки роллов

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

Эпоха инстаграма - это когда еде мало быть вкусной, еще нужно, чтобы она была красивой и подана в классном месте. Ничего плохого в этом нет. Наоборот, на мой взгляд это развивает поваров, развивает места и все становится лучше, понятнее и красивее. Применяя к сайту - нужен понятный интерфейс, красивые иллюстрации и быстрая, легкая функция оплаты.
Что будет, если не дать всего этого клиенту? По-прежнему голодный, он уйдёт к конкурентам и закажет доставку у них. Или в Деливери. Потому что там не только вкусно, но и эстетично. А ещё — удобно.
Самое главное в такой ситуации — перестать работать по принципу «и так сойдет», вовремя осознать проблему и начать действовать. Так и произошло у моего клиента из Сыктывкара.

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

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

Я создал две версии сайта — mobile и desktop. "Пустой" дизайн позволил мне сделать интерфейс резиновым, а значит desktop и tablet можно было объеденить в одну удобную для обоих площадок версию. Сделали акцент на качественных фото, современном дизайне. Новый дизайн готов к интеграциям с любым сервисом доставки, что расширило возможности работы.

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

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

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

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

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

У кнопки «Добавить в корзину» было сразу несколько задач. Так как это одно из важнейших действий, которое должен совершить клиент, при этом не потерять ответ на основной вопрос при добавлении в корзину «Сколько стоит эта прелесть». Важно, чтобы действие можно было сделать быстро, не задаваясь вопросом «Куда здесь нажимать?». На белом большом пространстве кнопка стала контрастной и яркой, а также включила в себя ценник товара. Таким образом создаётся тот самый баланс между эстетичностью и юзабилити.

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

Победный вопль: сайт полностью согласован и утвержден заказчиком. Прямо сейчас идет доработка последних штрихов сайта. В ближайшее время клиенты «Sushiman» увидят и оценят результаты нашей работы в деле.
Приятного аппетита!