Еда и ничего лишнего: как мы создавали сайт для заказа блюд паназиатской кухни

Сайт для заказа еды должен вызывать у клиента аппетит и желание добавить в корзину как можно больше товаров. О том, как мы этого добивались, — в новом кейсе студии дизайна и разработки Uprising Agency

Мы живём в такое время, когда еде недостаточно быть просто вкусной. Её нужно оригинально подать в красивом помещении с уютной атмосферой и приветливыми официантами. И это правило работает даже при заказе доставки на сайте. Только здесь мы хотим видеть аппетитную картинку, понятный интерфейс и возможность оплаты в два клика.

Что будет, если не дать всего этого клиенту? По-прежнему голодный, он уйдёт к конкурентам и закажет доставку у них. Потому что там не только вкусно, но и эстетично. А ещё — удобно.

Самое главное в такой ситуации — перестать работать по принципу «и так сойдет», вовремя осознать проблему и начать действовать. Как это сделал наш клиент из Челябинска.

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

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

Мы создали три версии сайта — mobile, tablet и desktop. Сделали акцент на качественных фото, современном дизайне и удобной интеграции с крупным сервисом доставки.

Когда клиент решает, какую еду он хотел бы заказать себе на ужин, то в первую очередь смотрит на фото блюда, затем на цену, потом на название. И только в самом конце может прочитать описание, если оно будет максимально чётким и не слишком длинным.

Поэтому первым, что мы попросили от заказчика, были качественные фото блюд. Мы подготовили подробное руководство с референсами того, как должны быть выполнены снимки. Посоветовали отнестись внимательно к выбору фотографа, тщательно отсматривать портфолио и только потом принимать решение. И стали ждать фидбэка от заказчика.

Референсы, которые мы предоставили фотографу

Каким же было наше разочарование, когда фотографии оказались из серии «ожидание ∙ реальность». Фотограф не прислушался к нашим рекомендациям. Стремясь «оживить» и разнообразить кадры, фотограф перестарался с аксессуарами. Они перетягивали внимание на себя, отвлекая от самого блюда. В результате новые фотографии совсем не подошли под разработанную минималистичную концепцию.

Первый результат от фотографа

Взаимодействие с клиентом осложнялось тем, что нас разделяли сотни километров. Наша команда не могла встретиться с фотографом и лично проконтролировать процесс съёмки. Тогда мы решили: нужно писать развёрнутое ТЗ, подробно описывая в нём каждое действие. А потом — повторять фотосессию заново.

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

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

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

Чтобы снимки выглядели еще более насыщенно и эффектно, мы взялись за ретушь:

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

Создавать сайт предстояло на конструкторе «Tilda». Существует стереотип, что этот инструмент для создания веб-страниц — максимально прост и функционально ограничен. Но просто сделать ресурс на базе готовых блоков и шаблонов — не наш метод.

Чтобы сайт выглядел стильно и удовлетворял всем требованиям, которые мы поставили перед собой в начале работы над проектом, наша команда использует редактор «Zero block». Мы создали дизайн с нуля, с массой продуманных нюансов и кастомных решений, вплотную приблизившись к high level production в линейке подобных веб-продуктов.

Вот что у нас получилось в итоге.

На главной странице сайта посетителей больше не встречает тёмная фотография одного из ресторанов «4pho». Также мы убрали колонку с меню, которая была в старой версии сайта, и перенесли каталог блюд на отдельную страницу. А на главной оставили только:

Мы сознательно оставили на странице «воздух», не перегружая её множеством маленьких фотографий, цветов, текста и деталей. Максимально лаконичный дизайн позволил сделать акцент на самом главном достоинстве ресторана — еде.

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

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

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

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

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

Во время беседы заказчик рассказал нам о «Смартомато» — сервисе, который помогает соединить кухню с доставкой. Клиенту достаточно сделать заказ на сайте, чтобы он сразу попал на сервис «Смартомато», объединенный с «Яндекс.Go».

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

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