Research, Visual Design, Prototyping
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.
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 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.
As part of research and execution of this project, the following processes were required:
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.
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.
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.
Being able to quickly draw each screen helps to visualize the general flow at a high level.
The next step is to start building low fidelity screens while referencing the initial sketches.
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.
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.
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.
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