Garmin Auto OEM team helped their customer to design and develop a navigation app that can be operated on a mobile device and on the infotainment system embedded on a motorcycle. As part of the UX designer of this project, I helped to redesign the original Garmin navigation product that can be fit into the operation on the infotainment system, meanwhile designed for the new features requested by our customer.
Background
Garmin has a long history of developing the navigation service. For this project, Garmin Auto OEM team would help their customer to develop a new navigation app on a mobile device. And when the mobile device is connected to the motorcycle ( only for the brand that is under the customer’s company) via USB cable, the navigation on the mobile screen would be streaming to the screen of the infotainment system on the motorcycle. The user can operate the navigation app on the infotainment system only by the hard keys on the motorcycle instead of by touching.
The schematic diagram showing the connection between a mobile device and the infotainment system via USB port and the hard keys set on a motorcycle handlebar
The Challenge:
Considering the Use Cases when the Navi App is Operated by Hard Keys
When the user is operating the Navi app by the hard keys on a motorcycle, it means that the user is riding the motorcycle. Under this circumstance, several limitations for operation needs to be considered for riding safety.
Study of the Original Garmin Navigation App
Since the design for the new app would be based on the original Garmin Navi app, starting from the very beginning I analyzed the information structure of the original navigation app to have a good knowledge of the original design structure, hence I could know how many features should be designed for the new Navi app.
Information structure of the original navigation app
Development of the UI Guideline
My fellow designer also created the first version of the UI guideline for the design consistency and for customer’s references. As for the condition when operating the Navi app using hard keys, a selected UI component will be focused.
The example showing one of the UI element (the [Go Home] button) is being focused with a highlight in a yellow frame
I worked closely with the engineering team to co-editing the section of the focus movement rule from the operation of the hard key, which considering the relative distance, positions, and overlapping between UI components.
For example, the following diagram from the UI guideline shows that when the user press the [RIGHT] key, the focus will be moved from the [Current Button] to the Button with full-overlap based on the focus movement rule.
A diagram of showing part of the focus movement rule in the UI guideline
Design for the Different Features of the New App
Based on the original Garmin Navi app and the UI guideline, I co-worked with my fellow designer to design the HMI of the new Navi app including several features (like Map Home, Map Tool, Routes Features, Where To, etc.)
Redesign for the Hard Keys Manipulation
Since the new Navi app could be operated on both a mobile device and the infotainment system of the motorcycle, we had to design how to let the user conduct the same task by different ways of operation on both platforms. Meanwhile, there are several conditions to be considered for the scenario that a user is operating the Navi app via hard keys when riding a motorcycle:
​
-
Which feature/UI element should be disabled/hided from users?
→ It might depend on whether the feature is too complicated to manipulate, or it would cause a magnificent change in the screen layout.
-
If the feature/UI element is disabled, should it be grayed out or not?
→ It will depend on the information in the UI element is necessary for the user or not.
​
For example, the following screen shows a live traffic condition under the manipulation using hard keys, the UI element with the red frame is disabled and cannot be focused via hard keys for further complicated operation. However, the UI element is not be grayed out since the information of the road condition on it is necessary to the user.
A wireframe showing a live traffic condition
Another example is the following flow shows how a user closes a map tool widget on Map Home on a mobile device, which is simply pressing the [X] button to dismiss it.
The UI flow showing how a user closes a map tool widget on the right side of the screen
However since no UI elements are allowed to be focused by hard keys manipulation in Map Home due to safety reasons, we removed the [X] button on the map tool widget and provided another way for the user to dismiss the map tool widget.
The UI flow showing how a user closes a map tool widget via hard keys manipulation
Design for the New Features
Besides designing the features derived from Garmin original Navi app, I also supported to design the new requirement from this project:
​
-
Initial Settings​
When the user uses the new Navi app for the first time, it is required to connect the mobile device to the infotainment system on a motorcycle for product validation. I worked closely with the software team to design the flow chart for the initial settings.
→ Guide with Carefully Designed
For this features the guiding texts displayed on the screen were carefully designed to be intuitive and clear, to help the user can know what is happening with the system and what action to take, hence go through the settings process smoothly.
Part of the flow chart and key screen of the initial settings
-
Map Download Center
The Garmin business department planned to develop an online map store for the new Navi app, allowing the user to subscribe and download maps from different areas. I helped to design this new feature starting from competitive analysis for main navigation service apps like Sygic, MAPS.ME, HERE and listed different users’ tasks as below:
- Entering the Download Center
- Map Subscription and Download
- Map Update
- And more…
Following the user’s tasks, I designed the Map Download Center that could fit in the layout style of the new Navi app.
During the design of this feature, I collaborated with more stakeholders in Garmin to deliver the UI flow that balancing between the user experience, the business scope and the feasibility of the engineering team.
UI flow of the Map Download Center divided by different user’s tasks
Collaborated with Customers
Throughout this project I also attended meetings with the customers so that I could get instant feedback and expectation from them, and brought the insight into my design.
Me on the rightmost side with customers, PM, and engineers.
The Result
As I co-work with my fellow designer, engineers and PM smoothly, I finally provided the UI flow design of all features to the engineering team. Although it was an ongoing project, the main features have already been completed on schedule.
New Navi App for Different Platforms
More selected projects
