User Interface

Concept creation for website GrupoTragaluz

What is the goal of the user journey?
Who are the clients and what are their expectations?
How will the user navigate on desktop and mobile?

first step: mood board

A collection of images to represent the style of the brand Grupo Tragaluz. The company runs 18 restaurants in Spain. It is not a franchise; each restaurant has its own name, brand and food selection. But there's a strong connection between them all and that's the style: modern, mediterranean, sophisticated and vibrant. The style sets the foundation for every experience, starting with the website: powerful and elegant photography in bursting colours. Yet the website itself in contrast is neutral. Simple and sleek design to contrast all vivid images.

design concept 1:

Making the most of these powerful and colourful images by going full-bleed. Accompanied only by a short poetic quote:

"The citizens of the countries who swim in the mediterranean sea feel the beauty with more intensity."

A statement to further highlight the concept of the brand; it is about the experience that each user / customer gets, either through interacting with the website or when visiting restaurants.

The menu on top expands on scroll-over, giving options such as:
Make a reservation / About us / Social media channels.
Plus an option to switch between English, Spanish and Catalan.

On the left side the user can access a fixed list of all restaurants owned by Grupo Tragaluz: divided into cities and boroughs.

Responsive design:

A clear user journey on all devices.
Left: condensed text for faster access to all categories.
Right: visually breaking up the list with attractive thumbnails which gives the user more room for clicking buttons.

Concept 2:

The menu bar becomes more prominent and the logo the center of the page. This is underlined by the angular shape of the menu which incorporates design and usability. A full-bleed slideshow with images of all GrupoTragaluz restaurants.

Once a restaurant has been selected, the user can read a brief introduction of what makes it unique before exploring the options.

At the lower part of the site there are 3 important options to chose from: map (for directions), menu and booking.

The top menu stays fixed for easy access and is a dropdown for switching in between restaurants.

Two menu ideas for the mobile version: dropdown menu on clicking the arrow below the logo or a standard burger menu in the right corner.

Concept 3:

This design places emphasis on each individual restaurants. The idea is to have a transition effect; from blurred to sharp image. Similar to a curtain in the theatre, slowly revealing the stage to the audience.

Concept 4:

A mosaic layout with hover-over function. The design invites the user to hover over a thumbnail image, the name pops up and the image becomes opaque. When selected, the image expands and covers half the page. The lower section carries a description of the place.

Concept 5:

Another interactive design concept: a carousel display of all restaurants, a catalog that swirls on click and drag.
After selecting one restaurant, the image expands to full-bleed and carries a short introduction and three bold call-to-action buttons.

Concept 6:

The last layout design is a mix of full-bleed and thumbnail images. The main image sums up the essence of the restaurant, whereas the thumbnails show the variety of food served.

Hovering over the burger menu, four call-to-action buttons appear: Learn more about the restaurants, Book a table, About the company and Social media channels.


all rights reserved © 2021