Porsche Off-Road
Porsche asked frog to design their first app for Porsche Cayenne owners that purchased the off-road option. The project was first aimed at understanding what the app should do to be useful to current and future owners and then produce the detailed designs.
Team
1x Interaction Designer - myself
1x Senior UI Designer
1x Creative Director
1x Product manager
Porsche technical & business team
Time frame
Strategy, research and design of the first version
October 2016 - January 2017
Launch
May 2018 on iOS and Android
Context
We started the project by holding a kick-off meeting with the client team. From there we defined together the main project goals:
Strengthen Porsche’s expertise in off-road.
Create an app based on the existing Porsche Track Precision App.
Deliver an app that customers love to use, pushing them to talk about it and reinforce Porsche’s digital presence.
Educate and entice Porsche customers to drive off-road.
This project was very time (and money) restricted. In 9 weeks we needed to deliver a detailed design documentation so Porsche’s development partner could start the engineering work. A very waterfall process forced us to have a week dedicated to immersion / research in order to focus on the design during the rest of the time.
Understanding the world of off-road
My role in this one-week immersion phase consisted in putting together secondary research around themes defined in the kick-off meetings and extract actionable insights on how to design for those. Themes included:
Explore (How can I find the best trail for me?)
Record (How can I capture what I want to?)
Memories (How can I save and browse back memories of what I recorded?)
Training (How can I make myself more confident to go off-road?)
Pictures of my work-in-progress pin board with examples of recommendations extracted from examples found.
At the same time we found some off-road drivers ready to talk to us through online forums or Porsche networks. I helped put together the interview guide, led some interviews and created summary posters for each one to present back to the client
Design sprint
On the first day of the design sprint the team aligned on the insights and learnings from the secondary and primary research.
Together we defined two user archetypes, explored the service ecosystem and the customer journey of the off-road driver.
Towards the end of the day we identified focus areas for the ideation on the next day.
I ran and moderated a third of the sessions during the entire sprint, mainly focussing on the sketching and ideation part.
During the sprint with the client team
Establishing archetypes based on existing business insights from Porsche and what we learned from our off-road drivers interviews
The second day was dedicated to creating concepts for the identified focus areas. We did three rounds of ideation, each focusing on one phase of the journey (before, during, after).
After the ideation, the ideas were clustered, discussed and rated, identifying the ideas which are the most promising, viable and feasible.
The selected idea clusters where then mapped on a KANO diagram to identify which would be delighters, performers or must haves.
An example of our pin board for the “Before” part of the journey, with sketches from the whole team including the client. We rated each cluster in terms of Fit. Feasibility and Viability.
The result of the design sprint was a first design concept, focusing on creating an off-road journal, rather than an off-road planning app.
The concept was packaged in an interactive prototype, including the home screen, recording, analysis, and an off-road manual.
My role in the concept phase was to work closely with the technical contact at Porsche to create the information architecture and first wireframes of the selected features based on what data we can get from the car and from other sources. Then I handed over the wireframes to the Visual Designer for skinning /branding. I also was in charge of putting together the prototype in Principle after the first visual pass was done.
Very early wireframes of the app home screen, tutorials and trip analysis.
Prototype made in Principle after the visual designer worked on the screens
Detailed design
After the concept was presented back to the client, we started going into detailed design to prepare for developer hand-off. That’s where we missed having user feedback on the concept to confirm some assumptions but unfortunately we were time bound by the client and the contract.
During the detailed design my focus continued on working on interactions, flows and wireframes and collaborating closely with the visual designer. I also put together a Confluence detailed documentation of our designs since we did not have engineering resources from Porsche and were sup[posed to handover designs “over the fence”. The Confluence documentation contained written explanation of the logic behind the screens and where necessary prototypes that communicated animations and behaviours. See some video examples below.
An example of flow documentation I put together for the Trip Analysis section, before visual work was performed
One of my favourite piece of work I worked on was the concept of a “Highlight Video” that gets generated automatically after a user finishes a trip. The user can then edit the video in the app using a grid interface that allows blocks of footage to be moved around without breaking the sync with the background music.
Prototype for scrolling animation on the home screen
Prototype for the start animation on the home screen
Looping animation for the welcome screen made in After Effects
Prototype for explaining the recording flow to the lcient and developers