Case Study: Italian Restaurant Website
Background
I don’t know about you, but nothing beats a good meal for me. There are millions of food outlets worldwide with the daring mission of filling our bottomless pits. We live in the Internet Age, so naturally, everything (including food) is available online. For food services like restaurants, having an excellent website is essential for improving your customer experience and overall brand awareness.
Cucina Raffinata is a London-based restaurant that specialises in Italian dishes. One aim of this project was to create a web experience for users to order their meals ahead of arrival and make sitting reservations. This case study outlines the design process of creating a restaurant’s responsive website.
Goal: Design and prototype a website for users to make reservations in advance and learn more about the restaurant.
Roles: User Experience Design, Branding
Method(s): User Research, Competitive Audits, Information Architecture, Prototyping
Deliverables: Responsive Website High Fidelity Prototype
Duration: 2 weeks
Disclaimer: This is a personal project done to showcase my design process
Problem Statement
Time is a precious resource. The primary problem that the website addressed was the customer’s wait time between ordering a meal in a restaurant and waiting to be served, or waiting for a table to be free before sitting. Implementing a feature that allows users to reserve tables and order meals beforehand means eliminating wait time, improving customer satisfaction, and boosting revenue.
Target Demographic
The target demographic for the website are primarily millennials who lead busy lives and appreciate fine dining. This group fits into the restaurant’s pricing range, and is technology savvy enough to understand the deep mysteries behind making reservations online.
Understanding The User
In order to better empathize with users, I carried out questionnaire surveys that helped me to gather useful insights into user needs and opinions. Upon conclusion, I came up with a user persona that best describes our user.
User Persona
Name: Maria Romano
Age: 39
Occupation: Businesswoman
Goals: Eat meals that remind her of home, get food without having to wait forever
Frustrations: Late closing work time means she gets to her favourite restaurant late, waiting to be served wastes precious time
Maria is a 39-year-old Italian businesswoman who lives in London. After her busy day, Maria loves winding down with a good meal that reminds her of home. However, all her favourite restaurants are fully booked and busy by the time she gets off work. Having to wait for long periods to get served is very tiring and discouraging for her. Maria loves the idea of being able to book her meals before arriving at the restaurant so she can have the meals she wants on time.
“I love my native Italian dishes, but I do not have the time nor patience to keep waiting around.” — Maria Romano
Competitive Audit
I conducted a competitive audit by looking at websites of other food outlets, how they operate and what they offer to visitors. The following are key insights from the competitive audit were:
- Food is the primary commodity, so understandably, it is what the websites mostly showcase as a form of direct advertisement. It was not uncommon to find food menus heavily advertised on these platforms.
- The websites offer useful information on the organisation such as location, opening hours, and contact info.
Information Architecture & Sitemapping
I began planning the information architecture of the website. I opted for a simple hierarchical structure that showed distinct sections where specific information can be found on the website. The main webpages are:
- Home
- About
- Careers
- Contact
Having finalised my information architecture, I was able to develop a sitemap.
Sketching & Wireframing
I began drawing up my initial layouts on paper before moving them to the digital wireframes. I was able to outline the features of each web page and give a skeletal overview of the final outcome.
Visual Design
After I finished with the digital wireframes, I began developing visual styles for the restaurant. I chose “Journey to Thailand”, a typeface that served as the wordmark logo for the restaurant. I also developed a colour palette and text styles that were used throughout the website.
High Fidelity Mockups
The final step in the design process was applying the developed visual styles to my wireframes and coming up with the final look for the website. The home webpage in desktop view is shown below.
High Fidelity Prototype
The high fidelity prototypes of the website in both the desktop and mobile views are linked below if you want to get a better look at the design.
Final Note
Designing a website for a restaurant turned out to be more of a challenge than I initially thought. I learnt a lot during the course of this project, especially about conducting extensive competitive audits. I completely enjoyed the freedom that I had while designing the UI to experiment with shapes and shades.
Thank you for sticking around. If you want to contact me, you can do so through my mail: essienenkakedikan@gmail.com
You can also drop feedback in the comment section or leave a clap. For more design-related content, you can visit my Portfolio Website, or follow me on my Behance, Dribbble, or LinkedIn accounts.
