Rebuilding the app’s purchase funnel

The PortAventura World app sells extras for your day in the park: Express passes to skip the queue, Prime Seat for the front rows at the shows, and a range of smaller in-park products. I led the redesign of that purchase funnel, from the first interviews to the final screens. I worked with another product designer and reported to the design lead of the digital team.

The problem

The old funnel was a generic form. Every product went through the same numbered steps (date, park, pass), and the product was put together from whatever you ticked. The screens didn’t explain what you were buying, and they had none of PortAventura’s look.

That form sold very different products: Express passes, Prime Seat, horror passages, food ordered ahead to skip the queue, restaurant orders, table bookings, virtual reality experiences, strollers and other rentals. Each has its own rules and needs its own explanation, and the form gave them none.

Two passes could differ by two words in a long label. The details sat behind an info icon and an asterisk, and to change the date, the park or the show you had to find a small text link.

The selection sheet at the bottom of the screen held the whole price breakdown. It grew to cover about a third of the screen, and people didn’t realise they could open and close it.

In the last months of the old funnel, fewer than half of the purchases people started reached confirmation.

How I got there

I ran the whole double diamond. Research took about a month: interviews with guests, market research, user journeys, affinity maps, and a benchmark of the apps people already use for quick purchases (Uber Eats, Just Eat, Airbnb) and of ticket sellers such as Atrápalo. Then came wireframes and the design in Figma.

The other designer reviewed each round of screens with me, and the design lead questioned the high-fidelity work and approved the flows.

The research gave us the brief. Products had to be explained properly, the purchase had to follow patterns people know from the apps they use every day, and it had to look and feel like PortAventura.

Before launch we tested the new flow with guests. In 45-minute guided remote interviews, three guests went through a full Express purchase and compared two versions of the shopping page. They also compared two ways of grouping food and drink: all the options on the first level, or a single Food & Beverage entry with a page for each type of product.

Guests found the purchase steps clear, and quick enough to use during a day at the park.

Food and drink was harder to follow. People understood the category better when it came first and the products after, and each type of product needed its own page. Before choosing a place to eat they wanted to know the park area, the type of food, whether there was somewhere to sit, and the price. Ordering ahead and picking up raised questions about how it worked.

A few guests didn’t notice the info icon on the products, and a few asked for Apple Pay or PayPal. We turned all of this into six recommendations for the next iteration, from a single Food & Beverage entry to a more visible info icon.

Constraints

The funnel had to fit many product types into one concept, each with its own rules: time slots, quantities, show times, rentals. We had one to two months to deliver it, and although there weren’t many screens, there were a lot of cases to cover.

The app works in four languages across three parks, and over a third of its sessions aren’t in Spanish. Each park also sells its own products.

The purchase also had to work outside the app, because guests would reach it from QR codes on the park’s signs and on the in-park screens.

Decisions

Build the flow for the web

Guests wouldn’t only buy from inside the app: they’d reach a purchase from QR codes on the park’s signs and screens. Everything we had was built in React Native, inside the app, so we looked at how far the flow would have to scale and decided to build it in React for the web.

None of the app’s components existed there, so we designed them from scratch. Those components were the start of the Skyloop Design System, which we now use for app and web.

Explain each product on the first screen people see

The research kept pointing at the same gap: people couldn’t tell what a product included or how it was different from the one next to it. The team wanted people to select products only from the detail page, where there was room to explain them. PortAventura wanted people to add them directly from the catalogue. I worried that a single line on a product card wasn’t enough for products with this many conditions.

We designed for both. The catalogue card had to be clear enough to buy from, and the detail page had to answer every question: what the product includes, the height requirements, whether there’s a photo ride, the conditions that matter, and selectors for quantity and time slot that show the price of each slot and warn you when it’s sold out or almost gone.

Multi-selection with time slots made the catalogue the hardest part of the MVP. When the data came in, selecting from the catalogue worked well for these products, and we changed our minds.

Give the summary and the confirmation real content

In the old flow the price breakdown lived in a sheet people didn’t know how to open, and the purchase ended with a total and a button. In the new one, the summary shows each product with its image, the price per person and day, and a quantity you can still change, plus a line about secure payment and where your tickets will be saved.

The confirmation page lists your next steps, gives instructions for each product you bought, and tells you where to find your tickets later.

Result

We shipped the new funnel in February 2025, after nine months of work, and it didn’t take long to see the difference. Before, 44 out of every 100 people who started a purchase made it to the end. In the months after launch, 62 did. For a team that had spent those months arguing about how to explain a stroller rental or a Prime Seat, that number meant a lot.

Since 2024 the app’s revenue has grown about 2.6 times, as we replaced the old purchase paths with this funnel and the ones that came after it.

What I’m proudest of is what the project left behind. The components we built in a hurry became the first pieces of the Skyloop Design System we use today, and the catalogue pattern later made its way into the ticket funnel.

What I’d do differently

I’d start the design system with its foundations. With one or two months to deliver, we built the complex components first, like the product card and the quantity selector, without defining the smaller pieces they’re made of. That created debt, and we laid the foundations later, under components that already existed. Next time I’d define the atoms first, even with that deadline.

I’d also test a pattern again before reusing it for a different product. Catalogue selection worked for extras, so the ticket funnel adopted it to stay consistent. Tickets have far more to explain: two-day tickets, two parks, which parks each ticket includes, whether you can bring food in, and how many consecutive days you have to use them. A single line on a card can’t hold all that, and the interviews we’re running with users now back this up.

• 44% → 62%started purchases that reached confirmation, before and after launch
• ~2.6×app revenue growth from 2024 to today
• 1 monthof research with guests before the first wireframe