Flip · E-commerce · 2023

Fixing the last three steps before a sale

Flip sells refurbished phones and laptops in four European markets. I redesigned the cart, added an accessories upsell step and rebuilt checkout as one connected journey. Accessory attach rate went up 27% in ten days, and completed checkout sessions went up 23.4%.

Project facts

Role
Lead UX Designer, end to end: research, flows, UI, testing, handoff
Company
Flip, circular-tech e-commerce, 650K+ users
Markets
Romania, Bulgaria, Greece, Hungary
Team
Product, Growth and Engineering, plus the departments behind services and fulfilment
Platform
Mobile and desktop web
Timeline
2023

Results

  • +27%accessory attach rate in the first 10 days, across 3 countries
  • €43.6kadded revenue from the upsell step in those 10 days
  • +23.4%completed checkout sessions
Flow diagram of the full mobile journey: product page, cart with one product, warranty selection, accessories upsell, then the checkout steps for delivery method and address.
The end-to-end mobile flow I mapped first: product page, cart, upsell, checkout. Designing the three steps together kept each one from breaking the next. Open full-size image of the end-to-end flow

The problem

Flip was growing fast, but the path from "add to cart" to "order placed" had been built one piece at a time. Google Analytics showed long checkout sessions, frequent field errors and a low conversion rate. Accessories and extended warranties were rarely added to orders.

The brief had three goals that pulled against each other: sell more accessories and services, shorten checkout, and do both without hurting conversion.

Key insight

The data showed users going back to fields about 8 times per checkout session. Errors only appeared after tapping "Complete order", so people fixed one problem, submitted, and found the next one.

1. Cart: make the decision easy

The cart had to answer the questions people ask right before paying. I leaned on proven e-commerce patterns here rather than new research, and saved research time for the upsell and checkout.

  • Delivery date up front. Delivery time was one of the biggest factors in the purchase decision, so it moved to the top.
  • Clear product summary with an easy way to remove items.
  • Services as a simple toggle. Warranty and insurance could be added without leaving the cart.
  • Relevant accessories. Recommendations came from the backend based on the device in the cart.
Annotated mobile cart screens in several states: cart details, cart summary, two and three products, and an empty cart, with numbered notes explaining each element.
Updated mobile cart summary, annotated for engineering. Open full-size image of the annotated cart states

2. Upsell: a dedicated step, not a pop-up

Before designing, I ran research across departments to understand which accessories and services mattered most to customers and to the business. The result was a short, dedicated step between cart and checkout.

Decision: a full step instead of a modal

Why
A modal would block the path to checkout and train people to close it. A step with a clear "Continue to checkout" button made adding something optional and skipping it effortless.
Trade-off
One more screen in the funnel. The goal from the start was to raise attach rate without lowering conversion.

The page had four parts:

  1. One featured product or service that could be added with a single tap.
  2. Configurable services, such as 12 or 24 month warranty.
  3. Accessories with filters: cases, cables, batteries, screen protectors.
  4. A persistent continue to checkout button.

User interviews on the prototype led to a round of small adjustments before handoff to development.

Component sheet for the upsell page: product cards, warranty options, featured accessory banners in blue, filter chips and the checkout button, in mobile and desktop sizes.
Upsell page components: featured item, service options and accessory cards. Open full-size image of the upsell components

3. Checkout: one question at a time

I grouped everything checkout asked for into five topics: delivery method, delivery address, contact details, billing details and payment. Then I worked with the product team on a stepped checkout.

Decision: validate each step, and each field as you type

Why
Inline validation shows a problem while the person is still in the field, instead of after they submit. Each step is checked before moving on, so "Complete order" no longer surprises anyone.
Trade-off
More screens. Short steps, a visible step counter and a persistent order summary kept the checkout feeling short.

Decision: remove the exits people took by accident

Why
Removing products and navigating back from inside checkout caused sessions to end by mistake. Those actions stayed in the cart, one tap away through the order summary.
Trade-off
Slightly less flexibility inside checkout, in exchange for fewer abandoned sessions.

I designed three paths: signed in with saved details, signed in without saved details, and guest checkout. I tested the prototype with users before handoff.

Left: the final stepped checkout on mobile. Right: the three checkout paths. Open full-size image of the three checkout paths

Results

  • +27%accessory attach rate in the first 10 days, in 3 countries
  • €43.6krevenue from the upsell step in the same 10 days
  • +23.4%completed checkout sessions, with less time spent and fewer errors

Reflection

Designing the cart, upsell and checkout as one system mattered more than any single screen. If I did it again, I would run the cart changes as an A/B test too. We relied on best practice there to move fast, and a test would have shown how much the cart contributed to the checkout gains.

Contact

Hiring a Lead UX Designer? Let's talk.

I'm open to Lead and Principal UX roles, remote or based in Bucharest. The quickest way to reach me is email.