Portaventura World
MOBILE | TABLET | DESKTOP | UX/UI DESIGN
Designing the new amusement park's digital experience with a user centric and evidence-based approach.
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.
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.
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
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 menu. Through 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.
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