Разработка сайта для компании Теремок
Проектирование
Мы изучили опыт и стандарты существующих крупных сетей (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%, поэтому разработке адаптивной версии сайта уделили особое внимание.
В распоряжении мобильных пользователей те же функции, что и у десктопных —, но интерфейс полностью переработан под особенности мобильных платформ.
Перейти на сайт
Полный текст статьи читайте на CMS Magazine
