All WebsitesRestaurant

V.E.S.P.A.

Website and online ordering for an Italian restaurant in Lund and Malmö, Sweden: table booking, takeaway, catering and an Italian supermarket.

Industry
Restaurants
Location
Lund & Malmö, Sweden
Built with
WordPress, WooCommerce
My role
Website design & development
Live site
V.E.S.P.A. website on desktop
V.E.S.P.A. website on mobile
Overview

V.E.S.P.A. serves Italian food “like at nonna’s” in Lund and at Davidshall in Malmö, along with catering, tastings and an Italian supermarket. The site brings it all together and lets guests book a table or order takeaway from the right restaurant.

The challenge

Two restaurants each have their own menu, phone, booking and takeaway, plus catering, tastings and a shop. Without careful structure, the menu becomes a maze.

Who it’s for

Designing for the people who use it

  • 01Local diners in Lund and Malmö
  • 02Takeaway and online order customers
  • 03Companies ordering catering
User journey

From first visit to the next step

  1. 1

    Pick your restaurant

    Lund and Davidshall sit side by side on the home page, each with its own phone number.

  2. 2

    Menu & info

    Each location has its menu, opening hours and details.

  3. 3

    Book or order

    Book a table or order takeaway, tied to the chosen location.

  4. 4

    Discover more

    Catering, grappa and beer tastings, and the Italian supermarket.

  5. 5

    Order online

    The online shop handles orders such as seasonal Christmas bags.

Wireframe

Page structure

The homepage is planned as a sequence of sections, each answering the next question a visitor has. Below is that structure as a low-fidelity wireframe, with the site’s main navigation.

Beställ online (order)LundDavidshallKontakta oss (contact)
01Header with online ordering
02Two-location hero with phone numbers and actions
03Partner logos
04Catering
05Newsletter sign-up
06Italian Supermarket
07Opening hours per location
08Our story
Design system

Colour, type and components

Colour palette
  • Vespa red#E0212A
  • Deep red#D1121B
  • Charcoal#323232
  • Warm white#FCF6F1
  • Black#000000
Typography
AaMocha MattariHeadings
The quick brown fox jumps over the lazy dog. 0123456789KiroBody text

These are licensed fonts, so the samples here use a stand-in.

Primary button
Meny & info
Design decisions
  • 01The home page splits into Lund and Davidshall straight away, so every action is tied to the right restaurant.
  • 02Red ribbon-style buttons echo Italian signage and stand out over food photography.
  • 03Hand-drawn display type and the retro Vespa illustration give the brand its playful character.
Responsive

Designed for every screen

vespa.nu
Build & launch

Development and launch

  • 01WordPress with WooCommerce for online orders.
  • 02Page caching (WP Rocket) for fast loading.
  • 03Cookie consent, Google Analytics and an accessibility statement.
Visit vespa.nu