top of page

Car Navigation
UX

UX , UI, Motion

Title: Senior Product / UX Designer

Tasks : Car Navigation UI Design (Animated UI, 3D)

 

Project Scope: The goal of this project is to create a user-centered navigation experience that is
intuitive, efficient, and visually engaging. The redesigned navigation system should leverage
motion design principles to guide drivers seamlessly through their journey, while also integrating
with other vehicle features such as energy efficiency monitoring and charging station
recommendations.


Case Study Scenario: As the Product Designer leading the project, you are responsible for
conceptualizing, prototyping, and implementing motion designs for the new in-vehicle navigation
experience. You will collaborate closely with software developers, and product
managers to ensure that the final product meets the needs of users and aligns with the
company's design principles.

 

Case Study Tasks:
1. Ideate and conceptualize designs that address the identified user needs and align with
the project goals.
2. Create wireframes, storyboards, and interactive prototypes to visualize and communicate
the motion designs to stakeholders.
3. Collaborate with UX designers to integrate motion designs into the overall navigation
system interface.

4. Work closely with software developers to implement 2D and 3D motion designs using industry-
standard tools and technologies.

5. Document design decisions, specifications, and guidelines for motion designs to facilitate
future iterations and updates.
6. Provide support and guidance to junior members of the design team, sharing knowledge
and best practices in motion design.
7. Present final designs and prototypes to stakeholders, demonstrating how motion design
enhances the navigation experience for drivers.


Case Study Questions:
1. Can you walk us through your process for conceptualizing and prototyping product and motion
designs for the navigation experience?
2. What challenges did you encounter during the implementation of motion designs, and
how did you overcome them?
3. How did you ensure that the motion designs were accessible and inclusive to all users,
including those with disabilities?
4. Can you provide examples of how user feedback influenced the iterative refinement of
motion designs throughout the project?
5. What considerations did you take into account to ensure consistency and cohesion with
the company's brand identity and design language?
6. How do you see the role of motion design evolving in the automotive industry, and what
opportunities do you foresee for future innovation in this area?


Outcome: The redesigned in-vehicle navigation system receives positive feedback from users
and stakeholders alike. Drivers appreciate the intuitive interface, real-time feedback, and visually
engaging motion graphics that make navigating with the system a seamless and enjoyable
experience. The project demonstrates the value of motion design in enhancing user experiences
in automotive applications, setting a new standard for in-vehicle navigation systems in the
industry

Car Navigation Display _ 3D Motion _Page_01_edited.jpg
Car Navigation Display _ 3D Motion _Page_02.png
Car Navigation Display _ 3D Motion _Page_03.png
Car Navigation Display _ 3D Motion _Page_04.png
Car Navigation Display _ 3D Motion _Page_05.png
Car Navigation Display _ 3D Motion _Page_06.png
Car Navigation Display _ 3D Motion _Page_08.png
Car Navigation Display _ 3D Motion _Page_10.png
voiceassis-ezgif.com-crop.gif
Car Navigation Display _ 3D Motion _Page_07.png
Car Navigation Display _ 3D Motion _Page_09.png
Car Navigation Display _ 3D Motion _Page_11.png

Simulated the conversation scenario

The demo presents an end to end integrated navigation scenario that guides the car to the selected office address. Addresses and meeting schedules are automatically accessed by the vehicle.

 

The assistance anticipates your needs and makes appropriate suggestions. 

 

The voice assistant is asked to confirm the address of the destination. 

 

The car is operating in autonomous mode, and a map shows the most updated road conditions according to the meeting location.

 

When the road is blocked due to construction, or when the car needs to take a different route, a map shows the optimal alternative road.

 

If the alternative road cannot be reached in time, it will inform you of the fastest route using another means of transportation. In the demo, the voice assistant makes suggestions to get to the destination by suggesting an alternative mode of transport the U-Bahn.

Scenario 2

 Here we are already on Route and the driver is concerned if they are going to make it to the meeting on time.

 

  1. The driver asks the voice assistant if he is going to get to the meeting on time. 

  2. The voice assistant suggests to the driver to attend the meeting via video conference. The assistant would take control of the vehicle during this time.

  3. When the driver does not take the suggestion, the voice assistant suggests to the user to send a message to a the attendees of the meeting, Saying that the driver is going to be late for the meeting.

 

This concept video shows how the voice assistant actively searches for a solution and options until the user makes a decision on what she or he likes.

Car Navigation Display _ 3D Motion _Page_14.png
11_Cloud-ezgif.com-video-to-gif-converter.gif

Animated 3D Icons

The icons in the UI were created based on the basic icon 2D asset.

2D icon Design is simplified, intuitive interfaces that reduce cognitive load and make it easy to interpret navigation instructions.

Ensure use consistent, universally recognized icons and labels to aid quick comprehension.

In terms of 3D animated icons. I took the basic assets and animated the three icons which were used in the concept video.

Car Navigation Display _ 3D Motion _Page_17.png

Multimedia

This is a scenario where the car battery is charged at a nearby charging station. I created a concept where the voice assistant in the car adjusts the car temperature as requested by the user.

 

While charging the battery in the car, the user asks the voice assistant to recommend new movies.

 

The voice assistant shows users the latest updated movies and series in the IN-CAR entertainment widget.

 

This concept video shows users how to change the car's function settings or change to an entertainment widget when the car is autonomously driving or charging the battery.

In addition to classic subscription applications, drivers continue to use the built-in media systems with the ability to connect external devices. 

Podcast

I this Scenario the vehicle assistance is offering the driver to CONTINUE TO LISTEN to the previously started podcast.

 

As the the mobile device of the driver links to the car,... the assistance knows about any ongoing media consumption.

 

In this interaction the Voice Assistance offer to continue with the playback of a podcast…

 

In this concept scenario, the voice assistant not only allows users to listen to music or radio, but also connects users to their favorite podcasts and allows user to listen to the podcast in the car.


 

In the added scenario the driver is changing podcasts with the voice assistance. At first the driver was watching a video podcast before  requesting the tagesschau podcast.

 

This concept video shows the difference between watching a video podcast and listening to an audio-only podcast.

 

Please NOTE that the vehicle would need to switch between manual driving by the driver and automated Driving by the vehicle assistant.

Battery Charging

This concept video begins with the voice assistant asking the user about the current status of the battery during autonomous drive. It asks the user for confirmation about reserving the next battery charging location.

 

At the same time, the display shows the remaining distance to your destination as well as the distance to next the charging station on route.

 

The vehicle needs to be charged before the battery runs out.

 

The navigation system also show a closer charging station that is outside the current route.

 

The navigator map shows the user the nearest charging station distance from the current distance.

 

This concept video uses a feature within the navigation app to recharge the battery while using navigation. The voice assistant shows the current battery usage, the location of the nearest charging station based on distance, and even makes reservations for charging stations where you need to charge before the battery runs out.

Car Navigation Display _ 3D Motion _Page_19.png
Car Navigation Display _ 3D Motion _Page_20.png

Prototype guide test scenario


1. Voice assistant interaction is possible. When the screen starts, say “Hello” or “Hi” to the screen.
2. The next command 'temperature up',

3. Tap '18 degrees' on the bottom left of the screen.
4. Press the 'Entertainment button' to switch between menus 

 

Protopie link

https://cloud.protopie.io/p/31394f43149f7d9a51d2f3de

 

Recording link

https://cloud.protopie.io/p/31394f43149f7d9a51d2f3de/r/72764976

bottom of page