Канал в Telegram
Наша группа VK
Сайт и приложение позволяют в несколько кликов заказать доставку еды из «Гриль №1» на дом или оформить заказ в ресторане.
В федеральную сеть ресторанов быстрого питания приходит по 10-15 заказов в минуту, в пиковые нагрузки 100-200. С помощью сайта и приложения мы получаем заказ, отдаем его в ближайшую точку, по готовности он уходит курьеру. Весь процесс происходит без участия оператора.
Старый сайт и мобильное приложение имели свои недостатки, поскольку были кастомизированными «коробками». Сайт уже не выдерживал пятничного наплыва посетителей, интерфейс был неудобным, а логика взаимодействия оставляла желать лучшего. Мобильное приложение не давало возможность реализовать тот визуал и функционал, который хотелось клиенту.
И это только часть проблем. Все это означало одно — пора выходить за рамки стандартных решений.
От нас требовалось создать новый сайт, чтобы пользователи могли получать качественный сервис, тратя на ожидание не дольше времени, чем в реальной очереди.
Мобильное приложение должно не просто дублировать визуал и функционал сайта, а предлагать нечто большее. Например, персонализированные push-уведомления и управление программой лояльности через систему QR-кодов.
Новая экосистема должна увеличить конверсию, снизить нагрузку с колл-центра и повысить лояльность пользователей.
Провели аналитику: собрали требования, проанализировали целевую аудиторию и конкурентов, составили структуру будущих продуктов, провели анализ сторов
Подготовили ТЗ для разработки, описали их функционал и характеристики
Разработали дизайн, сделали адаптивную верстку для смартфонов и планшетов
Провели интеграцию с системой управления ресторанами iiko
Настроили интеграцию с почтовым сервисом, Яндекс Картами, платежными системами и DaData
Реализовали каталог с карточками товаров, поиск, фильтрацию и систему рекомендаций блюд
Разработали страницу оформления заказа, подключили платежную систему Альфа-Банка
Реализовали централизованную административную панель, из которой можно управлять сайтом и приложением: обновлять меню, контент, баннеры, промокоды
Настроили обработку условий бонусной программы: акций, персональных скидок, промокодов
Реализовали кастомные push-уведомления и их рассылку
Проработали отказоустойчивость системы, провели рефакторинг и реализовали версионность
Прежде чем погрузиться в разработку, мы обсудили цели, задачи и видение проекта с клиентом. Провели детальный анализ целевой аудитории. Нужно было понять, что действительно важно пользователям, что у них болит (помимо пустого желудка), чего они ищут на подобных сайтах и от чего хотели бы избавиться.
Проанализировали текущий сайт и выявили узкие места — где теряются пользователи, в каких местах они чаще покидают сервис, какие шаги вызывают трудности. Нашли нестыковки в интерфейсе и логике взаимодействия функций. На основе этого составили свое видение и описали функционал будущего сайта.
Внимательно изучили конкурентов — что они предлагают и в чем их преимущества. Это помогло понять, где мы можем выделиться и какие фишки интегрировать.
Просто копировать сильные стороны недостаточно. Нужно было добавить что-то уникальное.
После релиза MVP аналитика продолжала играть важную роль. Мы отслеживали ключевые метрики: конверсию, среднее время пребывания на сайте, процент завершенных заказов и число повторных визитов. Это позволило оценить, насколько успешными оказались внесенные изменения.
Еще на этапе разработки основных функций мы знали, что планируем внедрять в следующих версиях, поэтому активно работали с бэклогом. Новые идеи черпали от обратной связи первых пользователей.
Еще до этого этапа мы провели ревью верстки, макетов и изображений, которые остались у клиента от прошлой студии. Технологии, с помощью которых она создавалась, устарели. Был риск, что материалы повлияют на скорость работы и пользовательский опыт, а потому в работе они не использовались.
В дизайне мы стремились создать не просто картинку, радующую глаз, а сделать его инструментом, который поможет пользователю быстро и легко оформить заказ.
Для повышения вовлеченности мы разработали микроанимации. При наведении на блюдо карточка будто высветляется — это делает взаимодействие более живым. То же самое мы проделали и с кнопкой добавления товара в корзину.
Особое внимание уделили типографике. Использовали фирменные шрифты и цвета, добавляя акцентные стили для важных элементов. Например, название и цену выделили жирным шрифтом, чтобы улучшить восприятие информации.
Не забыли и про милого маскота компании — зеленого дракончика. Персонаж уже вызвал устойчивую ассоциацию с ресторанами, потому задействовали его по максимуму, стараясь не переборщить.
Отрисовали персонажа в личном кабинете и страницах ошибок 404 и 500.
В карточках оставили самое необходимое — яркие фото, ингредиенты, стоимость и кнопку корзины. По клику открывается попап с возможностью добавлять и убирать компоненты заказа, изменять размер, смотреть калории.
Мы знали, что пользователи заходят на сайт с самых разных устройств — от смартфонов до планшетов. Поэтому сделали так, чтобы каждый элемент интерфейса подстраивался под размер и ориентацию экрана. Так пользователи получат одинаково качественный опыт, независимо от устройства.
Все дизайнерские решения направлены на то, чтобы пользователь чувствовал себя комфортно, получал эстетическое удовольствие и, самое главное, мог просто и быстро утолить голод.
Сеть из 57 ресторанов, где необходимо учитывать кассы, склады, персонал, мотивацию, кухню, финансы и отчетность, требовала системы, которая могла бы управлять всем этим объемом без сбоев.
Выбор пал на iiko — мощную платформу, которая оптимизирует каждый уголок ресторанного бизнеса.
Интеграция с liko
Программа обрабатывает заказы, ведет бухучет, подсчитывает зарплаты, генерирует скидки для гостей и составляет отчеты. Напоминания и подсказки в ней исключают человеческий фактор, а четкие и понятные инструкции упрощают работу ресторана.
iiko облегчает жизнь ресторанам, но за такой автоматизацией скрываются нюансы, с которыми мы столкнулись уже в процессе разработки.
Перед началом работы мы углубились в изучение актуальной версии API и документации системы. Это помогло оценить ресурсы и избежать множества неприятностей, которые часто поджидают разработчиков, когда те не уделяют подготовке должного внимания. Мы старались быть на шаг впереди.
Первым делом нужно было настроить номенклатуру и модификаторы. Если этого не сделать, система будет давать сбой. Столкнулись с тем, что модификаторы сайта не соответствовали тем, что были в iiko. Чтобы избежать ошибок при передаче заказа, мы настроили их так, чтобы каждый модификатор легко интегрировался в систему, минимизируя риски.
Другая важная деталь — изображения товаров. Поскольку iiko не хранит фото, мы реализовали их выгрузку через админ-панель, чтобы можно было быстро заменить изображения без обращения к сторонним системам. Админ-панель тоже разработана нами, но об этом позже.
Что делать, если у Гриль №1 несколько десятков ресторанов, а меню и акции должны синхронизироваться одновременно? Ручное управление таким объемом данных было бы неэффективным и трудоемким. Мы сделали так, что изменения в одном ресторане автоматически обновляются во всех точках. Система стала почти невидимой для персонала, но крайне мощной с точки зрения управления.
Разработали HR-страницу для тех, кто хочет работать в Гриль №1. На ней представлены открытые вакансии с подробным описанием, требованиями и условиями. Кандидаты могут просмотреть доступные позиции и отправить резюме. Мы уделили особое внимание тому, чтобы интерфейс создавал дружелюбную атмосферу и мотивировал работать в команде. Для улучшения взаимодействия с потенциальными кандидатами добавили кнопку обратной связи.
Бонусы и акции, казалось бы, должны быть стандартным функционалом, но не для iiko. Для автоматической работы с промокодами мы создали собственную функцию импорта акций через Excel-файлы. Теперь администратор может загружать коды в систему, не обращаясь за помощью к разработчикам — еще одно решение, которое сэкономило время и ресурсы.
Одной из ключевых задач при доставке еды стало корректное определение адреса пользователя. Чтобы избежать ошибок и ускорить процесс, мы реализовали интеграцию с сервисом DaData. Этот инструмент передает название адреса и уникальный ID улицы, который затем используется при оформлении заказа в iiko. Благодаря этому механизму система точно определяет местоположение, а курьеры уверены, что доставят заказ по адресу.
Но самая, пожалуй, важная задача — создать систему, устойчивую к сбоям. Риск, что технологии могут подвести, существует всегда, и порой по не зависящим от разработчиков причинам. Чтобы этого избежать, мы создали механизм, который позволит заказывать еду, даже если iiko выйдет из строя. В этом случае информация о заказах передается по электронной почте, а клиенты получают уведомления по СМС с рекомендацией обратиться в call-центр. Так мы защитили бизнес от непредвиденных ситуаций.
Клиент-серверная архитектура
Для увеличения скорости работы сайта мы разработали клиент-серверную архитектуру.
Продумали и описали все взаимосвязи внутри системы, чтобы ее было проще развивать и поддерживать в будущем. За счет нее сайт не превратится в массивный неподдерживаемый кусок кода.
Разработка личного кабинета
Личный кабинет — еще один важный шаг на пути к улучшению взаимодействия с сайтом. Здесь пользователь может просмотреть уведомления, историю заказов и настроить блюда под свои предпочтения.
С помощью продуманной системы фильтров пользователь легко надет нужное блюдо на обед или ужин. Фильтровать еду можно по типу (шаурма/пицца/суп) и по свойствам (острое/новинка/хит).
У каждого фильтра свой цвет и тематическое эмодзи: острые блюда помечены чили, вегетарианские — листочком. Это помогает лучше ориентироваться в меню.
Разработка административной панели
Создание админ-панели дало клиенту полный контроль над контентом сайта. Мы предусмотрели возможность редактирования меню, промокодов, акций и даже SEO-информации для разных городов.
Разработали систему управления товарами и заказами. Администратор может редактировать карточки товаров, настраивать видимость блюд в каждом ресторане или городе, менять их состав.
Есть функция поиска и отслеживания заказов, что помогает персоналу быстрее реагировать на запросы клиентов.
Гибкость админ-панели позволяет не только поддерживать сайт актуальным, но и запускать маркетинговые кампании с точным таргетингом.
У крупных бизнесменов при оцифровке бизнеса часто возникает желание не отдавать проекты в одни руки, чтобы в случае сбоя в одном, второй продолжал работать.
Так вышло и с нашим клиентом. Пока мы разрабатывали новый сайт, приложение создавалось силами других разработчиков. Но после успешного релиза сайта к нам перешло и мобильное приложение. А точнее встала задача разработать его с нуля, так как текущее уже не отвечало требованиям и от «коробки» пришлось отказаться.
Новое приложение должно полностью повторять функционал сайта. Поэтому, когда пришло время разработки, мы уже четко понимали потребности клиента и пользователей.
Мы адаптировали код сайта под приложение, добавив уникальные функции, такие как редактирование заказов прямо в корзине и возможность выбора адреса доставки на интерактивной карте.
Заранее изучили требования магазинов приложений (App Store и Google Play, HUAWEI AppGallery, Xiaomi Market, RuStore), чтобы убедиться, что наши планы соответствуют правилам площадок. Это важно, так как у каждого магазина свои условия для публикации разных типов приложений.
С учетом рисков отрисовали структуру будущего приложения, продумали функционал и логику взаимодействия пользователя с интерфейсом. Активно работали с бэклогом, чтобы не упустить детали. В процессе отрисовали много разных схем для наглядности и лучшего понимания логики.
Приложение также получило функции, которые пока не реализованы на сайте, например, автоматический выбор точки ресторана в зависимости от геолокации пользователя. Это решение не только облегчило процесс оформления заказа, но и повысило удобство использования.
Запуская Гриль №1 на смартфоне, пользователь с первых секунд должен считывать айдентику бренда. Мы добились этого эффекта за счет фирменных цветов и визуальных приемов, уже знакомых пользователям. Стилистику соблюдали строго, например, тот же дракончик должен всегда смотреть влево, его нельзя отзеркаливать. Чтобы сохранить легкость и позитив, отрисовали персонажа для нескольких ключевых экранов.
Персонаж встречается на экране загрузки, в пустой корзине и появляется даже тогда, когда пропадает интернет. Это делает приложение не только функциональным, но и добавляет дружелюбные, юмористические элементы, которые помогают сгладить негативные моменты при сбоях в соединении.
Также мы создали умилительная иконку для личного кабинета в виде дракончика, что усилило эмоциональную связь пользователя с приложением и брендом.
Чтобы дизайн выглядел свежо и актуально, мы использовали трендовые дизайнерские решения — бенто-сетки, параллакс, 3D-элементы и многослойность. Многослойность помогает пользователю лучше взаимодействовать с элементами интерфейса, разделяя их на интуитивно понятные уровни. Это не только улучшает юзабилити, но и визуально освежает приложение.
Мы разработали удобный, современный и стильный интерфейс, который полностью отражает требования клиента и гармонично встраивается в общую стилистику бренда.
Основная работа заключалась в адаптации уже разработанного движка сайта для мобильной версии. Это включало перенос логики и функционала, который мы создали ранее, но мобильное приложение принесло с собой новые вызовы.
Добавили возможность редактирования заказов прямо в корзине, теперь пользователи могут менять объем порций, заменять ингредиенты или менять блюда целиком перед окончательным оформлением. Это дает больше контроля над своими заказами.
Улучшили систему выбора адресов. Теперь пользователю не нужно вводить адрес вручную — достаточно перемещать карту, пока пин не окажется в нужном месте, а затем просто подтвердить выбор. Это ускоряет оформление заказа, делая его более интуитивным.
Реализовали функцию автоматического выбора точки, в которой будет готовиться заказ. Пользователь вводит адрес, а система определяет его геозону, заранее загруженную в админ-панель, и находит соответствующую точку.
На сайте это реализовано через API Яндекс Карт, но в приложении мы использовали метод трассировки лучей (определение принадлежности точки к конкретной зоне в системе координат) из-за трудностей интеграции с Яндекс Картами в React Native. Но это пошло на пользу, поскольку метод трассировки лучей работает слаженнее.
Реализовали возможность создания кастомных баннеров, которые отображаются на главной странице приложения. В админ-панели можно выбрать фон, загрузить изображение, добавить текст и нажать на кнопку публикации — баннер тут же отобразится на главной.
Разработали кастомные пуш-уведомления о статусе заказа (создан, готовится, в пути). Авторизованные пользователи смогут получить уведомления через СМС, push или email, а неавторизованные только через SMS и push.
Разработка мобильного приложения потребовала тщательного тестирования, так как при адаптации кода важно было не нарушить логику, работающую на сайте. Чтобы гарантировать стабильность и корректность работы, мы проверяли и сайт, и приложение.
Провели рефакторинг кода для упрощения будущей поддержки. Внедрили систему версионности, которая позволяет пользователям обновить приложение. Если у пользователя устаревшая версия, он получит уведомление о необходимости обновления, что предотвращает проблемы с доступом к функционалу.
Запуск нового сайта и мобильного приложения превзошли все ожидания. Совокупная выручка компании составила более 25 млн рублей. Новый сайт собирает около 126 тысяч уникальных посетителей в месяц и больше 32 тысяч заказов ежемесячно. Старый сайт не превышал отметки в 105 тысяч пользователей.
А современное и удобное приложение, которое мы запустили спустя 7 месяцев после начала разработки, расширило аудиторию и начало собирать дополнительный трафик.
Приложение не только усилило присутствие компании в цифровом пространстве, но и предоставило пользователям новые, удобные функции. Дружелюбный интерфейс, персонализированные уведомления и легкость использования повысили лояльность клиентов и улучшили опыт взаимодействия с брендом — положительные отзывы в сторах подтвердили успех.
А чтобы взаимодействие продолжало улучшаться, мы не прекращаем техническую поддержку обоих проектов и уже наметили планы на будущее.
Результат получился достойный. Очень понравилось работать с вашей командой. Все процессы налажены, всегда есть обратная связь и возможность узнать, что происходит с проектом. Подробно рассказывали о каждом своем шаге, что не может не радовать, ведь нам было очень важно проконтролировать, насколько хорошо разработчик выполняет свою работу.
Чувствовалось, что команда действительно прониклась идеей сделать хороший и удобный сайт для заказа продукции. Всегда предлагали, что можно улучшить или добавить новый функционал, который мы могли не предусмотреть.
Михаил Бобров
Гриль №1. Руководитель отдела IT и аналитики
Екатерина К — аналитик
Евгений А, Глеб Г — прототипирование, дизайн
Сергей Д, Мария С, Александр Ш, Антон С — frontend
Константин С, Даниил Ч — backend
Евгений Л — менеджер проекта
Сайт и мобильное приложение для доставки из сети ресторанов быстрого питания. Интеграция с iiko
Tagline Awards. Бронза
WDA. Золото
WDA. Серебро
Dropfile. Интерфейсы
Корпоративное приложение для планшетов крупной логистической компании Сервико. Документооборот, прием заявок, трекинг водителей, маршруты доставки.
WDA. Серебро
Tagline Awards. Серебро
Маркетплейс и аукцион для покупки автомобилей онлайн. Разработали веб-сервис и мобильное приложение.
Сервис аренды яхт в Сочи. Удобный кастомный календарь, функциональный каталог с онлайн бронированием, личный кабинет владельца яхты и арендатора.
Мобильное приложение интернет-магазина строительных материалов.
ERP система для мирового лидера напольных покрытий. Электронная подпись, групповая работа с документами, интеграции с Картами и внутренними виджетами.
Приложение-соцсеть для спортсменов и тренеров. Онлайн-тренировки, бронь занятий, блоги.
Автоматизированный сервис для медицинских консультаций онлайн
Сайт и приложение, с помощью которых пользователь может проверить и уплатить штрафы в ФССП и ГИБДД.
Мобильное приложение для управления сетью вендинговых автоматов.
Dropfile. Интерфейсы
Мобильное приложение для аренды мастерской для технического обслуживания авто.
Behance
Мобильное приложение для сети кинотеатров в Сибирском федеральном округе.
Соцсеть, собрала лучшие фичи конкурентов. Возможность публикации постов, сторис, общение в чатах, отметок событий на карте.
Сервис для крупной компании-поставщика автозапчастей для импортных грузовых и легковых автомобилей.
Корпоративный сайт для компании по производству телеканалов, трансляций видеоконференций под ключ.
Игровое мобильное приложение, призывающее соблюдать карантин во время пандемии COVID-19.
Мобильное приложение-социальная сеть для анонимной оценки человека.
Ведущий российский производитель хоккейной и футбольной спортивной формы, одежды и экипировки для разных видов спорта.
Открытая школа 2035 — образовательная онлайн-платформа для учителей и школьников 7-18 лет из России и Казахстана.
Mriya Resort & SPA — пятизвездочный отель на Южном берегу Крыма, на территории которого есть медицинский и SPA-центр, современный конгресс-центр, парк и собственный пляж.
caseGrill