.svg)
Transforming a Desktop B2B Service Into a Convenient Mobile Tool
Transform a Complex Tool Into an Intuitive Service
OKKO is one of the largest fuel retailers in Ukraine, operating across B2B and B2C at national scale and covering 18–19% of the country's retail fuel market. Its Smart B2B platform is a fuel resource management ecosystem used by Ukrainian businesses to control expenses, manage fuel cards, and handle vouchers.The platform existed only on desktop, making it unusable in dynamic, on-the-go environments where managers and drivers actually operate.
This is why the Linkup ST team was tasked with more than just building a mobile app; they had to essentially reinvent the user experience while keeping the complex business logic under the hood. This case study explores how deep analysis and a focus on real user needs allowed a bulky system to be transformed into a convenient mobile tool.
The project demonstrated how deep UX research and a focus on user pain points can radically change a product, even one with a complex technical legacy.
The work began with a deep dive into the existing system. The client provided a detailed technical specification, the web version's architecture, and the results of their own research (CJM). The Linkup ST team took on the role of a product team, breaking the system down "into atoms" to understand the logic of every module.
The primary challenge was the immutable backend. This meant creating a modern, lightweight, and intuitive interface that had to run on an "old engine" with complex, rigid logic built up over years.
Analysis revealed several critical pain points" faced by clients:
- Limit Settings: The most problematic area. The functionality in the web version was so convoluted that users literally struggled to set the necessary restrictions for drivers.
- Financial Anxiety: Businesses were losing money due to expired fuel coupons because the system lacked any notification features.
- Cumbersome Payments: The process of invoicing and paying through third-party services was protracted and contained many unnecessary steps.
To find the right solutions, the team segmented users into three distinct groups, as their interaction scenarios differed cardinally:
- "Cards Only": Use the fuel card like a wallet.
- "Coupons Only": Work based on the logic of pre-purchasing specific volumes of fuel.
- "Mixed Type": The most complex group, needing to see the full picture simultaneously.
This approach allowed the raw technical specs to be converted into a viable app architecture.
The most difficult yet important part of the project was the redesign of the limit-setting functionality.
- Before: The user entered a literal labyrinth of hundreds of parameters. For example, to allow a driver to refuel only with diesel, one had to find gasoline and other fuel types in a list and manually set them to a zero limit. This was completely counter-intuitive.
- The Breakthrough: Inverted logic and presets. Data analysis showed that 90% of users perform the same standard operations. Why force them through a complex path every time?
- After: Instead of setting everything from scratch, users were offered ready-made templates:
- "Diesel Vehicle"
- "Gasoline Vehicle"
One click – and all necessary parameters are set automatically. For visual simplicity, a "lock" metaphor (locked/unlocked) was introduced, which is instantly recognizable and requires no explanation. Meanwhile, for the remaining 10% of complex cases, deep customization options were preserved but "hidden" so as not to interfere with the majority.
"We weren't just making a mirror of the website. We were creating a tool that had to work in the hands of a person at a gas station, in a car, on the go. The hardest part wasn't 'painting it pretty,' but taming the old backend so the user wouldn't even feel the complexity under the hood. When we reduced limit settings from ten minutes of contemplation to a single click – that was the moment we knew the product was a success." – UI/UX Designer and Project Team Lead at Linkup ST.
In addition to the revolutionary limits module, several other important innovations were implemented to address user pain points:
- Quick Payments: Integration of Apple Pay and other fast payment systems reduced the steps for topping up accounts to a minimum.
- Notification System: The app began notifying users in advance of expiring coupons, saving client funds.
- SSO and Multi-contract Management: For large companies with multiple legal entities, a convenient switch between contracts was developed using a simple swipe, without needing to re-login.
- Global Search: For the first time, users could instantly find any card, driver, or coupon.
- Analytical Reports: Instead of dry tables, visual graphs were introduced to allow for the visual assessment of spending dynamics.
After launch, the app quickly became an active business tool, reaching approximately 90,000 visits per day. The team also insisted on implementing analytics, which had not existed previously. Now, every click is tracked, allowing for continuous product optimization based on real data.
However, the ultimate measure of success was the client's trust. Following the successful mobile app release, OKKO entrusted the Linkup ST team with the complete redesign of their main web platform. The project received wide coverage in Ukrainian business media, confirming its significance for the market. This case proves that even the most complex B2B system can be made simple and convenient if the user and their real tasks are placed at the center of everything.
.webp)
..svg)