PROJECT CONTEXT

A flow that was risky to touch

Dealers maintain their own offers on the platform. Prices, delivery windows and product details come from them, and the customer side renders what they enter.

PROJECT CONTEXT

A flow that was risky to touch

Dealers maintain their own offers on the platform. Prices, delivery windows and product details come from them, and the customer side renders what they enter.

Pille Text

01

Titel

copy

Pille Text

01

Titel

copy

Pille Text

01

Titel

copy

RESEARCH & FINDINGS

Understanding the Existing Experiencee

HeizOel24 had no dedicated research function or budget. I worked with four available sources and cross-checked findings before turning them into design decisions.

Behavioral data

Microsoft Clarity heatmaps & session recordings

Interface audit

A screen by screen review of the existing flow. Where terminology changed, where controls repeated, where steps contradicted each other.

Customer service feedback

· Forgotten passwords and login details
· Trouble reaching an account they already owned
· Duplicate accounts created under different email addresses

Competitor scan

How direct competitors and high-volume checkouts solve the same steps. Used to check which of our patterns were genuinely uncommon.

These sources pointed to four recurring issues

These sources pointed to four recurring issues

Pille Text

01

Titel

copy

Pille Text

01

Titel

copy

Pille Text

01

Titel

copy

Pille Text

01

Titel

copy

RESEARCH & FINDINGS

Understanding the Existing Experiencee

HeizOel24 had no dedicated research function or budget. I worked with four available sources and cross-checked findings before turning them into design decisions.

RESEARCH & FINDINGS

Understanding the Existing Experiencee

HeizOel24 had no dedicated research function or budget. I worked with four available sources and cross-checked findings before turning them into design decisions.

Landing Page

Hero section with embedded calculator

Deliberately left unchanged.

Offer List

Comparable offers ranked by relevance

Easier to scan at first glance

Offer Cards

Decision-relevant information bundled per card

Trade-offs visible without opening every offer

Offer Summary

Full overview of the selected offer


No surprises before the purchase.

Checkout & Login

Simplified, single-page entry

A login that no longer breaks the flow.

PROJECT CONTEXT

A flow that was risky to touch

Dealers maintain their own offers on the platform. Prices, delivery windows and product details come from them, and the customer side renders what they enter.

PROJECT CONTEXT

A flow that was risky to touch

Dealers maintain their own offers on the platform. Prices, delivery windows and product details come from them, and the customer side renders what they enter.

BEFORE

four accent colors, three competing green elements per card

AFTER

organized card template, price leading the card, and filters collapsed into a single control

The redesign shipped responsive. Comparisons are shown on desktop, because no screenshots of the old mobile views were kept.

The Calculator

The calculator had two competing actions even though results already updated automatically. I removed the redundant refresh button and kept one clear filter action. A live result count and timestamp make the system response visible.

BEFORE

AFTER

BEFORE

AFTER

The Offer Cards

The original cards had no hierarchy. Accent colors were overused, checkmarks carried little meaning, and recordings showed repeated clicks on the lowest price label, which was not interactive.

I gave the card a clear structure. --Status stopped looking like controls, and trade-offs became comparable at a glance.

New Feature: Preferred Delivery Date

Leadership had wanted delivery scheduling for a long time, and the redesign was the first flow open enough to add it. We built it last, right before launch.

Dealers had always entered date-dependent prices with their offers, but none of it reached the customer. The scheduling link opened a static dialog saying the dealer would get in touch. A calendar now shows those dates and their price differences inside the flow. Delivery became a decision customers make themselves.

Empty state

Date selected, price difference confirmed

BEFORE

AFTER

Offer Summary

The old summary listed everything at equal weight, so the price sat in the beginning. I grouped related information into sections and moved the total directly above the purchase button.

Considered and rejected: one-click purchasing. The product manager and I agreed that at four to five figures, customers need a last look.

REDESIGN

Checkout

Checkout was the last step before a four to five figure purchase. Sign-in interrupted it, the selected offer disappeared. The redesign kept customers inside the purchase instead of sending them elsewhere to authenticate.

REDESIGN

Checkout

Checkout was the last step before a four to five figure purchase. Sign-in interrupted it, the selected offer disappeared. The redesign kept customers inside the purchase instead of sending them elsewhere to authenticate.

New: Context-aware Login

In the old flow, the selected offer disappeared the moment users reached sign-in, with no confirmation they were still buying the same thing at the same price. The offer now stays visible throughout login, and guest checkout moved out of the small print into a visible option.

The competitor scan showed this pattern was common in high-volume checkouts, which made it easier to argue for changing a step existing customers already knew. No context loss, and one less reason to abandon at the last step.

BEFORE

AFTER: Context-Aware Checkout Login

Reduced friction & clearer orientation

Sign-in was a major source of support requests. Customers forgot passwords, created duplicate accounts, or gave up at a screen that asked them to choose between signing in and registering before it knew who they were. I rebuilt authentication around account status. Users start with a single email field, then see only the next relevant step: continue as a new customer, enter a known password, or receive a login link.

Failed passwords route straight to email access instead of a recovery loop.

enter email

email not found

existing account

create account?

optional

password available?

continue order

enter password

send login link

password incorrect?

continue order

send login link

gray: flow step · green: leads back to checkout

Four states, one entry point

Email-first Entry

Users begin with a single email field instead of choosing between sign in and registration.

Optional Password

New customers can continue their purchase immediately and decide later whether to create a password.

Passwordless Login

Returning customers without a password receive a secure login link via email.

Instant Recovery

Replaced password recovery with instant email access, helping customers complete their purchase instead of abandoning it.

RESULTS

Modernized, Not Reinvented

Post-launch analytics showed movement across four areas.

Pille Text

01

Titel

Measured after the selected offer stayed visible through sign-in.

Pille Text

01

Titel

copy

Pille Text

01

Titel

copy

Pille Text

01

Titel

copy

STEP OUTCOME

~13% → ~10%

Drop-off at the login step

Measured after the selected offer stayed visible through sign-in.

BUSINESS OUTCOME

~64% → ~67%

Checkout completion rate

Measured after the checkout was shortened and validation made explicit.

FUNNEL OUTCOME

~8%

Reduction in checkout abandonment

Measured after the redesigned flow replaced the previous one.

BEHAVIORAL OUTCOME

~10%

Increase in guest checkout usage

Measured after guest checkout moved out of the small print.

Measured over a 12-week post-launch window and provided by the marketing team. Percentages without a range are relative changes against the prior baseline, not percentage points. Heating oil demand is highly seasonal and the launch landed in December, past the peak of the buying season, which likely affects these numbers.

Live since December 2023, with every flow shown here shipped. Still the default ordering experience today, unchanged.

Create a free website with Framer, the website builder loved by startups, designers and agencies.