Home

Porsche Play


My Role

Research, Visual Design, Prototyping

The Challenge

Throughout the duration of vehicle ownership, sifting through large paper vehicle manuals can be cumbersome. Despite valuable knowledge being provided, instructions, vague diagrams, and illustrations can be difficult to follow.

Instruction Manuals

Warranty information and service record books requiring manual write ups from owners are common and require physical storage in areas such as the vehicle or household.

The Solution

The companion app allows owners to tap into real time functionality for their Porsche vehicle as well as access all knowledge on it without a traditional paper owner’s manual. Critical needs and service reminders should be clearly presented to the user.

The Approach

As part of research and execution of this project, the following processes were required:

Competitive Analysis

Researching existing apps helped to understand the approach that various OEMs have taken. Knowing what functions were offered and how they were emphasized was important.

The three manufacturers chosen for this were Honda, Porsche, and Ford.

Competitive Analsis - Mockups

Reading through customer reviews from both the Apple App Store and Google Play Store helped to surface common customer frustrations. Knowing what worked and didn’t work for users would influence how I would design my product. I distingushed these with green and red highlights.

Competitive Analsis - Reviews

Patterns of positive feedback from a small sample of reviews included the ability to show parking location, fuel consumption figures, vehicle gauge figures in real time, service reminders, and the ability to start / lock the car remotely. Of the three chosen OEMs, Ford’s app had the most positive ratings.

There were numerous desired or negative feedback as well. These included showing historic fuel economy figures, radio presets, remote window and roof controls, and exposing general vehicle figures more clearly. Despite them being the most premium brand of the three, Porsche had the lowest average score in their respective app stores. For this reason, I decided to attempt a redesign of their app.

Sketches

Being able to quickly draw each screen helps to visualize the general flow at a high level.

Sketches

Wireframes

The next step is to start building low fidelity screens while referencing the initial sketches.

Wireframes

Style Tile

Immediately converting each screen to higher fidelity can be very time consuming. A better use of time would be to create style tiles. This exploration helps to more quickly get a feel for the design direction in a more timely manner.

Style Tile

Accessibility

It is important that the app is easy to use by people of all types and situations. This means working well with assistive devices such as screen readers, running light for users with slow connections, or just being generally usable for people on the go.

Accessibility - Contrast  Check

One example of being compliant with WCAG standards is to have a sufficient contrast ratio for elements in the UI. Fortunately, there are tools and plug-ins (i.e. Stark for Adobe XD / Sketch) to help identify when the contrast is too low for those that are visually impaired.

High Fidelity Mockups

Once the general wireframes and flow were eastablished, it was time to improve on the visual aesthetic. To make the app feel more enticing, it needed additional polish. The design direction was influenced heavily by Porsche’s existing brand guidelines. Reusable components and patterns were established along the way as to not create unnecessary one-off elements.

High Fidelity Mockups

Prototype

At this point, links were added between screens to make the flow more believable. Animations were added between screens to add a sense of fluidity and moments of delight. The final result is a prototype that feels like a real app, ready to review with stakeholders.


View final product