Case study: Restaurant Kornat

The restaurant industry is a competitive one. Especially in the city like Vienna, where staying “top of mind” with existing customers and new prospects is essential for growth. This is the story how I built new multilingual website for the Restaurant in Vienna.

Intro

The restaurant industry is a competitive one. Especially in the city like Vienna, where staying “top of mind” with existing customers and new prospects is essential for growth.

Vienna is one of the most liveable city in the world. In 2015, same as in the past years, it ranks at the top of a leading international comparative study on the quality of living in different cities, and scores highly in many other rankings. In 2014 the number of overnight stays hit a new record high of 13.5 million.

The restaurant “Kornat” has, for almost three decades, been a place of enjoyment of fish specialties cuisine. The restaurant treats its guests to fish in all its variations and is also a popular place for family celebrations and business dinners.

Apart from the excellent quality of fresh fish specialties, the restaurant is well regarded for its excellent wine list.

Goals and Objectives

The main goal was to create multilingual website which clearly communicates to the audiences why they should visit this particular restaurant. The website design needs to reach and attract its target market using niche marketing strategy, and be easy to navigate, with a desktop and mobile version as well.

The main client objectives were to make sure the website is visually communicating its story, that is not only based on the tradition, quality and fresh ingredients, but to also make sure the website shows its continual ability to offer the latest culinary trends to its customers.

My role

  • Gathering and analyzing data / Competitive research
  • Setting goals
  • Interviews
  • Key audiences
  • Building personas
  • Creating scenarios
  • User journey
  • Site map
  • Ideation
  • High-fidelity design
  • HTML / CSS
  • Usability testing

Gathering and analyzing data / Competitive research

The basis of my approach to all projects is firstly collecting information and research. Once I gather quality product/service understanding as well as the target audience/s, I move onto the next stage of identifying design objectives and overall strategy.

Next, I execute all stages (researching, analyzing, designing, production, testing, launching...) and conceptualise ideas that bring simplicity and user friendliness to complex design process.

This approach to projects allows me to understand the market segments better, to be aware of its pluses and minuses, and to come up with the creative, competitive solution to reach the right audiences and keep the existing customers walking through the doors. It is very important to recognize specific differences within market niches and turn it to our competitive advantage.

Interviews

For the initial meeting with the client (restaurant manager and owner), I prepared series of questions, from general to specific ones and always make sure I get the information I need to proceed with the design process with a clear understanding of the main objectives.

In this particular case, first step of researching consisted of analyzing the current restaurant market in Vienna, making sure I understand its competition. Considering project specifics, special attention was paid to analyzing TripAdvisor, Yelp, Google My Business and other relevant websites that offer emphasizing user reviews.

As known, TripAdvisor and alike social networks, provide quality picture of restaurants business market pointing out multiple pain points on the one hand and potential opportunities on the other.

It's also give us information about users types, their activity, what are they concerns, users quotes which later can be used in making expierence map and personas.

I have gathered key information that offered me deep and clear understanding of the business, type of services they offer, key target markets, its competitors and the marketplace in general.

I have gathered key information that offered me deep and clear understanding of the business, type of services they offer, key target markets, its competitors and the marketplace in general. I also, by this stage, understood the way business operates and what needs to be done in order to attract more users.

Finally, I defined specific areas of interest of the target market:

  • What it is that attracts customers to this type of restaurant?
  • What drives their needs and desires when deciding where to eat?
  • How often they eat out?
  • Do they follow trends or more traditional?
  • Why they choose different restaurants?
  • What are their spending habits?
  •  Etc.
Photo of preparation questions

Who are key audiences?

 

Through described process (interviews, questionnaires, analysis, researches and restaurant's clients database) I identified target groups wherein this web page intended. After that I created personas with needs, desires, and motives, social and demographic characteristics.

In this specific project I determinated three main target groups to which is web page referring to and some common characteristics they share:

  1. Domestic customers (Vienna and surroundings)
  2. Exceptionally large target group of tourists
  3. Immediate target group for seafood lovers

Ideation

Once i have understanding who is user and what is pain points, ideation process begins. Using sketches or wireframes, I decide which elements need to be used on the page, giving main attention to their positioning. Ideation process helps discover better design solutions by considering many direction.

In this case, one of the main element is the user friendly, highly visible and marked "Menu" and "Booking" (telephone, email, and web). I also had to pay special attention to a large and the key target group being Tourists, using specific words to attract them to the restaurant irrelevant of their culture and the language they speak.

Quality images of the food on offer are extremely important as they communicate the type of the restaurant to the potential audiences as well as its atmosphere.

In many business but especially in the restaurants business, the product images sell the item. As the saying goes, a picture is worth a thousand words. Quality images of the food on offer are extremely important as they communicate the type of the restaurant to the potential audiences as well as its atmosphere. That is why using the quality images later in the design process was the main starting point.

Making sure location of restaurant is visible on front page and Google maps supports the design in order to navigate the customers to its location (public transport, nearest garage etc.) were another important step to consider.

Finding parking in the center of Vienna is very hard, so also I made sure I included directions to the restaurant and the closest parking/garage available and if public transport is available.

 


Scenarios

The best way to understand user needs is to develop a scenario. Before diving into scenario we need to have all information about who is our user, what it is his goals and how we can help him to achive them.

Scenario gives us a clear view of how interaction, in this case, restaurants customers behave and the steps they take before they reach the website.

This process also helps in determining weak points and to establish and develop quality solutions.

User journeys

Using scenarios and collaborative sketches, with and without the client, I design user journey.

This process represents the steps users make before they reach their main destination (booking). It also allows me to develop creative and unique communication solutions in order to reach the specific audience.

This process represents the steps users make before they reach their main destination (booking). It also allows me to develop creative and unique communication solutions in order to reach the specific audience.

 

Site map

Creating a sitemap is an important step of the user centered process because it enables us to place the content in the exact position in order to reach the right users. If everything is in the right place users will find site or product more usable and more likely to use.

In this case the site map doesn’t have more than 7 categories so there is no need to group any together.

 

Hi-Fidelity design

 

As UI and visual designer I’m responsible for creating style guide and consistency for a particular web service.

In this case, I served as a ‘one man band’ as I have completed all stages on my own, including the concept, creative idea and design of the website. I have used Wordpress CMS which has been completely designed according to the client’s needs.

Usability testing

User-centered design is an interactive way to find the best solutions. For this project I have used four users with different professional background.

In this phase i used high-detailed prototype which provided me detailed feedback on design and usability. You can see it live on space.proto.io.

I conducted of ten-minute usability tests on my laptop and smartphone using a site prototype in Proto.io and capturing the user expierence with handwritten notes and Lookback.io.

I conducted a series of ten-minute usability tests on my laptop and smartphone using a site prototype in Proto.io and capturing the user expierence with handwritten notes and Lookback.io

First I asked them to just try to achive a set of goals like:

  • How would they make reservations online?
  • Where would they click first when they land on homepage?
  • Can they easily navigate through the site?
  • How long does it take?
  • Can they find everything they need?
  • What are they first impressionss/halo effect?
  • Etc.

This stage showed me there were no navigation problems or issues to deal with and that the website was visually communicating desired performances.

Conclusion

I have thoroughly enjoyed working on this project. It was challenging due to the variety of target market as well as the individuals I have communicated with in order to collect all the necessary information.

The research confirmed well known saying: „Mobile phone is magnifying glass for user experience“, showing the fact that large numbers of potential users use their mobile phones to access information on restaurants (mainly tourists).

The research confirmed well known saying: „Mobile phone is magnifying glass for user experience“

Therefore, one of the challenges I faced was to design a header that includes all key elements such as reservations, languages and social links, yet is easy to use.

Taking into account the fact that autoredirect on Google search engine sometimes doesn’t work well (there are detected problems with Google indexing if I use Automatic redirect Based on Browser Language), I had to make sure potential users could see the option to switch to their native language version on first sight.

Most websites in responsive versions offer the language switcher only when the Menu tab is opened, which is in my opinion, a bad solution as many users don’t realize this option is available unless they see it straight away.

The client has also accepted my suggestion to use real Testimonials rather than generic PR comments on their page, as testimonials offer true, honest and relevant experiences of existing customers.

The best outcome for me was a very satisfied client who got a website completed just before the peak of the tourist season in Vienna. As a result, we have continued successful relationship and I have since completed the Menu for the restaurant, business cards, Wine Cards and coupons.

The final result was user friendly website delivering positive emotional engagement. As their old website didn’t have Google statistics it was not able to carry out such an analysis.

However the client has expressed extreme satisfaction with the increase of online orders and a number of new customers in the restaurant since implementing new website.