Главная

Меню

Журнал

Информационная статья

Страница услуги

Pop up окна

О клиенте

Френдс Кафе – заведение с долгой историей, находящееся в Зеленограде. Изначально это было кафе в американском стиле. Через некоторое время формат поменялся, и сейчас Френдс – кафе в европейском стиле с богатым меню. Заведение часто посещают молодые люди и семьи с детьми.

Предыстория

В период первой волны пандемии «Френдс кафе» потребовалась доставка. Клиент не отказывался от работы с агрегаторами, но для усиления продаж нужен был свой проект. Мы предложили заказчику создать удобный и интересный каталог бургеров с удобной системой оформления заказов и онлайн-оплатой.

Цель и задачи

Разработать каталог бургеров.

Решение

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

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

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

На главный экран каталога поместили УТП – «Любой бургер за 199 рублей». Так пользователь ознакомится с условиями акции и с некоторой долей вероятности сделает другой заказ, чем планировал изначально.

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

Добавить или убрать ингредиент можно на стадии оформления заказа. Здесь же указаны условия доставки – в какие районы придет еда и какой минимальный ценник.

Когда пользователь пролистает все меню, он наткнется на еще одни УТП компании. Это увеличивает вероятность, что человек еще раз просмотрит каталог и все-таки оформит заказ.

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

Результаты

Каталог бургеров нужно было сделать интересно, вкусно и индивидуально. Мы справились с задачей на 100%. Изначально предполагалась только доставка бургеров, но позже мы добавили в каталог завтраки и другие блюда. Клиент остался доволен работой. Заказы с сайта постепенно растут и скоро превысят заказы с агрегаторов.

Главная

О нас

Pop up добавления товара

Корзина

SEO-продвижение

Главная

Меню

Меню

О нас

Собятие или акция

О клиенте

NoDramaMama — детское кафе, где комфортно как детям, так и взрослым. Специализация и особенность — игровые комнаты и мастер-классы. Есть разные пространства для развития фантазии, сюжетных игр и полета творчества. Основные посетители – мамы с детьми и полные семьи.

Предыстория

Ресторан находится в Зеленограде. До пандемии на месте клиента было детское кафе «Андерсон». Из-за кризиса оно закрылось, и в городе не осталось хорошего детского кафе, которое специализируется на мастер-классах и детских играх.

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

Мы обладаем высокой экспертизой в Horeca (сегменте услуг индустрии гостеприимства), а потому заказчик даже не рассматривал другого подрядчика. К тому же, сайт NoDramaMama стал для заказчика третьим по счету, который мы разрабатываем.

Цель и задачи

Разработать нестандартный и удобный сайт для детского кафе.

Решение

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

Фирменный стиль у кафе уже был. Его делала компания, которая разрабатывала интерьер. Упор на легкие охровые и серые цвета, а также на окружные фигуры. Мы должны были придерживаться этого стиля при разработке дизайна сайта.

Первое решение, которое мы приняли на этапе прототипирования – это горизонтальный скролл. У сайта 5 страниц: «О нас», «Мероприятия», «Меню», «Галерея» и «Контакты», Каждая страница вмещает несколько блоков с текстами и фото.

На страницу «О нас» мы поместили основные УТП кафе. Добавили информацию о возможности аренды помещения для праздников, об игровых комнатах и т.д.

На страницу «Мероприятия» добавили календарь с активностями и описанием.

В «Меню» и «Галерею» поместили фотографии блюд и самого заведения.

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

Результаты

Дизайн получился очень нежным и удобным. Сайт «NoDramaMama» полностью отражает позиционирование кафе. Аудитории кафе проект тоже нравится. Сегодня поступает около 12 бронирований ежедневно.

1-ый экран

2-ой экран

3-ий экран

4-ый экран

5-ый экран

6-ой экран

7-ой экран

8-ой экран

9-ый экран

10-ый

О клиенте

Ресторан Nikol’sky находится в Зеленограде. Клиент совмещает отличается высоким уровнем обслуживания, безукоризненной сервировкой стола и разнообразием гастрономических шедевров. В 2020 году компания развила доставку авторской кухни.

Предыстория

Нужно разработать решение, которое поможет постоянной аудитории ресторана быстро и удобно оформлять заказ, оплачивая его онлайн. Заказчик хотел отойти от агрегаторов вроде «Яндекс.Еда» или «Деливери Клаб» из-за большой комиссии, которая невыгодна для ресторана. Главная задача — создать ecommerce проект, который будет быстрый, удобный и функциональный.

Основные проблемы «Nikol’sky» пришлись на первую волну пандемии. Рестораны закрылись и ушли в доставку. Заказчик не собирался сотрудничать с агрегаторами, а потому нужно было релизовать сайт в кратчайшие сроки – до 3 недель с учетом ecommrce.

«Nikol’sky» — дочерняя компания клиента, с которым мы уже долгое время сотрудничали. Поэтому нам без лишних вопросов доверили разработку и маркетинг.

Цель и задачи

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

Решение

Целевая аудитория ресторана — достаточно обеспеченные люди, в основном 30-50 лет. Часто семейные, имеют свой бизнес или занимают высокие должности. Средний чек по сайту — 6 000 рублей, хотя минимально допустимый заказ составляет 1500 руб.

При разработке сайта мы руководствовались принципами:

  • Интуитивно понятный интерфейс, чтоб потребитель не тратил время на заказ еды;
  • Информативность;
  • Адаптивность;
  • Наличие триггеров и Call to Actions;
  • Демонстрация выгод потребителя;
  • Учет интересов ресторана «Nikol’sky».

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

Поскольку мы делали не просто сайт, а полноценный сервис доставки, в разработке использовали технологию SPA — single page application. Использовали фреймворк vue.js., который помогает в создании UI и создании сверхбыстрых, мощных и полностью адаптивных одностраничных веб-приложений. Получившийся сайт работал как приложение: без перезагрузок и с мгновенной подгрузкой контента.

В ecommerce использовали Уральский банк, поскольку у него самая выгодная комиссия на транзакции. Для учета столов и блюд интегрировали сайт доставки с iiko. Благодаря этому сервису повара и доставщики могли принимать и обрабатывать заказы в несколько раз быстрее.

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

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

  • Выбор основных блюд;
  • Добавление пищевых акцентов: специй, соусов;
  • Заказ напитков;
  • Изменение позиций;
  • Отправку заказа.

Результаты

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

Стартовый экран



Скролл

Оформление заказа


Главная

Меню

Услуги

Услуга

О компании

Фестиваль вина, еды и музыки, который пройдет в Mriya Winepark на берегу Черного моря в Крыму.

Дизайн

Меню promo

Поп-ап окно

Программа мероприятия

О клиенте

Mriya Resort & SPA — один из ведущих премиум курортов Европы, находящийся в Крыму. На южном побережье Черного моря расположен пятизвездочный отель, медицинский центр, несколько ресторанов, пляжей и иных курортных объектов. Mriya Resort & SPA – это крупнейший курорт России с сотнями наградами международного стандарта.

Особенности бизнеса клиента:

  • Огромная территория: более 60 га площади. Это целый городок со множеством объектов.
  • Десятки активностей: рестораны, лаундж-зоны, пляжи, медицинский центр, детский парк и многое другое.
  • Более 100 международных наград и оценка путешественников 4,5 из 5 на основе 6 тыс. проверенных отзывов.

Предыстория

Знакомство с клиентом

Как сделать больше требуемого и выиграть тендер

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

Главный экран оформили в темных тонах, чтобы показать престиж и люксовость курорта. Форму бронирования вынесли в правую часть экрана, а слева прописали короткие УТП. Наш концепт мало чем отличался от актуальной версии главной страницы:

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

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

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

Концепты заказчик оценил, но все еще сомневался в нашей готовности взяться за проект. Ранее с курортом работала крупная именитая студия, опыт с которой оказался неудачным. После некоторых раздумий клиент все же отдал предпочтение нашему агентству – как молодому, перспективному и заряженному на результат. Мы приступили к работе.

Погружение в работу

Не лучшее время для начала работ или великая сила Зума

Mriya Resort – не просто большой отель. Он огромный, со множеством объектом, активностей и интересных особенностей. Сделать для такого проекта сайт – все равно что выстроить виртуальный город. Нам предстояло изучить курорт вдоль и поперек, исследовать каждый объект и погрузиться в инфраструктуру Mriya Resort. Но все планы сорвала пандемия. При всем желании мы не могли добраться из Москвы в Крым.

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

Заказчик возлагал большие надежды на сайт. Booking.com в Крыму не работает, а потому ключевым способом привлечения туристов остается собственное представительство в сети.

Ключевая задача на старте – придумать структуру сайта, понятную для посетителя и доступную для масштабирования в будущем.

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

  • Сайт передаст посетителю атмосферу и богатство курорта, но одновременно не создаст ощущения чрезмерной премиальности и дороговизны. Курорт доступен для людей с достатком чуть выше среднего. Старый сайт отпугивает эту часть ЦА: люди думают, что отель слишком дорогой. Многие посетители не понимают, зачем платить в Крыму, когда за эти же деньги можно отдохнуть в Греции или Турции. Однако на других курортах нет той инфраструктуры, которую предоставляет Mriya. Все это нужно донести до ЦА с помощью нового сайта.
  • Сайт понятный и приятный внешне. Для этого придется удалить некоторые блоки, изменить навигацию, проработать стилистику и провести ряд иных работ.
  • Новый сайт обеспечит заказчику удобное администрирование контента и масштабирование проекта. Клиент должен сам управлять блоками с контентом, добавлять новости, акции и т.д. На момент знакомства с заказчиком административная часть сайта была сложной для восприятия. Прошлый же подрядчик подолгу не обновлял данные на сайте, когда того просил клиент.

Этапы решения

1. Изучили ЦА клиента

ЦА курорта — люди с достатком чуть выше среднего, а также с супервысоким уровнем заработка. Часто это невыездные чины — военные и люди и государственных структур. Большая часть аудитории курорта – семьи.

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

2. Поиск движка

От технической «начинки» сайта зависело не меньше, чем от нового дизайна. Главная сложность разработки крылась в том, что у нас был конкурент: старый сайт Mriya Resort. На него ежедневно поступал трафик в больших объемах, и наш новый сайт должен был отрабатывать как минимум на том же уровне. Решим мы проблему или нет – зависело от того, какой движок выберем, как его настроим, какие интеграции выполним и т.д.

Главная страница на старом сайте

Старый сайт был выполнен на самописной CMS. Проблема самописных движков в том, что они слишком привязаны к разработчикам. Внести какие-то изменения человеку, не связанному с разработкой, практически невозможно: все редактируется через сотни строчек кода.

Мы провели небольшой аудит старого сайта и выявили следующие проблемы:

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

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

Мы использовали блочную систему для удобства пользователя. Чем чаще человек переходит с одной страницы на другую, тем больше рискует запутаться и потеряться. Из-за этого посетитель забывает что хотел, либо так и не находит цель (как вариант – оформление билетов или поиск контактов). Блоки же позволяют человеку получать информацию в рамках одной страницы. Есть объект и ссылка на контент, и есть сам контент, который в нашем случае подтягивается в правой части страницы:

Почти весь сайт выполнен в таком формате:

Комплекс работ касался разработки опосредовано.

  • Интегрировали сайт с системами сторонней аналитики Яндекс.Метркиа и Roistat, чтобы иметь представление о ключевых показателях эффективности.
  • Внедрили сложные системы безопасности и привели сервера сайта под все стандарты защиты.
  • Интегрировали сайт с сервисом почтовых рассылок.
  • По ходу разработки оптимизировали новый сайт под поисковое продвижение: расставили метатеги, собрали семантику, заполнили robots.txt и sitemap, удалили дубли страниц и настроили редиректы.

Особое внимание уделили системе администрирования. Максимально упростили панель управления Битрикс, чтобы заказчик самостоятельно управлял контентом на сайте. Дополнительно интегрировали сайт с CRM Битркис24. С ее помощью специалисты могут работать с формами, заявками и контентом без знаний кода.

3. Поиск идеального дизайна

Работу с дизайном начали с поиска фирменных цветов. При выборе оттенков ориентировались на исследование по ЦА курорта. В основном это богатые люди, но заказчик уповал на людей с достатком чуть выше среднего. Чтобы избавиться от лишней премиальности, мы выбрали светлые тона. Они не создают ощущение дороговизны и недоступности, а следовательно – не снижают конверсию.

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

На главной странице отказались от лишних элементов. Убрали все тексты, кроме слогана, а на фон поместили ролик с демонстрацией жизни на курорте. Отказались и от картинок с наградами: они лишний раз намекают о премиальности объекта.

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

Выстроили структуру сайта в виде прототипа:

Отрывок схемы сайта

Прототип главной страницы

Всего получили 13 основных разделов:

  • Услуги
  • Размещение в номерах
  • Аренда площадок для мероприятий
  • Блог
  • Акции
  • Локации
  • Карта
  • Типы отдыха
  • Трансфер
  • Афиша
  • О нас
  • Контакты
  • Бронирование

Это идеальное количество страниц, которые вмещают абсолютно все возможности для изучения курорта на сайте. Но как расположить 13 блоков в меню? 5 самых важных блоков расположили в шапке:

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

Мы опасались, что такое меню будет выглядеть перегруженным запутает пользователя. Но соблюсти баланс все же получилось. Каждая из 9 первых кнопок – достаточно крупная, а в подразделах по 3-7 блоков. Пользователь не запутается и быстро найдет необходимую информацию. Для сравнения, меню старого сайта выглядело так:

Все блоки в шапке. Шрифт из-за этого мелкий, а иконки над ним отвлекают внимание.

Любая страница сайта встречает пользователя ярким полноразмерным изображением:

Здесь все еще минимум информации – только название услуги и кнопка. Текст вынесли ниже:

Переработали страницу бронирования. Форму сделали проще, убрали лишние строки.

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

Старый тип формы

Форма не сразу прогружается

Мы сделали быстрый, удобный и доступный для каждого сайт, который привлекает все сегменты ЦА и в яркой манере демонстрирует основные прелести курорта Mriya Resort.

Результаты

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

Главная

Страница номера

Медицинский центр — страница объекта

Дримвуд — страница объекта

Винный парк — страница объекта

Японский сад — страница объекта

Транспорт

Карточка транспорта

Статья блока

Главная

Карточка поставщика

Редизайн сайта. Главная страница

Страница "Меню"

Страница "Услуги"

SEO трафик