Проект

Теремок

Перезапустили сайт для крупнейшей в России сети ресторанов русской кухни.
Сайт для сети ресторанов «Теремок»

«Теремок» — крупнейшая в России сеть ресторанов русской кухни. Более 300 ресторанов по стране, 150 из них — в Москве и Московской области.

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

1/
Проблемы

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

«Теремку» нужен был сайт, откуда посетители могли бы быстро получать информацию о меню, ценах, специальных предложениях.

Проектирование

Мы изучили опыт и стандарты существующих крупных сетей (McDonald’s, KFC), вычленили из них сложившиеся паттерны и на их основе сформировали новые решения, отражающие контекст и особенности сети.

Изучив и сопоставив данные, мы составили портреты целевой аудитории и разработали Customer Journey Map — чтобы понять паттерны поведения аудитории.

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

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

Дизайн-концепция

Работая с визуалом, мы должны были донести до потребителя одну важную мысль: «Теремок» — это не фаст-фуд, это сеть принципиально иного формата.

Обновление сайта началось вместе с переработкой самого фирменного стиля «Теремка» — поэтому сайт частично унаследовал элементы нового фирменного стиля.

1/
Мы выбрали три основных шрифта, два для акцидента и один в качестве наборного.
Свели многообразие фонов к трем фактурам, имитирующих дерево, — две светлых и одну темную.
Опираясь на иконки со старого сайта, для каждой категории создали подобрали образ, соответствующий стилю.
Переосмыслили работу с лейблами, связав офлайн-стилистику с онлайном.
Упростили цветовую палитру, оставив базовый теплый оттенок.
Общее сдержанное настроение на ключевых страницах разбавили веселыми иллюстрациями.
Общее сдержанное настроение на ключевых страницах разбавили веселыми иллюстрациями.
Общее сдержанное настроение на ключевых страницах разбавили веселыми иллюстрациями.
Общее сдержанное настроение на ключевых страницах разбавили веселыми иллюстрациями.
Алексей Шепелин
aрт-директор
Одной из основных задач бренда было найти свой визуальный язык и отстроиться от сетей-конкурентов. Так «Теремок» получил современный стиль, но при этом сохранил свою фирменную «домашнюю» атмосферу. Мы получили массу удовольствия от процесса работы.
Работа с контентом

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

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

Технологические решения

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

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

Ту же технологию использует калькулятор калорий

Александр Бочаров
технический директор

«Асинхронное API решает следующие задачи: импорт доступных ресторанов с привязкой к соответствующим местоположениям, местоположений ресторанов (города, метро), импорт блюд, их свойств и торговых (ценовых) предложений с привязкой к соответствующим ресторанам. На основе этих данных формируются основные разделы сайта — меню, карта заведений, калькулятор. По всем видам импортируемых данных можно включить фильтр — там, где это предусмотрено, например, на карте».

Стек технологий

Backend

fastCGI(php-fpm) + nginx + MariaDB в изолированных Docker контейнерах с оркестрацией на хост-машине с установленной *nix системой (CentOS 7)

php7.2 + Bitrix Framework



Frontend

Sass + js + React + Redux

Cборка: pug + Babel + Webpack + Gulp

Карта теремков

Особенность нового сайта — кликабельная карта сети, пока для трех городов.

Карта учитывает геолокацию и синхронизирована с базой данных.

Благодаря этому карта работает как 2ГИС, но только для ресторанов: показывает расположение точек сети, расписание.

Кроме того, через нее можно перейти на страницы самих ресторанов, увидеть их меню и цены.

Форум

Форум на сайте «Теремка» — важный инструмент коммуникации для компании, его посещает около 25 000 человек в месяц.

Мы перенесли всех пользователей, темы и сообщения на «1С-Битрикс — Форум», упростили процесс создания тем.

Калькулятор калорий

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

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

Александр Бочаров
технический директор
Одна из полезных возможностей сайта — калькулятор калорий. Сюда автоматически добавляются блюда из базы 1С и считается их суммарная пищевая ценность. Для повышения достоверности представленных на сайте данных и контроля их целостности мы реализовали систему мониторинга обмена данных с 1С — она оповещает ответственных лиц о возможных проблемах.
Адаптив

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

Доля трафика такой аудитории достигает 50%, поэтому разработке адаптивной версии сайта уделили особое внимание.

1/
Свели воедино продуктовое и навигационное меню, ключевые иконки вынесли в шапку сайта.
Сложные элементы с десктопа (продуктовое меню, новинки) упростили до лаконичных и понятных слайдеров.
Для удобства работы с меню при скролле зафиксировали плашку выбора категории блюд.
В мобильную версию добавили новую функцию — выбрав ближайший «Теремок», пользователю увидит расстояние до него.
Все остальные элементы интерфейса, включая форум, бережно перенесли в адаптив, сохранив их функциональность и на мобильных устройствах.
В распоряжении мобильных пользователей те же функции, что и у десктопных — но интерфейс полностью переработан под особенности мобильных платформ.
Нужен проект?
Оставьте заявку, либо звоните, мы пообщаемся и сами все за вас заполним: +7 385 259 06 30
Ваш бюджет:
Откуда узнали о нас:
Нажимая на кнопку, вы даете согласие на обработку персональных данных и соглашаетесь с политикой конфиденциальности.