Ищите крутые кейсы в digital? Посмотрите на победителей Workspace Digital Awards 2025!
«Кибер-невод»
Сайт и мобильное приложение для сети крафтовых бургерных
«Кибер-невод»
WDA
2025
#Сайт под ключ#Приложение под ключ #Фирменный стиль

Сайт и мобильное приложение для сети крафтовых бургерных

3083 
21 янв 2025 в 5:15
«Кибер-невод» Россия, Красноярск
Поделиться:
Сайт и мобильное приложение для сети крафтовых бургерных
Клиент

Сеть крафтовых бургерных «Краснодарский парень»

Сфера

Питание

Регион

Россия

Тип сайта

Интернет-магазин

Мобильная платформа

IOS, Android

Сдано

Июнь 2024

Задача

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

— Создать аккуратный дизайн, опираясь на фирменный стиль компании: сдержанные цвета, шрифты, красивые фото бургеров.

— Соединить с новой разработкой корпоративного героя и сохранить атмосферу современной бургерной.

— Интегрировать сайт и приложение с iiko, системой лояльности, агрегаторами доставки.

— Поработать над юзабилити: продумать функционал, простоту и удобство использования.

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

— Вывести сеть бургерных «Краснодарский парень» на новый уровень развития.

Решение

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

1Как это было

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

2Архитектура проекта

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

3Этапы разработки

Работу над проектом начали с аудита, куда входило:

— Составление план работы

— Прототипирование проекта сайта и приложения

— Дизайн сайта и приложения

Параллельно с аудитом взялись за разработку:

1. Создали панель управления и API системы

2. По завершению согласовали дизайн и отправили его на верстку

3. После верстки приступили к программной реализации сайта и приложения

4. Интегрировали сайт и приложение со сторонними системами: iiko, системой лояльности, агрегаторами доставки.

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

Сайт: VUE js бекенд symfony

Mobile APP: React Native, TypeScript, Redux Toolkit, React Navigation, react-native-yamap, @react-native-async-storage/async-storage, axios, react-native-gesture-handler, react-native-reanimated, Material Design (React Native components)

5Что интересного

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

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

— Чтобы сделать заказ можно было чуть быстрее, мы приняли решение совместить корзину и поля для оформления заказа на одном экране. Добавляя заказ в корзину, можно сразу увидеть содержимое и ниже заполнить поля с адресом, способом доставки и сразу перейти к оплате/подтверждению заказа.

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

6Интеграции

Сайт интегрирован с системой автоматизации iiko, которая отправляет заказы сразу в колл-центр и на кухню. По каждому городу в интернет-магазине регламентированы территория, время доставки и минимальная сумма заказа.

Например: если в одном городе у заказчика работают два или три кафе, то каждое кафе развозит еду на ограниченной территории. В зависимости от зоны доставки заказ поступает в ту или иную точку.

Помимо доставки пользователи могут выбрать самовывоз. В этом случае клиент сам решает, из какой точки будет забирать еду. Заведение можно выбрать при оформлении заказа. 

Результат

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

— Продумали и реализовали аккуратный сдержанный дизайн в светлых тонах с акцентом на еду

— Провели все необходимые интеграции: система автоматизации iiko, система лояльности, агрегаторы доставки

— Создали настраиваемые роли в панели управления: владелец франшизы может создавать пользователя, который вправе управлять отдельными филиалами. Например, для пользователя города N открыта возможность редактировать только данные города N — время работы филиала, скорость готовки, управление зонами, блокировка доставки/самовывоза, временное отключение приема заказов (например, в случае непредвиденной ситуации на кухне)

— В панель управления добавили поля по каждому городу, для настройки SEO

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

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

— Добавили статьи и новости

https://krasnodar.krd-paren.ru/

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


Выскажите мнение
Авторизуйтесь, чтобы добавить свой комментарий.
Катерина Логвинова
Катерина Логвинова
12 марта
Впечатляющий стек технологий сразу с 3 языками программирования...
оставить заявку

Хотите заказать похожий проект?

«Кибер-невод» с удовольствием обсудит вашу задачу

Оставить заявку