B2B PWA продажи
в тоннах

B2B PWA продажи
в тоннах

B2B PWA
продажи в тоннах

Смотреть в Figma

PWA

ProductDesign

B2B

Fuel Sales

UX/UI Design

Mobile-first Design

Cross-platform

Responsive Design

Service Workers

Performance

3D graphics

DesignThinking

UserAnalytics

Timings

New Futures

UI-kit

User flows

Mentoring

Custom Web Solutions

Sales

Digital Transformation

Design review

Проект Progressive Web App

Проект Progressive Web App

Первое B2B PWA для продажи топлива

Первое B2B PWA для продажи топлива

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

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

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

Как мы упростили закупку и логистику оптовых продаж

Как мы упростили закупку и логистику оптовых продаж

Продукт, решающий ключевые задачи бизнеса

Продукт, решающий ключевые задачи бизнеса

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

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

Медленные и трудоёмкие заказы топлива

Медленные и трудоёмкие заказы топлива
Медленные и трудоёмкие заказы топлива

+65%

+65%

+65%

Задача: ускорить оформление заказов и снизить зависимость от ручных действий и звонков.

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

Результат: время оформления сократилось на 65%, а количество ошибок при вводе данных снизилось на 40%.

Непрозрачная логистика и сбои в планировании

Непрозрачная логистика и сбои в планировании
Непрозрачная логистика и сбои в планировании

+50%

+50%

+50%

Задача: повысить предсказуемость поставок и сократить потери времени при отгрузках.

Решение: внедрили визуальное расписание доступных слотов и остатки в реальном времени прямо в интерфейсе.

Результат: точность планирования выросла на 50%, а задержки при транспортировке сократились на 30%.

Задача: повысить предсказуемость поставок и сократить потери времени при отгрузках.

Решение: внедрили визуальное расписание доступных слотов и остатки в реальном времени прямо в интерфейсе.

Результат: точность планирования выросла на 50%, а задержки при транспортировке сократились на 30%.

Недоступность системы вне офиса

Недоступность системы вне офиса
Недоступность системы вне офиса

+80%

+80%

+80%

Задача: сделать работу возможной с любого устройства без установки и технических ограничений.

Решение: реализовали прогрессивное веб-приложение (PWA) с адаптивным интерфейсом и офлайн-доступом.

Результат: мобильная активность пользователей выросла на 80%, а среднее время отклика системы сократилось на 45%.

Задача: сделать работу возможной с любого устройства без установки и технических ограничений.

Решение: реализовали прогрессивное веб-приложение (PWA) с адаптивным интерфейсом и офлайн-доступом.

Результат: мобильная активность пользователей выросла на 80%, а среднее время отклика системы сократилось на 45%.

Задача: сделать работу возможной с любого устройства без установки и технических ограничений.

Решение: реализовали прогрессивное веб-приложение (PWA) с адаптивным интерфейсом и офлайн-доступом.

Результат: мобильная активность пользователей выросла на 80%, а среднее время отклика системы сократилось на 45%.

Ограниченный контроль финансовых операций

Ограниченный контроль финансовых операций
Слабый контроль финансовых операций

+70%

+70%

+70%

Задача: обеспечить прозрачность расчётов и повысить доверие между клиентами и нефтебазами.

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

Результат: прозрачность финансовых данных увеличилась на 70%, а просрочки платежей снизились на 35%.

Задача: обеспечить прозрачность расчётов и повысить доверие между клиентами и нефтебазами.

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

Результат: прозрачность финансовых данных увеличилась на 70%, а просрочки платежей снизились на 35%.

Задача: обеспечить прозрачность расчётов и повысить доверие между клиентами и нефтебазами.

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

Результат: прозрачность финансовых данных увеличилась на 70%, а просрочки платежей снизились на 35%.

Шесть ключевых задач пользователей, которые мы решили через продукт

Шесть ключевых задач пользователей, которые мы решили через продукт

Что клиенты хотят сделать на самом деле

Что клиенты хотят сделать на самом деле

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

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

6 JTBD для PWA-приложения отптовых продаж B2B:

6 JTBD для PWA-приложения отптовых продаж B2B:

  1. Быстро оформить заказ топлива нужного типа и объёма, чтобы не тратить время на звонки и бумажные согласования.

  2. Планировать отгрузки с учётом доступных слотов и остатков на нефтебазах, чтобы избежать простоев и задержек.

  3. Отслеживать движение средств и активность по счету, чтобы своевременно проводить платежи и контролировать расходы.

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

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

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

  1. Быстро оформить заказ топлива нужного типа и объёма, чтобы не тратить время на звонки и бумажные согласования.

  2. Планировать отгрузки с учётом доступных слотов и остатков на нефтебазах, чтобы избежать простоев и задержек.

  3. Отслеживать движение средств и активность по счету, чтобы своевременно проводить платежи и контролировать расходы.

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

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

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

Создание бесшовной PWA для всех экранов и сценариев

Создание бесшовной PWA для всех экранов и сценариев

Адаптивный дизайн по умолчанию

Адаптивный дизайн по умолчанию

Адаптивный дизайн по умолчанию

Нам было поручено разработать прогрессивное веб-приложение (PWA) для платформы распределения топлива, используемой как офисными сотрудниками, так и полевыми операторами. Основная задача заключалась в обеспечении стабильного и последовательного опыта работы на всех устройствах — от десктопов в офисе до смартфонов на нефтебазах.

Нам было поручено разработать прогрессивное веб-приложение (PWA) для платформы распределения топлива, используемой как офисными сотрудниками, так и полевыми операторами. Основная задача заключалась в обеспечении стабильного и последовательного опыта работы на всех устройствах — от десктопов в офисе до смартфонов на нефтебазах.

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

Масштабируемый дизайн

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

Плавные пользовательские сценарии

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

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

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

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

Создано для реальных условий

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

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

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

Результаты роста

После запуска мы зафиксировали рост конверсии мобильных заказов на 28% и снижение ошибок при оформлении на 41%. Платформа стала эталоном внутри ЛУКОЙЛ, доказав, что продуманный адаптивный дизайн даёт ощутимый бизнес-эффект.

После запуска мы зафиксировали рост конверсии мобильных заказов на 28% и снижение ошибок при оформлении на 41%. Платформа стала эталоном внутри ЛУКОЙЛ, доказав, что продуманный адаптивный дизайн даёт ощутимый бизнес-эффект.

Руководство через дизайн, работа с данными и внимание к каждой детали

Руководство через дизайн, работа с данными и внимание к каждой детали
Руководство через дизайн, работа с данными и внимание к каждой детали

Я в каждой роли

Я в каждой роли

В этом проекте я выступал не только как руководитель дизайна, но и как единственный продуктовый дизайнер. Обычно я веду команды, но здесь я занимался всем — от стратегии UX до реализации UI. Это была уникальная возможность быть вовлечённым в каждое решение и убедиться, что ни одна идея не теряется между концепцией, ограничениями и реализацией.

В этом проекте я выступал не только как руководитель дизайна, но и как единственный продуктовый дизайнер. Обычно я веду команды, но здесь я занимался всем — от стратегии UX до реализации UI. Это была уникальная возможность быть вовлечённым в каждое решение и убедиться, что ни одна идея не теряется между концепцией, ограничениями и реализацией.

В этом проекте я выступал не только как руководитель дизайна, но и как единственный продуктовый дизайнер. Обычно я веду команды, но здесь я занимался всем — от стратегии UX до реализации UI. Это была уникальная возможность быть вовлечённым в каждое решение и убедиться, что ни одна идея не теряется между концепцией, ограничениями и реализацией.

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

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

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

A

!

A

!

От чистого листа до рабочей версии продукта

Так как продукт создавался с нуля, у нас не было готового UI или пользовательских потоков. Я тесно сотрудничал с фронтенд- и бэкенд-разработчиками, чтобы согласовать реализацию, управлять поведением макетов и точно настроить пользовательский опыт на всех платформах. Эта кросс-функциональная работа была интенсивной, но крайне полезной.

Так как продукт создавался с нуля, у нас не было готового UI или пользовательских потоков. Я тесно сотрудничал с фронтенд- и бэкенд-разработчиками, чтобы согласовать реализацию, управлять поведением макетов и точно настроить пользовательский опыт на всех платформах. Эта кросс-функциональная работа была интенсивной, но крайне полезной.

Дизайн продукта, а не только интерфейса

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

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

Создание ясности, производительности и консистентности на каждом экране

Создание ясности, производительности и консистентности на каждом экране

Pixel Logic

Pixel Logic

Ясность, производительность и консистентность на каждом экране

Ясность, производительность и консистентность на каждом экране

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

Форма следует за фокусом

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

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

От Figma до фронтенда

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

Создавая ясность, производительность и консистентность на каждом экране

Создавая ясность, производительность и консистентность на каждом экране
Создавая ясность, производительность и консистентность на каждом экране

Дизайн, который меняет результаты

Дизайн, который меняет результаты

Руководство через дизайн

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

Достигнутые результаты

Финальный продукт улучшил процесс заказа топлива и принес ощутимые результаты: +28% конверсии мобильных заказов и –41% ошибок при заполнении форм. Платформа стала эталоном внутри ЛУКОЙЛ. Для меня это была практическая, стратегическая роль дизайнера, где я совмещал множество задач и способствовал реальному бизнес-эффекту.

Уроки универсальности

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

Буду рад сотрудничеству

Напишите мне сообщение

Telegram

Email

Headhunter

Граф дизайн

Behance

Буду рад сотрудничеству

Напишите мне сообщение

Telegram

Email

Headhunter

Граф дизайн

Behance

Буду рад сотрудничеству

Напишите мне сообщение

Telegram

Email

Headhunter

Граф дизайн

Behance

Буду рад сотрудничеству

Напишите мне сообщение

Telegram

Email

Headhunter

Граф дизайн

Behance

Inspire × Create × Improve