Workspace Digital Awards 2025 — успейте номинировать кейсы по льготной цене до 1 декабря. Принять участие!
Wemakefab
Редизайн мобильного приложения сети кофеен Cofix
Wemakefab
#Дизайн приложений#Фирменный стиль#Брендинг

Редизайн мобильного приложения сети кофеен Cofix

2470 
Wemakefab
Wemakefab Россия, Санкт-Петербург
Поделиться:
Редизайн мобильного приложения сети кофеен Cofix
Клиент

Urban Cofix

Бюджет

6 000 000

Сфера

Электронная коммерция

Регион

Россия, Москва

Сдано

Ноябрь 2022

Задача

Провести редизайн мобильного приложения для сети кофеен Cofix.

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

Цели проекта:

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

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

— Реализовали функции, мотивирующий пользователей на повторные посещения кофеен и использование приложения.

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

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

Решение

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

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

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

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

Реализовали систему начисления баллов за покупки, стимулирующую пользователей чаще посещать приложение и совершать покупки в кофейнях Cofix.

Над проектом работали совместно с компанией Evosoft.dev. Мы отвечали за дизайн, а коллеги из Evosoft.dev — за разработку.

1Разработка визуального стиля

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

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

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

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

2Разработка UX-дизайна

Разработали удобный и интуитивно понятный интерфейс приложения для сети кофеен Cofix. Мы тщательно проработали каждый пользовательский сценарий и сделали процесс взаимодействия с приложением максимально комфортным и удобным.

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

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

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

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

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

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

Реализовали раздел «Мне как обычно». В нём сохраняются любимые блюда и их настройки: например, «средний Карамеллате + ванильный сироп + взбитые сливки». Потом эти блюда можно заказывать в пару кликов. Это экономит время постоянных клиентов.

3Работа с анимацией

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

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

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

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

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

4Разработка приложения

За разработку приложения отвечали коллеги из Evosoft.dev. Они использовали специальный язык программирования Flutter. Он позволяет сделать приложение сразу и для IOS, и для Android.

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

Они настроили всё, чтобы приложение работало с картами, платёжками и службами доставки. Также они синхронизировали приложение с серверными сервисами для хранения и обновления всех необходимых данных: например, информации о пользователях, кофейнях, меню и ценах. Чтобы iOS и Android приложения получали актуальную информацию для работы.

После разработки приложение протестировали, чтобы оно стабильно работало на разных телефонах и планшетах, а также на разных версиях операционных систем.

Результат

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

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

Результаты в цифрах:

— По итогам первых трёх месяцев после редизайна приложения и запуска программы лояльности число активных пользователей в России выросло на 350 000 человек.

— Более 80% активных пользователей совершают покупки в кофейнях Cofix используя приложение.

— На 24,6% выросла средняя выручка в месяц с пользователя, использующего приложение.

— Мобильное приложение скачали более 100 000 раз на Google Play Store.

— Пользователи приложения оставили более 6 600 оценок на App Store, средняя оценка — 4,6 из 5.

Отзыв клиента

Алексей Клоц
Алексей Клоц

Head of Digital Product

Мы обратились к Wemakefab с задачей разработать дизайн-систему и
проработать дизайн экранов, необходимых для работы программы лояльности и
сервиса «Заказ с собой».

Это был достаточно сложный проект, но арт-директор Александр Лагута и
команда справились с этой сложной задачей.

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

Итогом нашей совместной четырёхмесячной работы стала дизайн-система и
десятки проработанных экранов и сценариев. Команда блестяще справилась с
задачей, была с нами на одной волне, чтобы найти лучшее решение по иi/uх!

Компания Cofix Global выражает благодарность команде Wemakefab за отлично проделанную работу.

скан отзыва

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

  • Figma Figma Графический редактор

Награды


Выскажите мнение
Авторизуйтесь, чтобы добавить свой комментарий.
оставить заявку

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

Wemakefab с удовольствием обсудит вашу задачу

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