Interface Design

Peugeot Scooters Italia wanted us (PG&W) to re-design their website. We started by creating several layouts consistent with brand's online communication. In order to do that, we made room for photos, videos, promotions, technical informations and other interesting contents.

Peugeot Scooters - Interface Design

1.1 Peugeot Scooters - Home page.

Peugeot Scooters - Interface Design

1.2 Peugeot Scooters - Scooters index.

Peugeot Scooters - Interface Design

1.3 Peugeot Scooters - Scooter detail page.

Peugeot Scooters - Interface Design

1.4 Peugeot Scooters - Bike detail page.

Front end development

We created up to 20 HTML and CSS page templates and 3 different interactive tools to engage users and collect useful commercial informations:

  • The Scooter comparison tool;
  • The Find a dealer tool;
  • The Scooter configurator tool.

We developed these tools using a mix of JavaScript / jQuery and AJAX techniques.

Peugeot Scooters - Front end development

2.1 The Scooter comparison tool allows to compare performance, equipment and running costs of up to three scooters.

Peugeot Scooters - Front end development

2.2 The Find a dealer tool allows to filter dealers on the map by region, offered services, scooters / bikes availability.

Peugeot Scooters - Front end development

2.3 The Scooter configurator tool allows to calculate running costs of accessorized scooters.

Back end development

Using Wordpress as CMS, we allowed even less-experienced users to update every page of the website. We created 9 custom post types and more than 200 different custom fields. The client maintains the website autonomously helped by several video tutorials.

Peugeot Scooters - Back end development

3.1 Wordpress dashboard with custom post types and custom fields.

Peugeot Scooters - Back end development

3.2 Wordpress dashboard with custom post types and custom fields.