Как мы «рефрешнули» дизайн сайта для итальянской траттории

Привет, это креативное бюро ПИНК. Сегодня расскажем, как мы обновляли дизайн сайта «Моццарелла Бар». Продумали листинг доставки и сделали дружелюбную и человечную корзину.

главный экран нового сайта
главный экран нового сайта

Про клиента и задачи

«Mozarella bar» — сеть ресторанов в Санкт-Петербурге. Команда траттории решила обновить сайт, т.к. старый уже не отвечал современным требованиям.

Узнали о нас через общего знакомого — *привет, Антон*. Он курирует нашу работу с ресторанным холдингом Арама Мнацаканова. На старте был обновленный логотип и старый сайт (скрин ниже).

главная страница старого сайта

Процесс работы

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

скрин проекта (десктоп) с фигмы
скрин проекта (десктоп) с фигмы

Разработали 6 индивидуальных шаблонов страниц для расширения и 7 вариативных поп-ап'ов. Главная страница — навигационная, так мы даем возможность пользователю быстро сориентироваться и понять, куда и что ему нужно. При необходимости столик можно забронировать в 2 клика.

главная страница

Как мы придумывали человечную корзину

Доставка. То, к чему мы привыкли во время ковида. Ей активно стал пользоваться каждый. Поэтому много времени потратили на проектирование этой страницы. С нее и начнем😉

страница доставки

Страница доставки максимально простая. Листинг товаров, меню и корзина в закрепе (на мобилке кстати тоже). Листинг сопровождается сменой метки в меню для комфорта навигации.

мобильная версия страницы доставки
мобильная версия страницы доставки

Сделали удобную и функциональную карточку товара с возможностью выбора состава и «допников» к блюду (а-ля Яндекс.Еда). Это в потенциале должно увеличить средний чек заказа.

карточка блюда

Но самая важная и крутая часть проекта, — это корзина, которую мы сделали человечной в прямом смысле этого слова. Она настоящий аватар с эмоциями и *чатиком*. Когда корзина пустая — грустит😭 Когда в нее попадает продукт, — улыбается и дает подсказки😊

корзина с аватаром

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

подсказки на сайте

Ну и конечно, — оформление заказа. Должно быть простым и понятным. Мы закрыли всевозможные полезные действия. Исходили из опроса пользователей Яндекс.Еды и Деливери — что удобно / что нет. Опросили 194 человека — не так много, но этого хватило.

доставка и оплата
доставка и оплата

Результаты

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

Нам очень интересно, как проект будет развиваться дальше. И как наши идеи повлияют на бизнес-показатели. Поэтому после запуска мы обязательно вернемся с рассказом о сайте 👀

Над проектом работали

Макс Пичугин — арт-директор / ведущий дизайнер

Ксюша Жукова — моушн и анимация

Антон Лобанов — исследователь / ПМ

Алена Бухарова — копирайтер

Ссылочки

Кейсы на behance

Больше кейсов на сайте

Конец😖

Не забывайте подписывать на наш

6363
14 комментариев

первые два скрола очень быстрые
глаза не успевали сфокусироваться
ну а так прикольно
получился тиньков журнал

2
Ответить

Учтем. Спасибо)

1
Ответить

Главное чтобы функционал был легким и доступным и занимал не так много времени для оформления брони или заказа

2
Ответить

Все верно

Ответить

Простите, что за странный гибрид Корзины и Этапа оформления? Я понимаю упрощенный вид выбранных блюд (для этого оформления это нормально), но зачем в нём тогда делать счётчик количества? А если это элемент корзины, то к чему здесь горизональный скролл? Не было бы проще отобразить всё обыкновенным списком? Раз можно выбрать количество, тогда и добавьте настройки блюд, к примеру острота у том яма.
Ну и остальнные странности, почему выбор между самовывозом и доставкой идёт после адреса доставки? Приборы куда в самый низ положили, хотя им самое место быть в корзине, вместе с блюдами.
Да и как понимать способы оплаты? Что тут вообще выбрано? Картой онлайн или наличными при получении? А картой при получении не выйдет?
А если это и есть оформление заказа, то где корзина?

1
Ответить

Не за что извиняться. Такой паттерн мы уже тестировали и он отлично сработал. Спасибо за развернутую обратную связь. Настройки блюд есть в подробной карточке. Но она применяется не для всех продуктов (карточка есть в статье, видимо пропустили). По поводу самовывоза и доставки — особенности с зонами доставки есть. Не все особенности описали в статье. А картой при получении тоже нельзя) И это тоже особенность бизнес процесса, на это мы не влияли в этом проекте.

Очень крутой отзыв, спасибо

1
Ответить

Сайт был хорош, вы его сделали еще лучше ,за это респект

1
Ответить