Webdesign
User Journey
UX + UI

Concept creation of a website for a chain of various restaurants:

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. this builds the foundation of every experience, starting with the website: powerful images, strong colours, elegant photography.

design concept 1:


powerful full-bleed imagery, colourful and asymetrical. the only description on this page is a quote that translates to: "the citizens of the countries who swim in the mediterranean sea feel the beauty with more intensity." a statement that is supposed to underline the concept of the brand; it is about the experience that each user / customer gets, either through interacting with the website or when visiting one of the restaurants.

the menu on top expands on scroll-over, giving options such as: make a reservation, about us and social media. a choice of language: eng, esp, cat.

the user has access to a fixed list on the left and carries all restaurants owned by Grupo Tragaluz: divided into cities and neighborhoods.

Responsive design:


a clear user journey regardsless of device choice. the concept on the left is driven by a list of words: more condensed with faster access to categories. on the other hand the concept on the right is visually breaking up locations with the use of thumbnail images: it gives the user more space for scrolling and 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 the different restaurants.

Further development:


based on concept 2, these images show how the user navigates through the site. After selecting a restaurant, another menu bar with 3 taps pop up on the bottom of the page: map, menu, reservation. bold large letters on the left indicate which restaurant is selected. each restaurant carries a quote, to give it some personality. the name stays when the user navigates between the other sections. the top menu bar always remains and gives the option to change the restaurant easily.

Responsive Design:


the mobile version of concept 2. there are two ideas for the menu. the dropdown menu on click of the arrow and the standard burger menu in the right corner.

Concept 3:


this concept is giving more emphasis on the individual restaurants. when a restaurant has been selected, a photograph of the restaurant is revealed slowly, changing from blurriness to clear picture, similar to a curtain in the theatre, slowly revealing the stage to the audience.

Concept 4:


a symmetrical mosaic design that has an interactive effect on the user. when hovering over a thumbnail image, the name pops up and the image becomes opaque. by clicking the thumbnail, the image expands and covers half the page. the lower half 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.
on click the image expands to a full-bleed yet leaving a bit of space at the bottom for a short introduction and three bold call-to-action buttons.

Concept 6:


Last but not least a version that reserves 2/3 of the screen for a stylish image which sums up the essence of the restaurant. whereas the lower third is reserved for a slideshow of food photography from the restaurant. only on click appears a minimalistic menu, giving the user four choices of action: learn more about the restaurants, book a table, learn about the company or have a look at their social media activity.

Top

all rights reserved © 2018