B2B PWA
B2B PWA
B2B PWA
Fuel sales in tons
Fuel sales in tons
Fuel sales in tons
PWA
Web Development
B2B
Fuel Sales
UX/UI Design
Mobile-first Design
Cross-platform
Cross-platform
Cross-platform
Responsive Design
Responsive Design
Responsive Design
Service Workers
Service Workers
Service Workers
Performance
Performance
Performance
3D graphics
3D graphics
3D graphics
React
CSS3
CSS3
CSS3
Timings
Timings
Timings
New Futures
New Futures
New Futures
UI-kit
UI-kit
UI-kit
User flows
User flows
User flows
Mentoring
Mentoring
Mentoring
Custom Web Solutions
Custom Web Solutions
Custom Web Solutions
Sales
Sales
Sales
Digital Transformation
Digital Transformation
Digital Transformation
Design review
Design review
Design review
Leading the Progressive Web App Project as a UX/UI Team Lead
Breaking New Ground: First B2B PWA for Fuel Sales
Our team launched the country’s first B2B PWA for managing fuel purchases and shipments from oil depots. The app enables users to plan deliveries, handle mobile sales, top up accounts, track financials, and stay updated with industry news — all within a fast, accessible interface.
Leading the Progressive Web App Project as a UX/UI Team Lead
Breaking New Ground: First B2B PWA for Fuel Sales
Our team launched the country’s first B2B PWA for managing fuel purchases and shipments from oil depots. The app enables users to plan deliveries, handle mobile sales, top up accounts, track financials, and stay updated with industry news — all within a fast, accessible interface.
Setting Bold Goals
Fueling Efficiency: Core Jobs We Solved
Clarity in Every Transaction
When tracking finances,
I want a clear view of account activity,
so I can easily verify balances and make timely payments.
Power in Your Pocket
When working on the go,
I want a fast, reliable app that works without installation,
so I can get things done directly from my phone.
To design a truly valuable product, we focused not just on features — but on real, everyday tasks our users needed to accomplish. By identifying their core jobs and pain points, we built a tool that fits seamlessly into their workflow and actually makes their work easier. Here’s what we set out to solve.
Smarter Shipments, Less Waiting
When planning shipments from the depot,
I want to see available time slots and stock levels,
so I can schedule transport efficiently and avoid delays.
Fuel Orders, Friction-Free
When managing fuel procurement,
I want to quickly place an order for the right type and volume,
so I don’t waste time on calls or paperwork.
To design a truly valuable product, we focused not just on features — but on real, everyday tasks our users needed to accomplish. By identifying their core jobs and pain points, we built a tool that fits seamlessly into their workflow and actually makes their work easier. Here’s what we set out to solve.
Fuel Orders, Friction-Free
Fuel Orders, Friction-Free
When managing fuel procurement,
I want to quickly place an order for the right type and volume,
so I don’t waste time on calls or paperwork.
Smarter Shipments, Less Waiting
Smarter Shipments, Less Waiting
When planning shipments from the depot,
I want to see available time slots and stock levels,
so I can schedule transport efficiently and avoid delays.
Clarity in Every Transaction
Clarity in Every Transaction
When tracking finances,
I want a clear view of account activity,
so I can easily verify balances and make timely payments.
Power in Your Pocket
Power in Your Pocket
When working on the go,
I want a fast, reliable app that works without installation,
so I can get things done directly from my phone.
Building a seamless PWA for every screen and scenario
Responsive by Design
Responsive by Design
Responsive by Design
We were tasked with creating a progressive web app (PWA) for a fuel distribution platform used by both office staff and field operators. The key challenge was to deliver a consistent and reliable user experience across devices and environments — from desktops in HQ to smartphones at fuel terminals.
We were tasked with creating a progressive web app (PWA) for a fuel distribution platform used by both office staff and field operators. The key challenge was to deliver a consistent and reliable user experience across devices and environments — from desktops in HQ to smartphones at fuel terminals.
We were tasked with creating a progressive web app (PWA) for a fuel distribution platform used by both office staff and field operators. The key challenge was to deliver a consistent and reliable user experience across devices and environments — from desktops in HQ to smartphones at fuel terminals.
Early in discovery, we realized that traditional responsive design wouldn’t be enough. We needed an adaptive system that adjusted not just to screen sizes, but also to context, user intent, and network conditions.
Early in discovery, we realized that traditional responsive design wouldn’t be enough. We needed an adaptive system that adjusted not just to screen sizes, but also to context, user intent, and network conditions.
Early in discovery, we realized that traditional responsive design wouldn’t be enough. We needed an adaptive system that adjusted not just to screen sizes, but also to context, user intent, and network conditions.
Design That Scales
Design That Scales
Design That Scales
I created a modular design system that adjusted seamlessly to various layouts, orientations, and breakpoints. This flexible foundation allowed us to reuse components without duplicating logic, delivering a native-like experience on any device, whether desktop or mobile.
I created a modular design system that adjusted seamlessly to various layouts, orientations, and breakpoints. This flexible foundation allowed us to reuse components without duplicating logic, delivering a native-like experience on any device, whether desktop or mobile.
I created a modular design system that adjusted seamlessly to various layouts, orientations, and breakpoints. This flexible foundation allowed us to reuse components without duplicating logic, delivering a native-like experience on any device, whether desktop or mobile.
Flow Without Friction
Flow Without Friction
Flow Without Friction
We redesigned user flows to match the context of use. On mobile, we minimized steps and focused on clarity; on desktop, we exposed more data and controls. This reduced user effort and sped up fuel ordering across all touchpoints.
We redesigned user flows to match the context of use. On mobile, we minimized steps and focused on clarity; on desktop, we exposed more data and controls. This reduced user effort and sped up fuel ordering across all touchpoints.
We redesigned user flows to match the context of use. On mobile, we minimized steps and focused on clarity; on desktop, we exposed more data and controls. This reduced user effort and sped up fuel ordering across all touchpoints.
Built for the Real World
Built for the Real World
Built for the Real World
We optimized for unstable networks and legacy hardware by implementing offline support, local caching, and performance safeguards. The app remained stable and functional even in field conditions, where connectivity was limited or inconsistent.
Results That Matter
Results That Matter
Results That Matter
After launch, we saw a 28% increase in mobile order conversions and a 41% drop in submission errors. The platform became a benchmark inside LUKOIL, proving that thoughtful, adaptive design has a measurable business impact.
After launch, we saw a 28% increase in mobile order conversions and a 41% drop in submission errors. The platform became a benchmark inside LUKOIL, proving that thoughtful, adaptive design has a measurable business impact.
After launch, we saw a 28% increase in mobile order conversions and a 41% drop in submission errors. The platform became a benchmark inside LUKOIL, proving that thoughtful, adaptive design has a measurable business impact.
Leading by design, building with data, and shaping every detail hands-on
Leading by design, building with data, and shaping every detail hands-on
Leading by design, building with data, and shaping every detail hands-on
Wearing All the Hats
Wearing All the Hats
Wearing All the Hats
In this project, I acted not only as a design lead but also as the sole product designer. While I usually lead teams, here I handled everything from UX strategy to UI execution. It was a unique opportunity to stay close to every decision and make sure nothing got lost in translation between ideas, constraints, and implementation.
Our client was the internal business unit, and I worked with them directly to define goals, expectations, and edge cases. I partnered with a technical analyst to unpack CRM logic and translate it into a user-centered interface. Together, we structured data flows, modeled usage scenarios, and adjusted designs as system rules evolved.
A
!
From Blank Canvas to Functional Reality
From Blank Canvas to Functional Reality
From Blank Canvas to Functional Reality
Since the product was built from scratch, we had no pre-existing UI or flows to rely on. I collaborated closely with frontend and backend engineers to align on feasibility, manage layout behavior, and fine-tune the user experience across platforms. This cross-functional work was fast-paced and deeply rewarding.
Since the product was built from scratch, we had no pre-existing UI or flows to rely on. I collaborated closely with frontend and backend engineers to align on feasibility, manage layout behavior, and fine-tune the user experience across platforms. This cross-functional work was fast-paced and deeply rewarding.
Since the product was built from scratch, we had no pre-existing UI or flows to rely on. I collaborated closely with frontend and backend engineers to align on feasibility, manage layout behavior, and fine-tune the user experience across platforms. This cross-functional work was fast-paced and deeply rewarding.
Designing the Product, Not Just the Interface
Designing the Product, Not Just the Interface
Designing the Product, Not Just the Interface
Without a dedicated product manager, I also helped prioritize features and mediate between tech and business needs. I shaped not only the interface but the product direction itself, connecting user behavior with internal processes. It was full-stack design leadership — hands-on, strategic, and deeply integrated.
Without a dedicated product manager, I also helped prioritize features and mediate between tech and business needs. I shaped not only the interface but the product direction itself, connecting user behavior with internal processes. It was full-stack design leadership — hands-on, strategic, and deeply integrated.
Without a dedicated product manager, I also helped prioritize features and mediate between tech and business needs. I shaped not only the interface but the product direction itself, connecting user behavior with internal processes. It was full-stack design leadership — hands-on, strategic, and deeply integrated.
Designing clarity, performance, and consistency into every screen
Designing clarity, performance, and consistency into every screen
Pixel Logic
Modular by Nature
Modular by Nature
Modular by Nature
We crafted a UI that felt lightweight, fast, and responsive — without sacrificing structure or brand consistency. Every element was built as part of a modular system, allowing us to scale layouts across devices while keeping the visual language intact. States, spacing, and behavior followed strict design logic.
We crafted a UI that felt lightweight, fast, and responsive — without sacrificing structure or brand consistency. Every element was built as part of a modular system, allowing us to scale layouts across devices while keeping the visual language intact. States, spacing, and behavior followed strict design logic.
We crafted a UI that felt lightweight, fast, and responsive — without sacrificing structure or brand consistency. Every element was built as part of a modular system, allowing us to scale layouts across devices while keeping the visual language intact. States, spacing, and behavior followed strict design logic.
Form Follows Focus
Form Follows Focus
Form Follows Focus
Special attention was given to input-heavy screens. We optimized controls for touch, minimized cognitive load, and introduced step-by-step flows. Field validation was made intuitive, and smart defaults helped speed up task completion, especially for frequent users placing repeat orders.
Special attention was given to input-heavy screens. We optimized controls for touch, minimized cognitive load, and introduced step-by-step flows. Field validation was made intuitive, and smart defaults helped speed up task completion, especially for frequent users placing repeat orders.
Special attention was given to input-heavy screens. We optimized controls for touch, minimized cognitive load, and introduced step-by-step flows. Field validation was made intuitive, and smart defaults helped speed up task completion, especially for frequent users placing repeat orders.
From Figma to Frontend
From Figma to Frontend
From Figma to Frontend
We worked closely with developers to maintain fidelity throughout implementation. All design tokens, variables, and behaviors were defined in a shared system to ensure alignment. Components were delivered with clear specs, usage guidelines, and edge-case handling. Thanks to this tight integration, we avoided misinterpretations, minimized rework, and preserved design consistency from Figma prototypes to live code — even as the system scaled.
We worked closely with developers to maintain fidelity throughout implementation. All design tokens, variables, and behaviors were defined in a shared system to ensure alignment. Components were delivered with clear specs, usage guidelines, and edge-case handling. Thanks to this tight integration, we avoided misinterpretations, minimized rework, and preserved design consistency from Figma prototypes to live code — even as the system scaled.
We worked closely with developers to maintain fidelity throughout implementation. All design tokens, variables, and behaviors were defined in a shared system to ensure alignment. Components were delivered with clear specs, usage guidelines, and edge-case handling. Thanks to this tight integration, we avoided misinterpretations, minimized rework, and preserved design consistency from Figma prototypes to live code — even as the system scaled.
We worked closely with developers to maintain fidelity throughout implementation. All design tokens, variables, and behaviors were defined in a shared system to ensure alignment. Components were delivered with clear specs, usage guidelines, and edge-case handling.
Thanks to this tight integration, we avoided misinterpretations, minimized rework, and preserved design consistency from Figma prototypes to live code — even as the system scaled.
Designing clarity, performance, and consistency into every screen
Designing clarity, performance, and consistency into<every screen
Design That Moves the Needle
Leading by Design
Leading by Design
Leading by Design
This PWA project gave me full ownership from concept to execution. Acting as both design lead and solo contributor, I translated business goals into clear, adaptive interfaces. Beyond layouts, I helped align design with backend logic, collaborated across teams, and ensured every feature delivered on real user needs.
This PWA project gave me full ownership from concept to execution. Acting as both design lead and solo contributor, I translated business goals into clear, adaptive interfaces. Beyond layouts, I helped align design with backend logic, collaborated across teams, and ensured every feature delivered on real user needs.
This PWA project gave me full ownership from concept to execution. Acting as both design lead and solo contributor, I translated business goals into clear, adaptive interfaces. Beyond layouts, I helped align design with backend logic, collaborated across teams, and ensured every feature delivered on real user needs.
Delivered
Delivered
Delivered
The final product improved the fuel ordering process and delivered tangible results: +28% mobile conversion and –41% form errors. It became a benchmark within LUKOIL. For me, it was a hands-on, strategic design role where I wore many hats and helped drive real business outcomes.
Lessons in Versatility
Lessons in Versatility
Lessons in Versatility
This project reinforced how deeply design can influence product outcomes when it's embedded early and across disciplines. Acting as the connective tissue between business, tech, and users, I learned to navigate priorities, trade-offs, and constraints — without losing sight of quality. It was a hands-on lesson in versatility, where strategic thinking and craft went hand in hand.
This project reinforced how deeply design can influence product outcomes when it's embedded early and across disciplines. Acting as the connective tissue between business, tech, and users, I learned to navigate priorities, trade-offs, and constraints — without losing sight of quality. It was a hands-on lesson in versatility, where strategic thinking and craft went hand in hand.
This project reinforced how deeply design can influence product outcomes when it's embedded early and across disciplines. Acting as the connective tissue between business, tech, and users, I learned to navigate priorities, trade-offs, and constraints — without losing sight of quality. It was a hands-on lesson in versatility, where strategic thinking and craft went hand in hand.
Let’s Shape the Future of Design Together
Let’s Shape the Future of Design Together
Drop me a message
Drop me a message
Inspire × Create × Improve