A Simple Interface Design for Drivers.
Overview
The current UI/UX design for automobiles has a confusing design that contains too much information and functions. This project aims to design a comprehensive and futuristic interface design for an electric automobile.
Typefaces: Roboto
Mood: Simple, Cohesive
Created: 2020
The layout is formatted based on the organization of function and is ordered in the hierarchy of usability. The top tier is near the driver’s side, making it easier to see and interact.
A - Dashboard/Status
Most necessary car statuses are located in this area.
B - Tab Selections
There are seven functions located in this area.
C - Main Pages
The main pages are designed vertically as a carousel, moving vertically with the tab selection or swiping vertically.
D - Quick Menu
A quick menu will appear by dragging the section to adjust the climate control or the media.
Each of the sections are designed for the user to easily navigate through and see the status of the car easily.
The vehicle page consists of the car's external control (windows and doors), the status of it being locked, and the tire pressure.
The navigation page is designed in the simplest form for the user to select the saved locations or find parking locations while in the car.
Media is divided into two sections, music, and radio. Music is connected to either the Spotify or Apple Music account. You can also connect your phone to use other music player applications. In the radio section, you can change the channel through the scroll features or use the favorite list to choose the channel you want to listen to.
Voice Assistant will assist you in controlling this car's interface features. When selecting this page, the voice assistant is ready to hear your command and execute them for you.
Through this phone page, you can call through the number pad or the contact lists that is synced to your phone. You can also send messages through this page which overlays a new page with a keyboard for you to type.
Climate controls on the right section gives you the control for all the A/C features in the car. It also has a feature where you can adjust the window tints to your liking. The left sections are specified or the front driver and passenger seats.
All of the adjustments for the features in this interface can be done in this sections.
Prototype was built with Figma to show the functionality and the visuals on the interface. Three scenarios of the functionalities are built in this prototype.
Check the Figma prototype with the text link below.
Electric Car Interface Figma Prototype
Check the process on Behance.