Yandex.Fuel, with more than 4.5 million MAU (Q2, 2023), is a largest service to pay for fuel without leaving your car for time-conscious urban drivers in Eastern Europe.

June–August 2023

Helping users complete payment in Yandex.Fuel

Case with Yandex.Fuel

June–August 2023

Helping users complete payment in Yandex.Fuel

Yandex.Fuel, with more than 4.5 million MAU (Q2, 2023), is a largest service to pay for fuel without leaving your car for time-conscious urban drivers in Eastern Europe.

Problem

Users didn’t pay for the fuel at post-paid gas stations and left.
The stations' workers filed police reports on them.

Problem signals

The problem began manifesting in April 2023. According to product analytics, there have been approximately 1,000 cases (less than 1% of the total) over the last 30 days (as of June 1st).

Negative outcomes

— Lost revenue
— Costs from refunding the stations
— Brand reputation damage
— Customer support overload
— Users have to deal with the police

The business goal

To reduce the rate of such no-pay cases to 0%.

My role ⌘ + ...

As a Product Designer at Yandex.Fuel, I took the lead in this project 💪, owning all design initiatives and working closely with the Yandex.Fuel Product Team 🏗, which consisted of a Product Manager, two Data Analysts, one QA Analysts, and a Tech Lead. Art director gave me feedback on my designs.

As a Product Designer at Yandex.Fuel, I took the lead in this project 💪, owning all design initiatives and working closely with the Yandex.Fuel Product 🏗 Team. Art director gave me feedback on my designs.

Context

Target audience

Urban drivers across a broad income range, 18–82 y.o., living in cities of Europe, Kazakhstan, Turkey, and Scandinavia; are often in a hurry and avoid too much effort.

Urban drivers across a broad income range, 18–82 y.o., living in cities of Europe, Kazakhstan, Turkey, and Scandinavia; are often in a hurry and avoid too much effort.

Key metrics

Retention, LTV, Costs.

Retention, LTV, Costs.

Monetization

Fixed commission for each refuel.

Fixed commission for each refuel.

Key partners

Gas station networks (7k stations in total).

Gas station networks (7k stations in total).

Main Use Case

People use the service to pay for fuel and skip checkout lines.

There are two types of refueling at European gas stations:

— pay-before-you-pump
— pay-after-you-pump

There are two types of refueling at European gas stations:
— pay-before-you-pump
— pay-after-you-pump

The post-paid scenario was added recently, in April 2023.

Post-paid scenario As-is

Research & investigation

To clarify the problem, I conducted research, involving other peers (Data Analyst & UX Researcher).

To clarify the problem, I conducted research, involving other peers (Data Analyst & UX Researcher).

H1 — the affected users form a segment based on criteria (e.g. city, time of the day, station worker presence).

H1 — the affected users form a segment based on criteria (e.g. city, time of the day, station worker presence).

H2 — payment transaction failed despite users attempting to pay.

H2 — payment transaction failed despite users attempting to pay.

H3 — customers are not aware of the post-paid stations' existence.

H3 — customers are not aware of the post-paid stations' existence.

Also, we aimed to understand to the reasoning of the affected users and how users behaved in the product.

Also, we aimed to understand to the reasoning of the affected users and how users behaved in the product.

The hypotheses & objectives

Methods of research

How I did it

H1 — the affected users form a segment based on criteria (e.g. city, time of the day, station worker presence)

User segmentation

Sample — all users who refueled starting from April 2023

H2 — payment transaction failed despite users attempting to pay

Event logs analysis

Sample — all users who did not pay for the fuel starting from April 2023

H3 — customers are not aware of the post-paid stations' existence

Survey

400+ customers took part

To understand to the reasoning of the affected users

Interviews with affected users

I reached out to 16 affected people, and 5 agreed to participate

To understand how users behaved in the product (we didn’t need to ruin their experience)

Field studies with Usability Testing

UX Researcher and I made 7 rides with experienced users and 5 with newbies

User Segmentation

The findings:

  1. The issue occurs at post-paid gas stations only.

  2. Experienced and new users face the problem with the same probability.

  3. The following factors do not allow differentiation between the affected users and others: city, time of day, and gas station chain.

Event Logs Analysis

The findings:

  1. The affected user did not attempt to confirm payment, they closed the app during or after the tank got filled.

  2. They did not pay at the cashier’s either (the evidence are reports from gas station).

Interviews with affected users

I reached out to 16 affected people (they did noy pay for the fuel), and 5 agreed to participate.

The findings:

  1. Experienced customers (3 out of 3) left the gas station out of habit, as they used to do at their regular pre-paid stations.

  2. The first-time users (2 out of 2) said that they did not understand how it worked.

Field studies with UX Testing

We found that the current solution didn’t meet these users' needs to:

— Distinguish gas stations
— Understand how refueling works
— Be reminded about the upcoming payment step
— Recognize the purpose of the payment screen
— Make sure that the total price is correct

We found that the current solution didn’t meet these users' needs to:

  1. Distinguish gas stations

  2. Understand how refueling works

  3. Be reminded about the upcoming payment step

  4. Recognize the purpose of the payment screen

  5. Make sure that the total price is correct

Summary of the findings

Problem framed

I defined the problem

We had to ensure that new and experienced users:

  1. Recognized and distinguished gas stations by payment type

  2. Proceeded to payment step after pumping

  3. Recognized the purpose of the payment screen

We had to ensure that new and experienced users:

  1. Recognized and distinguished gas stations by payment type

  2. Proceeded to payment step after pumping

  3. Recognized the purpose of the payment screen

Ideation & scoring

During brainstorming sessions, our team set on agreement about three fundamental ingredients of a good solution for this problem.

During brainstorming sessions, our team set on agreement about three fundamental ingredients of a good solution.

Little changes

Easy to deliver

Easy for user

Users needed to recognize post-paid stations.

How can we:

  1. help experienced and new users distinguish pre- and post-paid stations?

  2. help them notice that post-paid rules apply?

How can we:

  1. Help experienced and new users distinguish pre- and post-paid stations?

  2. Help them notice that post-paid rules apply?

Hypothesis I

We can display the gas station type on the “Direction info” screen and show post-paid rules upon request.

Why might this work?

Knowing the station type can help users make an informed choice at this step.

1

Placing the station type indicator in a visible location increases the likelihood that they will notice it.

2

Why might this work?

The solutions I left behind

1

Why not to display it on the map?

Firstly, it’s device memory-consuming.

Secondly, map may become a cluttered.

Lastly, gas station type is not the determining factor when choosing a gas station (according to User Research).

2

Why not to make gas station type more prominent?

During User Testing with prototype 5 out of 10 people tapped on “Post-paid rules” button by mistake, they explained that it looked like a CTA (but it is not).

3

Why not mark up gas station type
at the gas stations physically?

It would require a lot of effort to collaborate with stations network. Consistency of solution implementation and the feedback speed would be at risk.

The solutions I left behind

Hypothesis II

We can clarify that post-paid rules apply when the user is waiting for an attendant and about to place an order.

Why might this work?

When users are waiting for a station worker, they have time to read the instructions.

1

This solution is easy to implement applying existing “message” component.

2

Animated mascot messages may attract users' attention.

3

Why might this work?

The solutions I left behind

1

I discarded this solution after User Testing with 5 exprerienced and 5 new users. 6 out of 10 people did not recall what was on the blue badge; I concluded that they did not read it.

2

During User Testing with prototype only 2 people out of 10 tapped on the bottom sheet. At the next step only 3 people recalled what was written on the bottom.

The solutions I left behind

We had to ensure that users proceeded to payment after pumping.

How can we let users know that the next step after pumping will be the payment?

Hypothesis

We can hint users about the upcoming payment step at the start and during pumping.

Why might this work?

The solution provides feedback on completion (“wayfinding” and “feedback” UX heuristic and are the best practice).

1

Having the reminder placed in the focal point of the screen ensures that users will likely see it.

2

The solutions I left behind

1

I discarded this solution after UX testing. Although people noticed the button during User Testing, 3 people out of 10 tried to tap during refueling being in process. They told that it was frustrating that nothing happens.

2

I, along with my team, decided to discard the solution because there's neither CTA no feedback on refuel completion.

The solutions I left behind

Users needed to recognize the purpose of the payment screen.

How can we

  1. better communicate the Payment screen purpose?

  2. help users check the total price is correct and keep user stay on the payment screen?

How can we:

  1. Communicate the Payment screen purpose?

  2. Help users check the total price is correct and keep user stay on the payment screen?

Hypothesis

We can do as follows:
— add liters×price screen title
— move up the payment method section
— change CTA label to “Confirm and pay”

We can do as follows:
— add liters×price screen title
— move the payment method section higher up
— change the CTA label

Why will this work?

A screen title helps users understand their current location in the app.

1

Showing “L×price” may prevent users from trying go back to find the data.

2

Moving “Payment method” up will tone-down “Tips” section, and users won’t be confused about the purpose of the screen.

3

The CTA will clearly describe its action, helping users understand the screen's purpose.

4

Why will this work?

Prototyping and solution verification

After corridor testing I conducted UX tests with prototype:

— 3 people (out of 14 interviewees) closed the app during pumping, they opened it back though to complete payment
— 5 people read “post-paid” rules
— all users refueled and completed and payed

I also conducted unmoderated side-by-side test for Screen_05 (fuel is being pumped):

— 8 votes for “before”
— 48 votes for “after”

Final prototype

The final prototype

One last improvement

3 people (out of 14 interviewees) closed the app during pumping, they opened it back though.

To address users’ need to get drawn back to the process we decided to add a push notification with haptic vibration when the nozzle’s back if the app is on background.

Delivery

It took us around two weeks to a solid design proposal.

In our MVP we had to drop a few things, e.g. the scenario with the station workers not being present. It allowed us to cut the development time.

A gradual AB rollout (starting with 5% of the audience and then increasing) helped us verify and confirm that we reduced the rate of problem cases to 0.

Results and outcomes

The rate of cases where users left the stations without confirming payment dropped to 0 (Q3, 2023)! 🥳 — negative outcomes faced at the beginning of the project are no longer a risk.

Learnings

Despite the amazing result, there were some things I should’ve done better, which are:

  1. Involve your engineers as early as possible. Guys gave me some advice on what they can and can’t do saved a lot of design time.

  2. Don’t request data that won’t help to define the problem. For example, I asked analysts to segment data by users' age group.

  3. Prototype rapidly. It helped me understand the problem.

Despite the amazing result, there were some things I should’ve done better, which are:

  1. Involve your engineers as early as possible. Guys gave me some advice on what they can and can’t do.

  2. Don’t request data that won’t help to define the problem.

  3. Prototype rapidly. It helped me understand the problem.

My super team @Yandex.Fuel

Kirill Starosta

Product Manager

Eugenia Shar

System Analyst

Olga Manina

Data Scientist

Daria Levin

Engineering Lead

Staci Lebedeva

Product Designer

Thank you for visiting.
I wish you a fantastic day!

Thank you for visiting.
I wish you a fantastic day!