Кейс: Больше, чем просто пицца. Как мы создавали сайт для сети пиццерий Roni Napoletana

Привет! Мы — дизайн-агентство Ancora. Наша команда создаёт сайты и приложения для ритейла, производственных и технологических компаний.
Это наша первая публикация здесь, так что давайте знакомиться и начнем с одного из наших кейсов.

Кейс: Больше, чем просто пицца. Как мы создавали сайт для сети пиццерий  Roni Napoletana

Клиент

К нам обратилась команда, которая создала и развивает сеть пиццерий Roni Napoletаnа. Это международная компания, которая работает в 3 странах: Россия, Казахстан и Узбекистан, и продолжает расти.

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

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

Дальше будет много картинок не только нашей работы, но и аппетитной пиццы. Рекомендуем убрать от экрана голодных людей.:) )

Кейс: Больше, чем просто пицца. Как мы создавали сайт для сети пиццерий  Roni Napoletana

Основная задача

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

Погружение в проект было максимальным. Да, да, прямо на все 150%))

Для начала, мы отправились в Тюмень, в один из ресторанов заказчика, чтобы почувствовать внутренний вайб пиццерии Roni. Мы смотрели, какие формы, цвета и элементы декора использованы в интерьере, чтобы отразить это стилистически в дизайне сайта.

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

Кейс: Больше, чем просто пицца. Как мы создавали сайт для сети пиццерий  Roni Napoletana

Классная была встреча с большим количеством съеденных безумно вкусных пицц (кстати, готовят там просто фантастически) .

Мы опирались на брендбук компании, когда начали работать с типографикой, цветом, голосом и характером проекта. Характер в итоге получится на 100% “итальяно веро” — дружелюбный, открытый и позитивный. Но это будет потом, а начнём мы с изучения опыта конкурентов и знакомства с целевой аудиторией.

Изучаем конкурентов

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

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

Кейс: Больше, чем просто пицца. Как мы создавали сайт для сети пиццерий  Roni Napoletana

Целевая аудитория — это не только фраза “Женщины и мужчины 25-45”, если хочется, чтобы сайт приносил не только приятные эмоции, но и прибыль.

Если честно, то практически невозможно учесть все потребности клиентов, если их просто разделить по гендерным признакам. Целевая аудитория — это реальные люди, с разным уровнем дохода, образом жизни, интересами и проблемами. Нам нужно было узнать этих людей поближе.

Начали исследование

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

Также анализировали отзывы конкурентов в поисковых системах. Искали позитивные и негативные комментарии и отзывы, чтобы отстроиться от конкурентов и усилить проект как изнутри, так и снаружи.

Кейс: Больше, чем просто пицца. Как мы создавали сайт для сети пиццерий  Roni Napoletana

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

Мы выделили несколько основных групп пользователей.

  1. Родители, которым важно не просто вкусно поесть, но и занять ребёнка в заведении.
  2. Компании друзей или коллег, которые хотят забронировать столик, чтобы хорошо провести время, и при этом получить скидку за количество гостей.
  3. Одинокие гости и путешественники — любители итальянской кухни.
  4. Люди, которым не хочется готовить и просто нужна доставка еды.

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

Кейс: Больше, чем просто пицца. Как мы создавали сайт для сети пиццерий  Roni Napoletana

Хороший сайт — это простой и интуитивно понятный интерфейс

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

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

Разработали и согласовали с заказчиком новую архитектуру, проработали CJM (пути пользователя) , чтобы сделать взаимодействие с сайтом для новых посетителей удобным и простым.

Кейс: Больше, чем просто пицца. Как мы создавали сайт для сети пиццерий  Roni Napoletana

Копирайтинг и UX-тестирование

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

Все тексты для сайта мы писали в тесном контакте с заказчиками, опираясь на брендбук компании. В нем подробно описана идеология бренда, а еще мы учитывали особенности ЦА, которые выявили на этапе аналитики.

Кейс: Больше, чем просто пицца. Как мы создавали сайт для сети пиццерий  Roni Napoletana

После текстов подготовили интерактивные прототипы каждой страницы и пошли “в поля” — протестировали структуру на фокус-группе. Наблюдали, как люди взаимодействуют с прототипом, на каких моментах замедляются, что не понятно или не удобно.

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

Кейс: Больше, чем просто пицца. Как мы создавали сайт для сети пиццерий  Roni Napoletana

Важные детали айдентики

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

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

Цветовая схема проекта основана на трех главных цветах. Светло-бежевый, как цвет пиццы. Красный, как цвет экспрессии, огня (пицца готовится в настоящей дровяной печи) и сочных итальянских томатов. Тёмный цвет — цвет стволов оливковых деревьев.

Кейс: Больше, чем просто пицца. Как мы создавали сайт для сети пиццерий  Roni Napoletana

Как рисовали дизайн

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

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

Кейс: Больше, чем просто пицца. Как мы создавали сайт для сети пиццерий  Roni Napoletana

Важные элементы сайта

На сайте можно не только узнать про пиццерии и философию бренда, но и заказать вкуснейшую еду себе домой или в офис. А еще можно заказать фирменную продукцию Roni Napoletana.

Отрисовали страницы двух каталогов — для заказа разнообразной еды и классного мерча, который делают в Roni.

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

Кейс: Больше, чем просто пицца. Как мы создавали сайт для сети пиццерий  Roni Napoletana

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

Подготовили адаптивный дизайн каждой страницы для разработки нашими партнёрами из 2Dit: подготовили UI-kit, компоненты и создали моушн-ролики, чтобы показать, как должна работать анимация на сайте.

Кейс: Больше, чем просто пицца. Как мы создавали сайт для сети пиццерий  Roni Napoletana

Немного о процессах

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

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

Если над проектом работает команда, которая ни на шаг не отходит от изначально утверждённого техзадания, заказчик может столкнуться с разными сложностями.

Кейс: Больше, чем просто пицца. Как мы создавали сайт для сети пиццерий  Roni Napoletana

Мы вносили изменения в ТЗ по ходу движения, так как считаем, что это нормальное органичное развитие проекта и есть вещи, которые невозможно предусмотреть на старте.

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

Сайт уже успешно работает в 3 странах и помогает людям наслаждаться прекрасной неаполитанской пиццей.

Посмотреть больше наших кейсов (или связаться для сотрудничества) можно у нас на сайте.

88
11 комментариев

Протестировали структуру на фокус-группе?
Вы не ошиблись в выборе метода?

Для решения поставленной задачи этого метода и нам и заказчикам оказалось достаточно. Проверили, выявили артефакты, обсудили и исправили.
А каким бы методом вы пользовались?

Уберите к чертям этот кастомный курсор. И освободите главную страницу от простыней текста, никто не заходит на сайт почитать, у вас отдельная страница есть - традиции. А вот блок с актуальными акциями у вас на главной странице отсутствует.
И боже мой уберите вот это что на скрине и позорьтесь, у вас не так много позицией - растяните всё меню до самого футера. Пусть лучше пользователь скроллит, чем будет нажимать каждый экран "Посмотреть ещё".

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

А что с курсором не так?) Кастомный и кастомный, в чем проблема? Хороший креативный курсор, ребята.
С кнопкой "Посмотреть все предложения" соглашусь, единственное меня смущает формулировка "не позорьтесь") Ты тут самый умный и все знаешь?