Web Checkout Experience

Context

The Keats-Shelley House is a small museum at the foot of the Spanish Steps in Rome, in the rooms where John Keats died in 1821. It is cared for by a UK charity, and its website sells admission through the same online shop as its books and gifts. I designed this redesign as a self-initiated concept while preparing a marketing and communications strategy for the House.

Design Challenge

Buying a ticket meant choosing from ten products spread over two pages, eight of them group bookings. Full-price and reduced admission were separate products, and nothing explained who qualified for the reduced price. A couple with one student had to open two product pages and add each ticket separately. The challenge was to make the right ticket obvious for every visitor without adding steps.

Key Responsibilities

I audited the existing purchase flow, defined the ticket logic, designed the product page, basket and donation prompt as reusable components in Figma, and linked nine screens into a clickable prototype.

Research Process

I went through the live Book Tickets listing and the Ticket – Reduced product page step by step, as a visitor buying for a mixed group would. I captured both pages in full, then compared them with the House’s published visiting information: opening hours, prices, the groups that qualify for reduced entry and who gets in free.

Problem Details

The listing gives every product the same weight, so the single adult ticket most visitors need sits below eight group bookings. The reduced ticket page shows a price and an Add to cart button, but not who the ticket is for or what proof to bring. Free entry for children under 6, ICOM members and visitors with disabilities isn’t mentioned where people buy, and nothing invites visitors to support the charity or join the Friends.

Why It Mattered

For a small charity, every confused visitor is a lost sale or an awkward conversation at the desk. Unclear eligibility means people either overpay or buy the wrong ticket. Checkout is also the moment a visitor is already committed, which makes it the most natural place to ask for a little more support.

Strategy

Instead of asking visitors to find the right product, the redesign starts with one simple question: how many people are coming? A single Admission ticket holds both prices. Each visitor gets a menu listing every ticket type with its price and what to bring, grouped into full price and reduced. A note at the bottom names the free-entry cases, so nobody buys a ticket they don’t need.

Opportunity

Because the price follows the ticket type, discounts no longer need their own product. Choosing a reduced ticket updates the visitor’s price, the order summary and the button total at once, with the saving shown on its own line. Adding to the basket opens a drawer beside the page instead of a new page, so visitors keep their place.

Goals

✅ One product for every individual visitor, full price or reduced

✅ Show who qualifies and what proof to bring at the moment of choice

✅ Apply discounts automatically and show the saving clearly

✅ Let visitors change a ticket type without leaving the basket

✅ Support the charity at checkout without pressuring anyone

Solution

The finished flow runs across nine screens, from the product page to checkout. Before payment, a short and skippable prompt asks whether the visitor would like to add a donation. No amount is preselected, and “No thanks” is as visible as the donate button. A Friends card on the product page explains the €40 membership and its benefits where visitors are already reading about their visit. Every screen is built from reusable components in the House’s brand fonts and colours, and the flow is linked as a clickable prototype in Figma.