Еда и ничего лишнего: как мы создавали сайт для заказа блюд паназиатской кухни
Сайт для заказа еды должен вызывать у клиента аппетит и желание добавить в корзину как можно больше товаров. О том, как мы этого добивались, — в новом кейсе студии дизайна и разработки Uprising Agency
Мы живём в такое время, когда еде недостаточно быть просто вкусной. Её нужно оригинально подать в красивом помещении с уютной атмосферой и приветливыми официантами. И это правило работает даже при заказе доставки на сайте. Только здесь мы хотим видеть аппетитную картинку, понятный интерфейс и возможность оплаты в два клика.
Что будет, если не дать всего этого клиенту? По-прежнему голодный, он уйдёт к конкурентам и закажет доставку у них. Потому что там не только вкусно, но и эстетично. А ещё — удобно.
Самое главное в такой ситуации — перестать работать по принципу «и так сойдет», вовремя осознать проблему и начать действовать. Как это сделал наш клиент из Челябинска.
Дано
У клиента есть свой сайт для заказа паназиатской еды «4pho». А еще — несколько офлайн-точек в Челябинске, которые любимы и популярны у местных жителей. Посетители оставляли самые лучшие отзывы о кухне и атмосфере заведений. Но вот доставка у заказчика не процветала. И было сразу понятно, почему. Функционал сайта для онлайн-заказов был рабочим, вот только внешне совсем не презентабельным. Дизайн, интерфейс, снимки блюд уже давно не соответствуют требованиям времени. Клиент понимал: надо что-то менять. Но у него не было чёткого видения, как сайт должен выглядеть в итоге. Поэтому всё, начиная с видения и концепта, было доверено нашей команде.
Задача
Сделать дизайн, который будет продавать. Не нагружая интерфейс ненужными деталями, функциями и страницами, создать простой и удобный ресурс, привлекательный своей лаконичностью и вкусными снимками.
Решение
Мы создали три версии сайта — mobile, tablet и desktop. Сделали акцент на качественных фото, современном дизайне и удобной интеграции с крупным сервисом доставки.
Фотографии
Когда клиент решает, какую еду он хотел бы заказать себе на ужин, то в первую очередь смотрит на фото блюда, затем на цену, потом на название. И только в самом конце может прочитать описание, если оно будет максимально чётким и не слишком длинным.
Поэтому первым, что мы попросили от заказчика, были качественные фото блюд. Мы подготовили подробное руководство с референсами того, как должны быть выполнены снимки. Посоветовали отнестись внимательно к выбору фотографа, тщательно отсматривать портфолио и только потом принимать решение. И стали ждать фидбэка от заказчика.
Референсы, которые мы предоставили фотографу
Каким же было наше разочарование, когда фотографии оказались из серии «ожидание ∙ реальность». Фотограф не прислушался к нашим рекомендациям. Стремясь «оживить» и разнообразить кадры, фотограф перестарался с аксессуарами. Они перетягивали внимание на себя, отвлекая от самого блюда. В результате новые фотографии совсем не подошли под разработанную минималистичную концепцию.
Первый результат от фотографа
Взаимодействие с клиентом осложнялось тем, что нас разделяли сотни километров. Наша команда не могла встретиться с фотографом и лично проконтролировать процесс съёмки. Тогда мы решили: нужно писать развёрнутое ТЗ, подробно описывая в нём каждое действие. А потом — повторять фотосессию заново.
В техзадании мы прописали всё — от цвета фона до расположения источников света. Например, попросили снимать блюда строго сверху под углом в 90°. А ещё — убрать аксессуары и сделать акцент на еде.
Составляя задание, наш дизайнер сам тестировал лучшие ракурсы и на основании этих экспериментов дополнял список рекомендаций для фотографа.
Мы долго сражались за качество снимков и в итоге победили. После нескольких попыток, у нас оказались идеальные кадры вкусной еды на белом фоне. Наконец-то мы смогли забрать картинки в работу.
Чтобы снимки выглядели еще более насыщенно и эффектно, мы взялись за ретушь:
- повысили резкость;
- вручную добавили двухуровневую тень;
- немного высветлили центральную часть фото;
- добавили блики на тарелках, подчеркнув тем самым чистоту, свежесть и щепетильное отношение к гигиене.
Мы наконец-то добились того, к чему стремились с самого начала: на выходе получились яркие лаконичные снимки, которые будут пробуждать аппетит. Увидев такие блюда, клиент вряд ли захочет закрыть сайт и оставить корзину пустой.
Дизайн
Создавать сайт предстояло на конструкторе «Tilda». Существует стереотип, что этот инструмент для создания веб-страниц — максимально прост и функционально ограничен. Но просто сделать ресурс на базе готовых блоков и шаблонов — не наш метод.
Чтобы сайт выглядел стильно и удовлетворял всем требованиям, которые мы поставили перед собой в начале работы над проектом, наша команда использует редактор «Zero block». Мы создали дизайн с нуля, с массой продуманных нюансов и кастомных решений, вплотную приблизившись к high level production в линейке подобных веб-продуктов.
Вот что у нас получилось в итоге.
Главная страница
На главной странице сайта посетителей больше не встречает тёмная фотография одного из ресторанов «4pho». Также мы убрали колонку с меню, которая была в старой версии сайта, и перенесли каталог блюд на отдельную страницу. А на главной оставили только:
- белый фон;
яркий, контрастный логотип, размер которого стал гораздо меньше, чтобы не перетягивать на себя внимание;
крупное фото блюда;
- ключевую информацию о ценностях компании и особенностях меню;
- адреса офлайн-ресторанов;
сведения об условиях оплаты и доставки.
Мы сознательно оставили на странице «воздух», не перегружая её множеством маленьких фотографий, цветов, текста и деталей. Максимально лаконичный дизайн позволил сделать акцент на самом главном достоинстве ресторана — еде.
Меню
На странице меню мы сделали рубрикатор для основных разделов. Нажимая на выбранное блюдо, пользователь переходит к подробной карточке товара. Центральную позицию здесь снова занимает фото. Рядом — краткая информация о составе и особенностях блюда. Сначала заказчик не видел особого смысла в описаниях и был убежден, что хватит только снимка и данных о составе. Но когда мы подготовили лаконичные продающие тексты для каждого блюда, клиент по итогу остался очень доволен. В соответствии с существующими требованиями Роспотребнадзора, мы дополнили страницу информацией о калорийности, соотношении белков, жиров и углеводов в составе.
А ещё каждый клиент сможет оценить блюдо после заказа. Так на сайте будет формироваться рейтинг, который поможет следующим посетителям сделать свой выбор. Статистика оценок отображается сразу под названием в интуитивно привычном формате пяти звезд.
Кнопку «Добавить в корзину» мы сделали довольно крупной и контрастной, так как это одно из важнейших действий, которое должен совершить клиент. Важно, чтобы его можно было сделать быстро, не задаваясь вопросом «Куда здесь нажимать?». Таким образом создаётся тот самый баланс между эстетичностью и юзабилити.
Остальные страницы
Сайт, созданный для заказа еды, должен выполнять самую главную функцию — быть удобным для посетителей. Чтобы клиент не отвлекался на лишнюю информацию и не блуждал по сайту, мы сделали ресурс с минимумом внутренних страниц. Кроме страницы с меню, мы добавили на сайт:
- информацию об акциях;
- сведения об оплате и доставке;
- контакты.
Интеграция
Кроме создания качественного интерфейса, клиент хотел сделать упор на скорость и удобство доставки.
Во время беседы заказчик рассказал нам о «Смартомато» — сервисе, который помогает соединить кухню с доставкой. Клиенту достаточно сделать заказ на сайте, чтобы он сразу попал на сервис «Смартомато», объединенный с «Яндекс.Go».
Наш проджект-менеджер исследовал возможность использования сервиса «Смартомато» и подтвердил, что его можно интегрировать на новый сайт. Он договорился с поддержкой, предварительно настроил сервис и синхронизировал меню. А еще установил виджет «Смартомато» на сайт и немного кастомизировал его, чтобы клиенту оставалось только настроить гео-зоны и начать пользоваться.
Ревью
- По календарю над созданием сайта службы доставки «4pho» мы работали 2 месяца. Довольно долгое время заняло ожидание готовых фотографий. Реально на выполнение всех задач с нашей стороны было затрачено 20 рабочих дней.
- Были разработаны три версии сайта: mobile, tablet и desktop.
- Для работы мы использовали: «Photoshop», «Figma» и «Tilda ∙ Zero block».
Составив подробное ТЗ, добились от заказчика красивых профессиональных снимков блюд.
- Создали лаконичный и стильный дизайн с акцентом на качественное фото еды.
Разработали индивидуальные карточки товара для каждого блюда, добавив информацию о составе, калорийности, весе, а также возможность выставлять оценки от пользователей.
Интегрировали на сайт сервис «Смартомато», ускорив процесс заказа и доставки.
В итоге наш сайт полностью согласован и утвержден заказчиком. В ближайшее время клиенты «4pho» увидят и оценят результаты нашей работы в деле. И мы уверены, что им будет вкусно!
Хорошая работа, но долго, дорого и к большому сожалению никому не нужно (. Инстаграм сейчас часто выше в выдаче чем официальный сайт. Ну и все эти агрегаторы доставок, просто лишаю какого-либо смысла в разработке и развитии собственных сайтов для ресторанов.
Благодарим за оценку :)
На самом деле, отчасти согласны, что соцсети и агрегаторы - мощный инструмент сейчас. Однако, есть свои нюансы - во-первых, Инстаграм и прочие соцсети нужно постоянно обновлять, выкладывать актуальный контент и это большая долгая работа - по итогу на смм может уйти даже больше денег и времени.
А с агрегаторами вопрос больше локальный - за пределами Москвы и Питера люди часто привязываются к хорошим местам с вкусной кухней (тк в регионах их обычно не так много) и заказывают просто у них, да и в целом ищут просто через поиск места).
А насчет "долго" - не согласны, самой работы было всего на 20 дней, для качественного дизайна это не так много. Дольше шел процесс ожидания контента)
Комментарий недоступен
Отличный кейс!
Действительно, производство контента иногда сложнее, чем проектирование UX/UI. Я сейчас не говорю про сложный UX с 50 экранами пути пользователя)
В eCommerce - это суперважный аспект и у вас здорово вышло с этим потрудиться!
Кроме того, этот же контент уйдет и в соцсети, и будет что дать рекламщикам на производство крео.
Спасибо большое за Ваш комментарий! Рады, что наш кейс понравился, мы вкладываем много сил в каждый проект)
А был ли мальчик? Ни сайта, который вы переделывали, ни вашего - Гугл не знает…