Roadtrip Planning & Navigation App
Porsche Digital
Palo Alto, 2018
PROJECT BRIEF
This app is for drivers who enjoy weekend getaways or day road trips. It helps them plan their trip by choosing pre-determined routes and discovering places to eat, stay, have a drink, go hiking, or relax at the beach.
For my part, I focused on designing the navigation aspect of the app, while our client's team in Germany worked on the trip planning features. They desired a stylish and refined design that aligns with Porsche brand identity. Our goal was to create a simple app that displays only essential information.
Requirements
The requirements for this project (Platform, devices, mode, and orientation)
• iOS 10 & iOS 11
• iPhone 7/8, iPhone 7+/8+, and iPhone X.
• Day mode & night mode
• Portrait & landscape
Benchmarking
In order to avoid unnecessary duplication, we opted to conduct benchmarking by driving around and utilizing four navigation apps: Apple, Google, Waze, and Here.
Road Signs
I conducted extensive research on road signs from both the United States and various European countries including Germany, Austria, Switzerland, France, the Netherlands, Italy, and the UK. It was crucial for me to ensure that the navigational arrows, speed limit signs, and other design elements I was working on would be effective in both the USA and Europe, as requested by the client.
Typeface
Using the typeface and its elements, I crafted the navigational arrows. The body of the arrows emulates the lines and curves of the letters "I", "U", "r", and "y". Initially, I intended to construct the arrowheads using the "x" shape, but due to the client's preference, I modified the design of the arrowheads.
Design guide
Below are a few pages from the comprehensive 14-page design guide that I developed for this project, which served as the fundamental building blocks for establishing Porsche Digital's branding and style. These documents encompass both the visual style guide and interaction guidelines.
Here are a selection of icons specifically designed for this app.
The icons in the top row represent the in-map style, while the icons in the bottom row are designed for interactive use within the app's menu.
