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

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

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

 

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

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

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

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

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

 

Мы выбрали три основных шрифта, два для акцидента и один в качестве наборного.

 Свели многообразие фонов к трем фактурам, имитирующих дерево, — две светлых и одну темную.

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

 Переосмыслили работу с лейблами, связав офлайн-стилистику с онлайном.

Упростили цветовую палитру, оставив базовый теплый оттенок.

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

— Алексей Шепелин, 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%, поэтому разработке адаптивной версии сайта уделили особое внимание.

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

 

Перейти на сайт