top of page

Portaventura World

MOBILE  |  TABLET  |  DESKTOP | UX/UI DESIGN

Designing the new amusement park's digital experience with a user centric and evidence-based approach. 

mateo-fernandez-4nKnpaPTZh4-unsplash.jpg

Overview

PortAventura World is an entertainment resort in Tarragona, Spain. It was built around the PortAventura Park theme park, which attract around 3.5 million visitors per year, making it the most visited theme park in Spain and the sixth most visited theme park in Europe. The resort includes two more theme parks, Ferrari Land and Caribe Aquatic Park, five hotels and a convention centre. It is the biggest resort in the south of Europe, which attracts around 5 million visitors per year.

Challenge

Improve the UX experience of their clients, understand the behaviour of their users with the current website and apply the necessary improvements to guarantee their users a good experience on their site.

My role

As a Senior Product Designer, I led the project, performed design tasks (UX/UI), planned and executed research actions to inform design decisions and gave support to the development team.

Activities

UX/UI design

Usability tests

Surveys

Tree test

Heatmaps

Prototyping

Wireframing

Development team support

Tools

Figma

Loop11

Useberry

SurveyMonkey

Hotjar

Notion

Miro

Slack

Process

Explore

Client workshop

Web audit

Tree test

Survey

Heatmaps

A/B test report

Usability test

Benchmark

Brand affinity

Analyse

Team workshop

Research outcomes (all the research actions of the "Explore" phase)

Build

Preliminary sketches

Wireframes

High-fidelity designs

Prototypes

Usability tests for each new section of the website

Design iterations

Outcomes

Handoff

Live website

Funnel improvements

The "Explore" and "Analyse" phases gave us key insights to understand user and business needs  and helped us to be able to inform the design decisions of the "Build" phase. In this phase, we continually validated with the client the new designed sections and we executed usability tests for each one of the sections. Moreover, we frequently had meetings with the development team to understand the technical limitations and with the SEO team to comprehend their needs as well. Finally, in the "Outcomes" phase we continued  helping the development team in case they had doubts about the implementation of the website.

The importance of users, business and development

Explore and analyse

Why?

Due to recurrent incidences, the new challenges that COVID-19 brought to the sector and the different initiatives that already existed to improve PAW's website, it was designed and executed a research scope to evaluate the experience of the website.

How?

Research actions mentioned above in the "Explore" phase. 

What?

As a result from the workshop with the client and the analysis made by our team we tried to find the answer to the following question of our investigation: "How might we improve information searchability, findability and legibility?"

This was the Miro board that we used in order to analyse each action and present  the insights and findings (I can't show any data here in terms of confidentiality).

Results overview

Searchability

Good

Findability

Good

Legibility

Poor

Improving these three aspects (especially the legibility) and creating a more intuitive, useful and attractive website for the user were our guide to start the "Build" phase.

Build

We started designing mobile first as the client requested. Moreover, this request is aligned with the best practice.

In the beginning, we designed the most relevant website areas for the company, like the tickets page. Our process in this phase was the following one:

  • As a design team, we worked on some proposals and we chose 3 or 4 proposals to present to the client.

  • We showed the proposals to the client and we removed some of them if they were not what they expected.

  • We executed usability tests of the wireframes in order to learn from the users and improve the design.

  • If the results from the usability tests did not conduct us to a specific proposal, we added to the design the feedback from the users and we executed a new usability tests with new users.

  • We had meetings with the SEO and the development team to validate the implementation of the designs.   

Group 8821.png

This was the board we used to collect the data of the usability tests (I can't show any data here in terms of confidentiality). In order to collect the answers of the users, we used the "traffic light" system, a simple and efficient method for ranking during the tests: Red = Bad / Yellow = Neutral / Green = Good. In addition, we let some empty fields so that we could write down while we were executing the usability tests.

Main improvements

1.  The use of cards to present the products (attractions, shops, hotels...) highlighting the most relevant information.

2. Overview above the fault of the main information  

 in the product pages.

3. Navigation: Header with the menu and tab bar/navigation bar

4. More audiovisual content 

Cards

With the legibility problem of the website and the best practices of the sector in mind, we decided to use cards in order to show the products. Each card adapts to the product and helps the users to understand it.

Group 33.png

Image

We want that the users can visualize the product and the experience they can live in the parks.

Title

Explanatory text

Relevant information

We use bullets and icons to help the users to understand the main information.

CTA

Call to action

Cards.png

Navigation

In order to improve searchability and findability on the website we decided to design a fixed header with a quick access to the menu and also a tab bar / navigation bar with quick access to four main sections. 

Header

It is an element that can be found in all the pages and it is compound of the logo and the menuThrough the logo the user can have access to the Home and through the menu the user can have access to all the other pages of the website.

Tab bar / Bottom navigation

It is an element that can be found in most of the pages and it is compound of Tickets, Hotel + Tickets, Promotions and Opening dates, some of the main sections of the website.

Product pages

There is an overview above the fault of the main information of the products in its pages. There it can be visualised the product, relevant information and a CTA in order to buy the product, if it is the case.

Furius baco desktop.png

Audiovisual content

We wanted to increase the audiovisual content on the website in order to give a more dynamic and entertaining experience. In this way, the user can have a better idea about his future experience in the park. That is why in many images and videos we sought for showing people having a great time in the park.

Credit

PortAventura World and Pixel Research Lab

bottom of page