CASE HISTORY

Enjoy your journey, get more from it

Project Piaggio white-label
Skills UX design, Interaction Design, UI design 
Client Piaggio S.p.a.
Year 2018

PROBLEM DEFINITION

The client This project was made for Piaggio. The Piaggio Group is Europe’s largest scooter and motorcycle manufacturer and one of the world leaders in its sector. The Group brands include Piaggio, Vespa, Aprilia, Moto Guzzi, Gilera, and Derbi.

The problem — Piaggio has implemented a new technology called MIA. This new technology allows the vehicle to connect to the smartphone thanks to a dedicated app. In this way, the vehicle's user can track a lot of useful travel parameters, memorize them to see and analyze everything in a second moment.

The commitment — My commitment was to design a white-label app that could be useful to collect the data sent by a vehicle. The new technology is available on several bikes of different brands. The requirement was that the app could work for each vehicle equipped with the technology, detached from brand or model.

logos

AUDIENCE

Vehicle user — The vehicle user is the audience of this project. Every brand has its kind of user. They have different needs and requests. The app needs to have contents and solve problems for each of them. Some materials are suitable for everybody and some match only the need of a particular group.

audience

TEAM & MY ROLE

team

The team — A group of 4 has worked on this project. It was made up of one service designer, an interaction designer, two developers (one for the android version and one for the iOS version), one PM. Briefly, the service designer collected the different user's needs; the interaction designer developed the concept and the flow required to achieve the primary goal. The developers translated the design into code; the PM followed the process and tracked the client needs and requests.

My Role — After the study of the deliverables that have come out from the workshop, I've started working on the design of the app. From the workshop's deliverables, I learned who are the app users and their characteristics. First of all, I conducted a brainstorming to identify which data the vehicle equipped with the new technology could share with the user's device. According to data shared by the bike I've proposed al list of features that the app could provide. Together with developers and the other stakeholders, I've identified which elements could be placed inside the app. After that, a significant commitment was to determine which features could be shared between different groups of users and which of them I had to design for each one. Finally, I was able to architect new interfaces from the ground up.

role

CONSTRAINTS

Business requirements and user' limitations — The most important constraint was to design an app that will work for different brands. For doing this, we come out with a modular solution. Each app needed to be composed o various features. I proposed that every feature become a module. The team agreed with this approach, and we called every module "widget." For each widget, I made first the design, and after I customized it for each app. The customization consisted of design the UI of every widget according to the brand guideline.

Business requirements and user' limitations

DESIGN PROCESS

design-process

Inspiration / Discovery — In this phase, my focus was on digging into the “problem” to be solved.  I was looking at the breadth of the project. The need of the client was to have a white-label app that could collect the data that the new technology delivers. My purpose was to find out what users really wanted and needed in order to identify requirements.

  • Brainstorming
  • Benchmark

Ideation / Define — In the ideation phases, I had analyzed all the information I've gathered in the first phase. Thanks to design sessions in which I've made a lot of sketches and reviews with stakeholders I've finally come out with the “modular solution”. When everybody agreed with it, I did the first wireframes. Wireframes have given the first impress how the app looks likes.

  • Design sessions
  • Sketching
  • Reviews
  • Wireframes

Implementation / Develop — During this phase, I've tested whether the solution chosen could work for every need found. I've designed the widgets that we had to use in each app and checked if they worked as we needed. Developers saw the proposals and gave the feasibility approval for each brick we wanted to build. I did the mockups for each brand.

  • Mockups
  • Prototypes
  • Graphic assets

WIREFRAMES

wf – total

MOCKUPS

Guzzi - mockups 1
Guzzi - mockups 2
Guzzi - mockups 3
Vespa - mockups 1
Vespa - mockups 2