PARKINGO.COM - HOMEPAGE REVAMP
PROJECT DESCRIPTION

In March 2022, I was in charge of the revamp of the new parkingo.com homepage. The end result, the result of a long process of research and analysis, led to the complete redesign of 4 components:

  • Reservation form
  • Navigation menu
  • Hero image and tagline
  • Repositioning of additional services (drive-in swabs, salivary swabs, and RentSmart24 car rental)

I personally led the work at all stages, proactively collaborating with the Marketing and IT departments to ensure that all technical and SEO requirements were valued to the fullest.

MISSION

The mission was to offer customers a more immediate and intuitive digital experience through graphics that would give greater emphasis to parking activity, the company's core business.
Here are the main needs of the task:

  • Repositioning of the elements within the homepage. Communicating the ancillary services (buffers, testing, and car rental) by giving visual priority to the parking reservation form
  • Uniforming the color palette within the homepage
  • Redesigning the hero image and the tagline
  • Restructuring the main navigation of the website

PAIN POINT

The scenario presented numerous pain points, which I have exemplified in the image above.
These were compounded by the poor legibility of the menu items (white on a red background): I have personally detected this problem with a color contrast checker. I identified the optimal color scheme by picking up the colours used for the form: a choice that gave us a rating of 13.16 (vs. the previous 5.06) and good readability, both on large and small copy.

BROWSING

I chose to place an icon next to each menu item: this reduces the cognitive effort of the user, who can acknowledge the concept in a split second, without having to make the effort to read the copy.
It is no coincidence that this pattern is used by so many brands such as, for example, Apple, Disney+, Booking.com, Cortilia (see image above right).

Not only that. Underlying this solution there is an important fact: the pictures convert. This is demonstrated by the case history of Calzedonia, which, after removing images from the menu, suffered a drop in conversion rate equal to the 5,45%.
In contrast, a diametrically opposite example is provided by Tezenis, which has increased conversion rates and turnover simply by enriching, with small images, the names of the main categories.

OPPORTUNITIES

After identifying homepage pain points and room for improvement, I conducted a careful analysis of opportunities and initiated a painstaking benchmarking phase.

BENCHMARKING

I surveyed a sample of 50 websites, belonging to different sectors: travel, tech, fashion luxury, food, education, flight metasearch and e-commerce in general.
In all these sites, specifically, I examined:

  • Navigation icon + text
  • Navigation image/vector illustration + text
  • Mega menu dropdown
  • Banner location and format, for discounts or offers communication
  • Search form (where present)
  • The tagline position relative to the form
  • Hero image
  • Other details that struck me and I could find useful for my work

At the end of the research, I identified 4 examples from which to draw inspiration for the parkingo.com revamp.
As shown in the figure, I selected the following components:

  • The navbar icon + testo (ryanair.com)
  • The sliding promo bar, placed above the nav (xiaomi.com)
  • The horizontal form and tagline structure (qatarairways.com)
  • The dropdown menu (domestika.com)

DESIGN #1

I then made the first version of the new UI, with Adobe Xd.
In the mockup below, it is evident a more immediate and less disturbing approach to the services offered.
This is due to a more minimal and clean design, as well as color uniformity (the only color that stands out is the red of the CTA, within the booking form).

From this mock-up I developed a second version, in which I implemented a dynamic carousel with the following features:

  • The background is not white but proposes an airport image
  • The tagline is dynamic and no longer static; moreover, in addition to exhibiting a starting price, there is a CTA that directs the user to the page of a specific parking lot

Obviously the backgrounds and the tagline change in accordance with the users IP address. For example, a user from Rome will display Fiumicino and Ciampino, instead of Malpensa, Orio and Linate.

USABILITY TEST

I set up a usability test, which also included the source version, to see what the real critical issues and the improvements were in the two new mockups.
The test was conducted on a sample of 8 people, of various ages and with different levels of expertise. It was performed remotely, and the interviewer served, simultaneously, as facilitator, reporter and observer.
The users were reassured that their session would not be judged but, rather, it would help the creative team improve our product.
During the experiment, the user was free to "think aloud": he or she did not necessarily have to complete the flow of booking a parking space but only observe the homepage; while the interviewer filled out the prepared document, noting suggestions and feedback regarding the services offered on the homepage.

The choice to test only 8 users is not accidental: in fact between 5 and 12 testers it is possible to unearth at least 85% errors on the platform.

THE DESIGN THINKING PROCESS

After the tests were completed, I collected and filtered all the results into a new document, in which I highlighted 4 macro areas:

  • WHAT WAS GOOD - Positive feedback
  • WHAT WAS BAD - Negative feedback
  • IDEAS - Ideas and proposals
  • ACTIONS - Actions to be taken

This process helped me to redefine, recreate and re-prototype a better version (design thinking process).
In relation to the test results, business-related dynamics, and SEO considerations from the marketing department, I was able to come up with the final version.

Having approved the position of the banner above the form, I decided to reduce it further, leaving the user with the option of opening it (via a click on the "discover" button) and then reading the content in its entirety.

I then changed the form design, rounding off its corners and giving it a more user friendly look (in Airbnb style).

In collaboration with the marketing department, I reshaped the background, abandoning the idea of putting an image behind the form, to avoid making it too heavy.
Finally, we made the copy more concise and direct, by shortening it: since the user reaches the page directly from Google search, we did not think it appropriate to include a starting price already on the homepage. Hence the choice of a less specific tagline.

The result is a fresh, friendly and smart visual: the idea of travel is conveyed by the tagline and echoed by the image of a smiling girl, looking forward to her journey.
Finally, in the banner below the form, our three main strengths are highlighted, namely: price, free shuttle and parking open 24h/365.

FINAL RESULT
OLD VS NEW
MOBILE
en_GBEnglish