CASE STUDY

Authentic Amalfi Coast

UX/UI proposal for the destination portal of Rete Sviluppo Turistico Costa d'Amalfi.

outcomes

https://authenticamalficoast.it/

UI Design

Development

Testing & UX

Omnichannel Experience

User Research

Logo Design

Dec 2020 - Jan 2021

the challenge

The project

While absent-mindedly scrolling through my Facebook wall on a December evening (2020), I noticed an ad by Zooppa inviting UX Designers in Italy to participate in a contest for the Amalfi Coast.

Without thinking twice, I clicked on the post and read the project brief. I had more than a month to submit the proposal. I thought to myself "What are you waiting for? Open Figma and get busy!".

Brief

As I mentioned before, the contest required the design of a destination portal whose main objective was to bring together the whole offer of the Amalfi Coast, including the pages of a book not yet read, the places off the mental radar, the minor heritage. unread pages of a book, places off the mental radar, minor heritage.

Keywords
  • Off the mental radar
  • The unread pages of the book on the Amalfi Coast
  • Easy and smart Amalfi Coast
  • Get ready for a memorable experience
  • Responsible, accessible, sustainable

Read the full contest brief.

Benchmark

For the design of the portal, I took the following websites as reference:

Target

My proposal was designed to facilitate the navigation new users (of age and of different nationalities), who do not know the Amalfi Coast and who need to find advice and inspiration to plan their stay.

My proposal was also aimed at those who are familiar with the Amalfi Coast (over 18s and of different nationalities) and need to book a stay in a simple and secure way to try out new experiences.

My proposal

Read the full presentation of my proposal.

Progressive Web App (PWA)

My idea was to realize the Authentic Amalfi Coast Portal as a Progressive Web App, so that the best qualities of a website and those of the well-known native apps are combined in a single 'product'.

In particular, I wanted to exploit the app-like behaviour of PWAs:

  • for mobile navigation;
  • for the possibility of sending push notifications;
  • for the possibility of installing it on the home of one's own device without having to go through the store;
  • for the possibility of using it offline when users do not have an active internet connection.

Information architecture

Information Architecture
Information Architecture

Navigation menu

Navigation has two menus:

an exploratory (main) menu that allows you to find:

  • the possible destinations of the Coast;
  • the proposals for stays;
  • available accommodations;
  • a section dedicated to the valuable elements of the Coast;
  • the blog;
  • scheduled events.      

an operational (secondary) menu that allows to:

  • book an accommodation, an experience or an event;
  • look for information on means of transport;
  • search for accommodation, experiences and events on offer;
  • have useful information and contacts for your stay.
Mobile navigation example
Mobile navigation

Style

I chose two Google Fonts (a requirement of the brief):

  • DM Serif Display for headings, which gives personality to the design thanks to its light glyphs;
  • Raleway for paragraphs, labels and caption, for its readability and wide range of weights.

For the colours, I chose a palette ranging from blue to bright green, both to call to mind the seaside ambience of the Coast and to stay in line with the current authenticamalficoast.it website.

Style Guide
Fonts & Colours

Prototype

Home - not logged user
Home - not logged user
Home - logged user
Home - logged user
Ideas for your holiday
Ideas for your holiday
Accomodations
Accomodations
Accomodation detail
Accomodation detail
Accomodation detail - mobile
Accomodation detail - mobile
Quiz to choose the ideal type of holiday
Quiz to choose the ideal type of holiday
Booking
Booking
Sign in or Sign up
Sign in / Sign up

Nice to have

I proposed some further developments to be developed in a possible 'phase 2':

Explore through AR

From mobile, the Explore function could be enabled (e.g. in the secondary menu) which, with the help of Augmented Reality, allows points of interest close to the visitor to be highlighted using the smartphone camera.

Example of AR application
source: Pinterest

Virtual tour

A virtual tour of a facility or accommodation can be very useful for the visitor to make a more accurate decision. At the same time, this feature allows facility owners to showcase their strengths.

Example of virtual tour

Storytelling of local people

One of the objectives to be achieved is the creation of contents (to be inserted both in the section Scopri la Costiera and in the whole portal) that tell the stories and the people that animate the Coast.

For example, in the accommodations or restaurants we could insert a description made by the owners/managers, who introduce themselves and show themselves in first person to establish a first contact with the future visitors.

Loading Page

An emotional loading page could be designed for users to see when opening the portal while loading content in the background.

Example of loading page
source: Awwwards

What did I learn from this project?

Before this project, I had never participated in a UX/UI contest. Most importantly, it was the first time I managed a concept on my own, without someone's supervision.
There were so many aspects to take into account in this project, but surely the most difficult part was to reconcile the client's requests and at the same time find something innovative to propose.
Another very complex aspect was trying to 'read between the lines' of the project brief without being able to talk to the client.
Although my project was not selected, I think this was a really comprehensive design exercise that allowed me to detail all the principles behind my idea.

The good news is that my proposal was included in the shortlist of the 4 best projects among all those competing (about 100). Here is Zoppaa's article about the project and its winner.