ParkToAir is a brand acquired in 2021 by ParkinGO: it targets a user who is more price-sensitive but still looking for quality service.
This sub-brand, to date with locations in Bologna, Venice, Catania, and Rome Fiumicino, needed a complete revamp of its corporate site.

The starting scenario was, in fact, as follows:

• Outdated, old-fashioned template and not at all well designed
• Poor usability and lack of navigation logic (e.g., to access the navigation form the user necessarily had to scroll past the viewport)
• No coordinated image (lack of color uniformity and stylistically different components)

The extensive analysis activities carried out for parkingo.com and the expertise gained proved to be very useful in reducing the time and ensuring the effectiveness of the project.

Working in synergy with the marketing team and the IT department, I developed the user flow, which is based on the dynamics of parkingo.com.
I then defined the user's touch points, tracing the funnel from the homepage to the booking confirmation page.

At this point, still keeping the design of parkingo.com in mind, I came up with a wireframe, low-fidelity, for each individual step (from the homepage, to the booking confirmation).
The structure of the homepage can be seen in the figure.

Tracciando il flusso degli utenti, l'architettura di navigazione e la struttura delle pagine, ho progettato il sistema di design.
It was critical to have reusable components, because the entire site would be developed with a custom CMS-that way, all of the team's resources could easily contribute to updating the content.

I have, therefore, defined the main assets:

• Brand color for the site and semantic colours
• Template grid and breakpoints
• Typography
• Margins and spaces of recurring elements such as, for example, the forms

At this point I worked on the UI of the website, quickly getting from the first draft to the final version.

Again, the teamwork conducted with the marketing department was invaluable: together we performed a thorough data analysis and we defined the priority sections of the template.
One of these was the section containing direct links to individual location pages, that was placed immediately after the benefits proposition.
As you can see in the image above, I developed this section by creating dark blue horizontal cards, in which two elements clearly emerge: the name of the individual locations, reinforced by its icon, and the price, prominently displayed by the color choice of yellow.

This section has been made into a component so that it can be reused in other areas of the template (e.g., on the "About us" and "How it works" pages).

I then focused on the individual location pages, which are highly strategic for our business.
These are the web pages where users who search for a specific parking lot land (e.g., "cheap parking lot airport Bologna").
The layout is deliberately simple and intuitive: the form is prominently displayed, with the "where" field pre-filled, and is structured so that it can be easily indexed.

All content on the page is designed from an SEO friendly perspective: from the banner, which highlights our strengths, to the information sections below, which comprehensively answer the queries that people type in (where parking is located, prices, useful information, services included, how to book, etc.).

Even the choice to arrange some information within tables (e.g., "Useful information about ParkToAir Bologna parking") is not accidental: insights, in fact, show that the table has an SEO friendly semantic structure.

The "About us" and "How it works" pages are less visited than the others but are still of considerable importance.
The hero section has the same structure in both cases, and the rest of the page contemplates the following sections: informational content with text + image, icons + text, cards showing parking and, finally, a section before the footer that links to the contact form, located on a dedicated page.

Once the web application was put into production, we tested, through Google's "Lighthouse Scoring Calculator" tool, the parameters regarding:

• PERFORMANCE
• ACCESSIBILITY
• BEST PRACTICE
• SEO

The results performed very well from the very first moment as the decision to split the css by page was decisive.
This way each individual page loads only the resources it needs.
In addition to this other factors that affected the score were: SEO best practices, adding the ALT attribute on all images, setting width and height of each image, setting a fallback font throughout the document, and making sure that text color had good contrast to the background color.

Finally, for users surfing from mobile, I decided to include an app-style bottom bar in order to make it easier to view parking spaces.

BACK TO PORTFOLIO