Добавили инструменты для онлайн-продаж и подчеркнули характер бренда «Самая Вкусная Шаурма»

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

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

Задача:

добавить возможность оформления и приема онлайн-заказов, обновить стиль на основном сайте и HR-лендинге

Результат:

быстрая обработка и отдача заказов покупателям; современный и узнаваемый образ бренда, выделяющий среди конкурентов

Клиент

«Самая Вкусная Шаурма» (СВШ) — федеральная сеть кафе быстрого питания, которая специализируется на продаже шаурмы, бургеров, хот-догов и аналогичных блюд.

Реализация продуктов осуществляется в торговых точках: покупатель делает заказ, повара готовят его прямо на месте и отдают покупателю.

Компания начала свой путь с одного небольшого кафе в Туле в 2015 г., и за 10 лет работы выросла до 235 успешных заведений быстрого питания в 121 городах и населенных пунктах ЦФО.

Ситуация до начала проекта

Представители компании обратились в «СофтЭксперт» с запросом на разработку приложений для оформления и обработки онлайн-заказов. Бизнес активно рос и развивался, в приоритете всегда оставалась скорость обработки заказов и их передача клиентам.

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

Но этот формат не всегда был удобен для повара, т.к. в торговой точке работает один сотрудник-универсал. Чтобы ответить на звонок, повару приходилось отвлекаться от приготовления заказа, снимать перчатки, вводить данные заказа, а потом снова возвращаться к работе.

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

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

Раздел «Работа» на основном сайте интегрировался с лендингом, где размещались вакансии и можно было отправить резюме, поэтому после обновления фирменного стиля на основном сайте руководство приняло решение улучшить и лендинг тоже.

Цель и задачи

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

Задачи:

Разработать клиентское кроссплатформенное мобильное приложение для оформления самовывоза и доставки.
Разработать веб-приложение для сотрудников торговых точек, позволяющее быстро принимать онлайн-заказы.
Доработать функционал основного сайта (онлайн-заказы, конструкторы) и обновить фирменный стиль компании.
Обновить фирменный стиль лендинга для HR-отдела, интегрированного с «Битрикс24» для получения откликов.

Реализация проекта

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

Татьяна Терёшкина, системный аналитик «СофтЭксперт»: У нас есть опыт разработки сайтов как по макетам заказчика, так и по подготовленным нами прототипам. Ускоряет ли подготовленный заказчиком макет работу? Зависит от его качества.

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

В нашей команде есть дизайнеры, разработчики, SEO-специалисты и копирайтеры, поэтому системный аналитик еще на этапе написания ТЗ или разработки прототипов учитывает особенности и детали, влияющие на функциональность и удобство сайта, чтобы сократить количество правок и доработок после сборки сайта разработчиком.

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

Клиентское приложение и приложение для поваров

Ключевая идея заказчика состояла в том, что клиенты могут зайти в приложение, выбрать способ получения заказа (самовывоз или доставка), в случае с самовывозом выбрать удобную точку, сделать заказ, а также указать время его получения, совершить оплату и по необходимости оставить комментарий к заказу.

При этом приложение для поваров должно быть максимально простым, сразу выводить на экран всю необходимую информацию и позволять буквально одной кнопкой брать заказ в работу. Такой подход позволил бы обеспечить высокую скорость работы на торговых точках, принимая заказы из мобильного приложения, с сайта и от партнеров (Яндекс Еда, Деливери и др.).

В процессе разработки пакета приложений мы взаимодействовали с другой командой, которая отвечала за доработку серверной части. В рамках реализации этого проекта за 10 месяцев мы:

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

Примерный вид экранов клиентского приложения и приложения для поваров. Источник: «СофтЭксперт»

Основной сайт с возможностью оформления заказов

Ранее сайт был выполнен на WordPress, мы перенесли его на другую платформу: бэкенд выполнен на Laravel, фронт — на Vue. Необходимость расширения и улучшения функционала сайта совпала с развитием фирменного стиля компании. Черно-красная цветовая гамма, которая отлично смотрится на торговых точках, в дизайне сайта выглядела очень контрастно и строго. Чтобы подчеркнуть энергичный характер бренда, мы предложили сделать акцентным цветом красный, добавить сочный малиновый градиент и изменить оформление тегов карточек товаров («собери сам», «хит продаж», «рекомендуем для вас» и прочие).

Примерный вид экранов клиентского приложения и приложения для поваров. Источник: «СофтЭксперт»

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

Светлана Братаева, дизайнер проекта: Дизайн конструктора на сайте всегда происходит в тесном взаимодействии с разработчиком и системным аналитиком. Мы учитываем возможные ограничения, определяем последовательность действий, а только после отрисовываем интерфейс.

В кейсе СВШ ограничения конструктора заложены самим продуктом — шаурмой. Здесь есть переключатель для выбора лаваша, радио-кнопки для соуса и изменения рецепта, а также блок выбора дополнительного ингредиента. В последнем блоке как раз действуют естественные ограничения: размер лаваша стандартный, поэтому тут разработчик ограничил количество добавок до пяти, чтобы шаурму можно было свернуть.

Примерный вид конструктора шаурмы на сайте. Источник: «СофтЭксперт»

Другой интересной задачей в рамках сайта стала отрисовка статичных страниц «О нас», «СВШ бонус», «Поставщикам». Здесь в макетах заказчика элементы визуального оформления либо отсутствовали, либо были использованы примеры изображений.

Что сделали:

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

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

Из трех предложенных вариантов дизайна страницы заказчик выбрал именно этот. Источник: «СофтЭксперт»

Интеграции для онлайн-заказа

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

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

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

Лендинг для HR-отдела

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

Кроме непосредственно верстки, для лендинга вакансий мы:

заново отрисовали некоторые визуальные элементы (волны, иконки, график, карта);
нарисовали недостающие экраны (формы для отклика на вакансию, окно с обратной связью после отправки резюме);
дополнили лендинг юридически-значимой информацией (пользовательское соглашение, куки, политика обработки персональных данных);
настроили синхронизацию с «Битрикс24» для сбора заявок HR-специалистами;
решили административно-серверные вопросы с размещением готового лендинга;
составили подробные инструкции для HR-отдела по размещению новых вакансий через админку сайта.

В адаптивной верстке много подводных камней, поэтому в макетах от заказчика часто приходится дорабатывать версии дизайна для разных устройств.

Результаты

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

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

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

На момент публикации кейса сотрудничество по приложениям и сайтам продолжается в формате техподдержки./p>

Понравился проект?

Звоните! Проконсультируем и рассчитаем стоимость проекта бесплатно!