Дизайн / АналитикаАЗС

КНП

Срок проекта

13.09.202209.12.2022

Дизайн мобильного приложения для клиентов сети АЗС «КНП»

Получить консультацию

Технологии

Design

Figma

Miro

220

часов разработки

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

В 2022 году мы выиграли тендер на разработку клиентского приложения для АО «Красноярскнефтепродукт». Для этого проекта мы сделали аналитику и UX/UI‑дизайн. Рассказываем, как строился процесс.

Проблема

Сеть «КНП» включает 174 автозаправки в Красноярском крае. Для реализации программы лояльности они долгое время использовали физические карты. Но такую карту легко забыть дома или потерять, а значит — потерять доступ к накопленным бонусам и скидкам. Поэтому руководство компании решило, создать мобильное приложение, которое:

  • станет удобным помощником для водителей;

  • закроет бизнес‑задачи: списание и начисление бонусов, информирование клиентов;

  • будет иметь стильный современный интерфейс.

Задача

От нас требовалось изучить бизнес‑логику АО «КНП», их программу лояльности, исследовать целевую аудиторию, а также — сделать анализ конкурентов. На основе этого мы должны были разработать UX/UI‑дизайн кроссплатформенного мобильного приложения, которое позволит перейти к виртуальным картам лояльности и улучшит качество клиентского сервиса.

Первичный анализ

Начали работу над проектом с изучения документации от заказчика. Программа лояльности действует в сети «КНП» уже не первый год. Владельцы сети накопили достаточно информации о составе и поведении целевой аудитории и передали эту информацию нам. Наш аналитик изучил, как происходит начисление и списание бонусов, какие особенности есть у программы лояльности. После этого на созвоне с заказчиком мы задали возникшие у нас вопросы и обсудили основные понятия. В процессе аналитик составлял первичную схему сервиса в Miro: она состояла из самых крупных, общих блоков — например, «пользователей» и «администраторов».

functions-for-users-and-admins.webp

Мы выяснили, как сама компания подразделяет целевую аудиторию сервиса:

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

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

  • потенциальные клиенты.

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

sites-and-external-services.webp
mp-structure-screen-connections.webp

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

Также мы выяснили, что для всех операций с бонусными баллами заказчик использует внешний региональный сервис «СНК», поэтому мобильное приложение необходимо интегрировать с ним. Это внесло дополнительные сложности в проект: нам пришлось настраивать обмен данными, сталкиваться с ошибками на стороне «СНК». На этапе аналитики мы изучили спецификацию API и разработали сложную и разветвленную, но рабочую схему авторизации в приложении через внешний сервис. Она включила в себя одновременную работу пластиковых и виртуальных карт.

Изучение ниши

Кроме бизнес‑логики заказчика в каждом своем проекте мы обязательно глубоко исследуем нишу. При работе над приложением «КНП» наш аналитик изучил продукты конкурентов — например, Яндекс.Заправки, Лукойл, Газпромнефть. Мы посмотрели, какие функции есть у клиентских приложений этих сетей, как реализованы виртуальные карты, выделили удачные решения.

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

При разработке UX приложения «КНП» мы учитывали эту информацию, по возможности — устраняли боли, отмеченные клиентами других АЗС.

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

Другая распространенная проблема — необходимость авторизации при каждом входе. Например, пользователь может забыть пароль и не суметь воспользоваться бонусной программой. Чтобы такого не происходило, мы использовали при разработке Access Token и Refresh Token. Поэтому покупателям сети КНП не нужно вводить логин и пароль часто.

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

wireframe-mockup.webp

Прототипирование и дизайн

После проработки пользовательских сценариев наш аналитик разработал прототипы страниц приложения и передал их дизайнеру. При разработке UX/UI дизайна мы делали упор на удобство пользователя и информативность.

initial-mp-wireframes.webp
ui-kit.webp

Кроссплатформенное приложение мы разрабатывали с помощью React Native, и при создании UX/UI‑дизайна создавали варианты для iOs и Android. Всего было проработано 12 блоков:

  • регистрация и авторизация;

  • стартовые экраны;

  • главная страница;

  • профиль пользователя;

  • о бонусной программе;

  • QR‑код внутренней карты;

  • обратная связь;

  • акции, правила, согласие;

  • новости;

  • о приложении, оценка приложения;

  • карты, поиск фильтры;

  • мои покупки и оценка АЗС.

По примерным прототипам страниц дизайнер подобрал стилистику сервиса, начиная с главной страницы. Мы использовали фирменные цвета «Красноярскнефтепродукт», основывались на результатах анализа рынка, разработали для проекта собственный UI‑кит.

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

При создании UI‑kit также предусмотрели все варианты иконок, стиль кнопок и карточек.

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

home-options.webp

Темная тема — необходимая опция для современного сервиса. Ее преимущества::

  • существенная экономия заряда при использовании смартфона с OLED‑экраном;

  • комфорт при использовании приложения при низком освещении.

dark-theme.webp
map.webp

При создании UX/UI‑дизайна мы анализировали не только продукты конкурентов, но и приложения из других сфер. Изучали их преимущества, решения, которые нравятся пользователям, и привносили их в сервис «КНП». Например, так появились удобная система фильтров и выбор навигатора для построения маршрута на карте.

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

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

loyalty.webp

Результат

Создали для покупателей сети АЗС «КНП» приложение с минималистичным и удобным дизайном. Благодаря внимательному изучению рынка, целевой аудитории и бизнес‑процессов заказчика мы смогли разработать продукт, который улучшил качество клиентского сервиса. Приложение с момента публикации в сторах установили более 21 000 раз. В день сервисом пользуется около 700–800 человек.

Закажите бесплатную консультацию

Свяжитесь с нами

СвязатьсяСвязаться