Iconic Iteration

Prototyping an App Experience for Vespa’s Signature Style

6 min readMay 3, 2022

The final semi-functional prototype can be found here:

https://www.figma.com/file/PKChNteUmFMJYf3rivgrlr/Vespa-prototype-(Copy)?node-id=0%3A1

Developed in Figma for Utah Valley University forDGM 3270 with Steven Minert.

Vespa’s Brand Identity

Since it’s debut in 1946 at the Milan fair, Piaggio’s Vespa line of scooters has rode public demand and modernist culture to an icon status internationally. The word Vespa has become synonymous with scooters, cheap and reliable transportation, and trendy tie-ins. The brand has an indelible link with freedom and progression, but there is also a refinement and engineering prowess that the current branding does not communicate online.

Audrey Hepburn aboard Gregory Peck’s Vespa in Roman Holiday (1953)

Vespa’s current site had many issues from an aesthetic perspective. There are clashing colors, inconsistent padding and too many front-loaded promotions which make the site look amateurish and not fit for a company with the history and prestige that the brand commands. For something with an important link to the Mod movement and the brand being an Italian icon, the site is inappropriately kitsch.

Shopping for a scooter is an in-depth experience. You want to know as much comparative information as you can glean about your new $1000+ purchase. This makes the experience well suited to a tablet, as you typically sit down for a longer experience on a tablet than you do with a phone. My aim at the start was to create an app that would walk you through the shopping experience in a way that is exciting and informative, while making nods to the artistic and historical origins of Vespa.

I started development by laying out what the app was meant to accomplish. By compiling the priorities of the app, I figured out how much needed to move over from the site to the app and what could be left behind as a part of the web experience.

One of the challenges put forward in this assignment was to focus on the experience of buying a single product and focus on the micro-interactions present in that flow. If you’re downloading a Vespa app in the first place, it stands to reason that you are:

A. Considering buying a Vespa

B. Shopping for your Vespa for accessories or service

With these priorities determined, I started with the app structure:

A draft for the use flow and what features would be placed where roughly.

I wanted to establish the iconic status of Vespa right off the bat and lead the viewer into the shopping part. The initial concept was that I would have a large scrolling history of Vespa right at the very beginning. Now, having a basic idea of what features the app would hold, I made a mood board of the aesthetic inspiration I would be applying to the app.

I chose seven words that describe Vespa and their current marketing, and I drew in classical Italian artists that were influential. This included Franco Battiato’s album cover for La Vos De Su Amo, Leonardo Da Vinci’s sketches, and modernist sculpture and art. I fell in love with the geometric shapes and the varied colors.

With this all in hand, I focused on geometric shapes and cubist inspired forms and put together an idea for the homepage and the history scroll in Figma. And I absolutely hated it.

The Pivot

It felt cheap and the primary colors were too high contrast to create meaningful distribution of contrast. This created an effect where the design felt extremely flat. So I decided to pivot. One aspect of owning a Vespa that people love is that iconic status. People know and like Vespa already from the mod movement until now, so I decided that a large history would be ignored in the overall scheme of the app. I pushed instead to have a home page that focused on the freedom of riding a scooter in any environment with that the design had to move. The new concept was a Vespa riding along different types of roads, showing the diversity of places it could go. I capitalized on the freedom of mobility that is such a draw for scooter owners.

This was one of my first projects I assembled in Figma, having worked in Hype, then Sketch, and most recently Adobe XD. I wanted to see how far I could push Figma and what media I could fit into the app. I originally tried to use a plugin to create video that would run behind the Vespa, but it proved to be extremely hard for people to preview in the Prototype.I decided that if it was not viewable in the inbuilt prototype viewer, it wasn’t worth doing.

So I sunk my teeth into the smart animate feature on Figma and set up a simple loop that ran very slow.

I also established the color scheme of muted yet painterly colors that were mainly inspired by the painting on my moodboard. Pleased with the color scheme, I moved on to creating the model’s gallery where the whole idea behind the site was to focus on the Vespa’s signature style. I took that concept to a very literal endpoint.

I wanted this page to emulate walking through a showroom floor where you get to see a fun display about each model and move through them all. I also gave each model a signature color that it’s display page could use as its main aesthetic element. At the bottom there is an illustration from the current vespa site that I thought worked beautifully as the face for their vintage scooter shopfront.

For the model display page I wanted to keep it modular and with the most important pieces at the top. I wanted to highlight the features first, offer an augmented reality tour and walk the viewer through all the component parts of the Vespa before reaching the bottom where they have the option to purchase. At first the accessories were put before the purchase but that seemed like putting the cart before the horse, so I revised it to list the accessories below the purchase.

The Vespa project was a good jumping off point to learn the features of Figma and to see how far I could push the program to make a high-fidelity prototype. I think the project communicated the iconic nature of the Vespa brand well and I am proud of what I created. If you’d like some iconic design for your future project you can find more of my work at https://linktr.ee/AlexanderWalker