Telenav Rhine - In-dash navigation for GM
“
Visual design for 90 wireframes based on GM Style Guide.
Telenav
Scope of work, 2015
About the project
Rhine is the in-dash navigation Telenav built for GM’s European brands, Opel and Vauxhall. We turned Telenav’s 90 wireframes into a complete visual design on GM’s style guide, with the specs and assets engineers needed to build it pixel for pixel.
Project
Telenav Rhine
Industry
Automotive Navigation
Location
Sunnyvale, USA
Date
2015–2016
“
Client Request
Visual design for 90 wireframes on GM’s style guide, plus UI rules for how each screen changes state.
Telenav
Scope of work, October 2015
Design Pillars
Core UX Principles
Big turn information, high contrast and short labels, so the driver reads the screen in a glance.
Type and highlights unified on a single red (#AF0D18) across every screen.
Night versions of the camera, school zone, railway and lost-GPS icons, plus disabled and highlight states.
Feedback & Insights
What the feedback rounds changed
Two-Digit Pins
Numbered map pins were resized to hold two digits.
A Clearer Menu Icon
The menu icon was redrawn so it wouldn’t confuse drivers.
Bigger Keys
Keyboard buttons were enlarged, and icon sizes changed so developers could align assets easily.
The Challenge
Problem Statement
The Main Goal: One System, Every State
A head unit has to work in daylight and at night, mid-turn and parked, with and without GPS. The job was to keep 90 screens consistent across all of those states and hand engineers specs precise enough to build from.
Our Approach
Solution
A Visual System on GM’s Style Guide
Every screen from free drive to arrival, delivered as layered design files with UI behavior documents. It is an example of our UI/UX Design work.
01 - Before Navigating
Search, results, places, routes, favorites, traffic and settings.
02 - Navigating
Turn cards, lane guidance, tight turns, junction views, multi-stop trips and arrival.
03 - Specs and Assets
Four spec books plus production assets: lane-assist and turn icons in three sizes, alert icons and 14 EU traffic signs.
Specs
The Blueprint & Evolution
Spec Logic
Each screen came with exact sizes for engineers, so the build could match the design pixel for pixel.
Sizes: an 800 × 104 pop-up, 76 × 76 icons and 33 px type that always runs to two lines.
Assets: lane-assist and turn icons exported in three sizes, ready for developers to drop in.
Design
Key Features
Lane Guidance and Tight Turns
Lane arrows and the next turn shown together when two turns come close.
Traffic Along the Route
Incidents listed with the delay each one adds, plus alert icons for accidents, congestion, construction and closed roads.
Design System
Visual Identity
Typography
GM’s style-guide typeface, set large so labels read in a glance.
Color Palette
A dark interface with one red for highlights, active states and the route line.
UI Logic
Every component specified in its states: default, pressed, disabled and night.
Impact
On the Road in Europe
Results for Telenav
Rhine went on sale in July 2017 as Navi 4.0 IntelliLink, the built-in navigation in the Opel and Vauxhall Adam, Corsa, Karl and Zafira.
Opel
,
Vauxhall
Result
By the Numbers
90 Screens Designed
Telenav’s wireframes turned into a full visual design on GM’s style guide.
4 Models at Launch
Adam, Corsa, Karl and Zafira, sold under both the Opel and Vauxhall names.
5 Months, 2 Extensions
From October 2015 to February 2016, with the work extended twice by Telenav.
Production
Built to Hand Off
Specs, Assets and Keyboards
Four spec books covered every screen, from before navigating to headers and system screens. We also delivered the full icon library and keyboards for five European languages, so every market got the same system.
Final Showcase
The Rhine Experience
