Locanda Perinella

UX, Web Design

Client:

Locanda Perinella

Project Type:

UX, Web Design

Tools used:

Photoshop, Invision

Background

I was asked to redesign a local, family owned restaurant, Locanda Perinella. Established in 1992 in Brogliano, Italy. Locanda Perinella is a typical local hotel and restaurant located in the beautiful valleys of Northern Italy.

Role & Responsibilities

I was the only designer working on this project and I worked in collaboration with a developer to develop a custom WordPress theme in order to give the client as much flexibility as they needed. The process included: UX Research, Interaction Design and UI Design.

The Challenge

The client needed a complete overhaul of the design to attract more customers and keep up with the competition. The project also had a 8 weeks time deadline.

Phase 1

Discover

Competitive Analysis

After asking a few questions to understand what goals needed to be accomplished, I did a Competitive Analysis. Perinella has a typical rural and elegant feel, so the research was limited to similar restaurants in the area. The outstanding questions were the following:

  • Do our competitors have a website?
  • Do they have an online booking feature on their website?
  • Do they have a menu that could be seen online?

Research Findings

From the Competitive Analysis I could see that many of the competitors had outdated and difficult to use websites.

  • 50% of the competitors in the area didn’t have a website, none of the ones that had were easy to use or understand.
  • None of the competitors had an online booking system.
  • All of the competitors with a website had a menu.

For budget reasons we (the client and I) decided to leave the online booking feature for a later time. In the discovery process I found out that the Locanda has a variety of dishes that change daily so I implemented a function where the owners can change the menu in full autonomy.

Phase 2

Define

Site Architecture

Once I defined all the requirements for the redesign, I created a site map, which helped me focusing on the key design screens and overall architecture of the website.

sitemap

Wireframes

With the Sitemap at hand, I started doing some rough sketches of the main pages of the website and then proceeded in making a digital version in Photoshop.

Wireframes Wireframes Wireframes Wireframes Wireframes

Prototype

After completing the Wireframes I created a prototype and started the User Testing.
The testings were taken remotely via Skype and Invision.
After the testing I did the first cycle of iterations.

Phase 3

Design

Branding

One of the main goals of this project was for the brand message to be conveyed as more professional while remaining loyal to its honest and down to earth roots. I kept that in mind when I created the logo and style tile for the new King Kog website.

Branding Branding

Final Mockups

I created the final design mockups in Photoshop, before sending the annotated version for development. Here are some key screens:

Homepage

UI Design

Menu

UI Design

Events

UI Design

Hotel

UI Design

Staff

UI Design

Contact

UI Design

Conclusions

If I had more time and budget to work on this project I would’ve focused on adding an “online booking” feature so customers could book a table or a room on the website. I would’ve also dedicated a few more hours to usability testing to improve the overall user experience.

VISIT THE WEBSITE