Gioia, Italian restaurant in Casablanca: the site designed by Dineora

An Italian table, from breakfast to dinner

Gioia is an Italian restaurant and tea room in the Aïn Chock neighborhood of Casablanca. Its menu follows the whole day. In the morning, the “ateliers du matin” offer breakfast set menus, such as the Réveil Matin, and à la carte plates, from fresh fruit to pancakes. At lunch and dinner, it is organized into sections with vivid names: “Grains de riz” for the risottos, including a risotto with tomato textures and stracciatella; “Nos pâtes fraîches maison”, from fettuccine bolognese to mushroom and truffle ravioli; “Au gré des marées” for grilled sea bream fillet or salmon steak; “Promenade en campagne” for the free-range chicken milanese.

There are also the raw dishes such as sea bass marinated to order, Roman-style calamari, the wood-fired oven pizzas, the sandwiches “entre deux mies”, a section for children and “Bien de chez nous... mais...”, where free-range chicken takes on Moroccan flavors. Desserts, coffees, old-fashioned hot chocolate, Moroccan tea and mocktails round out a menu that suits a tea room as much as a restaurant.

Gioia façade in a medallion, motto “Goûtez. Partagez. Souriez.” and the start of the slate menu on the home page

The challenge: a very broad menu with a voice of its own

The Gioia menu starts at breakfast, moves through fresh pasta, fish and pizzas, and also slides toward Moroccan cooking. The website had to hold that breadth without losing the visitor, and offer a clear way in, whether they come for a brunch, for a meal, for takeout or for delivery.

The other challenge was tone. Gioia’s sections have poetic names, from “Au gré des marées” to “Terminons en douceur”, and the place claims an Italian and international cuisine. It needed a setting worthy of that writing, without turning the menu into a riddle.

Gioia website home page on a smartphone, with the green and gold icon bar at the bottom of the screen

Gioia façade and slate menu in two columns, on a smartphone

Art direction board for the Gioia website

Black, gold and bottle green: an art direction for a grand table

The palette plays on almost black backgrounds, coppery golds and the dark green of the navigation bar. The visuals created for Gioia set a grand table: wood-fired pizza with a blistered crust, baked eggs in a cast-iron cocotte, pastries, thousand-hole crêpes, small dishes of jam and honey, a fruit verrine and a latte with a heart of foam, the cup marked with the name of the place. Further down appear the façade among palm trees, then a table where olive oil sits beside the pizza and the bread basket.

The name Gioia is written in a large brush signature in a sand color, and the section titles in fine, spaced capitals, accompanied by small line icons: a rice plant, a fish, a wood-fired oven, a chef’s hat. At the top of the screen, a green banner ringed in gold and decorated with foliage carries the name in Arabic letters and the Commander button.

A home page that reads like a poster, then like a menu

The home page is explored by scrolling down, like a large poster. It opens on the name Gioia, the line “Cuisine italienne & internationale” and the phrase “Là où chaque repas devient un souvenir.”, above the set table. Around the dishes, short annotations in capitals convey the spirit of the place: “Cuisine maison”, “Ingrédients sélectionnés”, “Saveurs d’ici & d’ailleurs”, “Moments à partager”, then a panel that highlights the wood-fired pizzas and the indulgent brunches.

As you scroll come the restaurant façade in a medallion, the panel “Expérience complète, du brunch au dîner” and the motto “Goûtez. Partagez. Souriez.”. A Menu button, decorated with basil and tomatoes, leads to what follows: the entire menu presented like a black slate with golden letters, section by section, from the risottos to the cocktails.

Gioia menu on a black slate with golden letters on the home page: the raw dishes, the hot starters, the wood-fired oven, the coffees

The Gioia ordering page on a laptop and a phone

An online menu for ordering, takeout or delivery

The ordering page opens on a dark backdrop worked in relief: ears of wheat, golden scrollwork, tomatoes, olives, small bowls of seeds and a carafe of olive oil, around the title “Menu & Commander”. The sections sit on parchment-colored cartouches, in golden frames carved with wheat and tomatoes, with titles in midnight-blue capitals. A bar at the top of the screen moves you from one section to another.

Each dish has its visual, its name, its price and a golden button to add it to the cart. The customer builds the order, chooses pickup at the restaurant or delivery, and can pay online. On a smartphone, the cart bar, in the same golden frame, stays at the bottom of the screen the whole time the menu is being read.

Gioia ordering page on a computer: dark backdrop of wheat and tomatoes, title “Menu & Commander” and parchment cartouches

Gioia menu on a smartphone, “Grains de riz” section, with the cart bar

Gioia's menu: a few dishes

Dishes as they appear on Gioia's online menu, with the restaurant's own names, descriptions and prices.

Grains de Riz
Risotto en Textures de Tomates, Stracciatella
Risotto crémeux aux tomates sous différentes textures, garni de stracciatella.
85 MAD
Nos Pâtes Fraîches Maison
Fettuccini Bolognaise
Fettuccini fraîches servies avec une sauce bolognaise à la viande.
95 MAD
Au Gré des Marées
Dos de Daurade Grillé
Dos de daurade grillé, chair délicate.
170 MAD
Promenade en Campagne
Milanaise de Poulet Fermier
Escalope de poulet fermier panée et dorée, façon milanaise.
120 MAD
En Fraîcheur
Saumon Gravlax Maison
Saumon gravlax mariné maison, servi froid.
95 MAD
Les Crus
Loup Mariné au Moment
Loup de mer mariné à la minute, servi cru.
115 MAD
En Température
Calamars Romana, Deux Petites Sauces
Calamars frits à la romaine, accompagnés de deux sauces.
95 MAD
Notre Four au Feu de Bois
La Margarita
Pizza Margarita: tomate, mozzarella, basilic.
75 MAD
Entre Deux Mies
Le Pepito
Le pepito, bien garni.
90 MAD
Pour les Meilleurs
Pizzette Margarita Champignons
Petite pizza margarita aux champignons, portion enfant.
65 MAD
Bien de Chez Nous... Mais...
Poulet Fermier
Poulet fermier préparé aux saveurs marocaines.
95 MAD
Terminons en Douceur
Choux Gourmand
Choux à la crème gourmands.
50 MAD

Booking on a black and copper panel

The booking form opens in a black panel with coppery letters, titled “Réservations, votre table”. It asks for the essentials, on a single screen: full name, phone number, email, date, time, number of guests and special request, in parchment-colored fields. A “Réservation” button, decorated with basil and bread, closes the form.

On a computer, the panel is staged between a potted olive tree and a dining room with arches lit by a lamp. On a smartphone, it switches to a single column.

The Gioia website on a phone resting on a set table

On a smartphone, an icon bar and a single-column menu

On a smartphone, the home page keeps its poster composition. The navigation moves down to the bottom of the screen, in a green and gold bar that brings together three icons: home, menu and ordering. The slate menu on the home page tightens into two columns, and the booking form into one.

On the ordering page, the parchment cartouches stack one under another, each dish with its visual, its price and its add button. The section bar scrolls along the top of the screen, and the cart bar stays fixed at the bottom.

Gioia booking form on a smartphone, in one column on a black and copper panel

Gioia hot starters on a smartphone: calamari, marinated feta, fish and chips, fish soup, with the cart bar

A website prepared for local searches

The website is built around the searches people make when going out to eat in this part of Casablanca: an Italian restaurant in Casablanca, a restaurant, a café or a tea room in Aïn Chock, a risotto, a salmon steak, a restaurant that delivers, or simply the name Gioia. The title, the description, the texts and the structured data of the site present the restaurant in a consistent way.

A detailed presentation page complements the home page, and the full menu can be read as text on the ordering page. No one can guarantee a place on Google: the work consists of giving search engines accurate, structured information that is consistent from one page to the next.

End of the Gioia menu on the home page, above a table with olive oil, pizza, latte and bread basket

A website for an Italian restaurant and tea room in Casablanca, from Aïn Chock to the wood oven

An Italian restaurant in Casablanca that opens at breakfast serves two crowds: those who want baked eggs and a latte at nine, and those who return at night for a wood-fired pizza, fresh pasta or a marinated sea bass. A tea room and restaurant website has to present a menu as sprawling as Gioia’s, from grilled sea bream to the cream puff, without losing anyone, then open delivery, pickup and reservations.

A cost sized for a neighborhood room. No agency to pay, no cut taken from the little pizza or the risotto leaving in a box: the takings stay in Aïn Chock.
The site before the shutters go up. Give the venue’s name and within minutes the menu, from breakfast to pastry, is built with its order pages.
Black, copper, dark green. The identity echoes the long table, the facade between palm trees and the cup printed with the venue’s name, not a borrowed look.
The daily special changes the same day. A fish delivery, a morning set, a price: the manager edits it alone and it is online at once.
The courier is the house’s own. Orders and reservations reach Gioia’s kitchen with no platform or agency in the middle.
Casablanca today, Lisbon tomorrow. The software already serves Lisbon, Nice or Sydney, in each address’s own language and currency.

For an Italian restaurant in Casablanca, it puts Gioia’s long table online, from morning to the last service.

Dineora in numbers: 0% commission on your orders · a website live in 5 minutes.

Learn more: Restaurant website builder · Online ordering system for restaurants · Restaurant booking system · QR code menu for restaurants

The outcome: a grand table, from the menu to the order

The Gioia website takes up what the house puts forward: an Italian cuisine open to other flavors, a menu that runs from breakfast to dinner, a dark and golden setting. It makes this menu readable and keeps ordering, delivery and booking within reach. A website that matches the place, designed by Dineora.

The website in pictures

Screenshots of the live website, on a computer and on a phone.

Gioia website home page on a computer: name in a golden signature, “Cuisine italienne & internationale”, wood-fired pizza and baked eggs in a cocotte

Gioia wood-fired oven pizzas on parchment cartouches with golden frames, with the section bar

Set table on the Gioia home page: pastries, thousand-hole crêpes, latte, annotations in capitals and Menu button

Gioia booking form on a computer: black panel “Réservations, votre table” between an olive tree and a dining room with arches

Gioia: practical information

Address: Gioia Casablanca, 160 Bd de La Mecque, Casablanca
See the address on Google Maps
Cuisine: Italian restaurant and tea room
Services: Online ordering for pickup · Delivery · Online table booking · Online payment
Menu sections: Grains de Riz · Nos Pâtes Fraîches Maison · Au Gré des Marées · Promenade en Campagne · En Fraîcheur · Les Crus · En Température · Notre Four au Feu de Bois · Entre Deux Mies · Pour les Meilleurs · Bien de Chez Nous... Mais... · Terminons en Douceur · Ateliers du Matin - Nos Formules · Ateliers du Matin - à la Carte
The restaurant's website: dineora.io/gioia