Enicar Connected kit cover image (black box, screen & cameras)

The main idea behind the Enicar Connected system is taking technology found in modern luxury cars and providing a kit that offers these features for older cars (even a Ford model T). It is a kit that transforms the car to a smart\connected car. A full infotainment center including GPS navigation accompanied by a wide variety of advanced tools for safety, security and comfort all placed together in one system with an “All In One” approach. The kit is composed of a main processing unit (a “Black Box”), an LCD touch screen (7” / 10”), Cameras, sensors, antennas and all the necessary wires and connectors. Once installed, the unit is tapped into various modules in the vehicle and all the control is done either from the main LCD screen installed in the cabin or remotely from a dedicated mobile app.

Kit features:

UI/UX Design Process:

During the development process of the UI/UX of the system, the first step was understanding what each feature requires graphically (a button, a viewport, an indicator etc.) and creating a hierarchy division of the importance of each feature we previously decided to implement in the system. This step was crucial as the real estate available from a graphic point of view was limited in relation to the quantity of features we wanted to offer and also the fact that ease of use was extremely important.

If we examine the way the UI of a modern luxury car is built we can see that, in most cases, each feature of the vehicle is controlled from a full screen page dedicated solely to that feature. This means that the user has to go through many screens, menus and sub menus to find the feature he wants to use\control. It could be very confusing and frustrating at times. I wanted to create a UI that eliminates this aggravation and provides a faster and safer operation of the system.

The design concept was creating a “digital dashboard” that would offer the direct control \ readability  of as many features \ indicators as possible directly from the main view (without cluttering the screen) and to avoid using sub menus as much as possible.

First design decision:

Use a 3 screen layout with a swipe right/left transition.

The next step was using the hierarchy division of feature importance in order to distribute the features between the 3 screens.

Left screen
  • Camera views
    (backup camera / 360° camera system)
Central/Main screen
  • Main menu & settings
  • Exit app
  • Infotainment controls
  • Vehicle setup and auxiliary GPIO controls
  • Central locking
  • Light controls
  • Hazard lights
  • A/C control
  • Mini navigation viewport
  • Power windows
  • Vehicle system status  
    - Temperature
    - Battery
    - Oil pressure
    - Tire pressure)
  • Phone control
  • Internet browser access
  • “Tap” access to secondary screens (Left/Right screens)
Right screen
  • Navigation

The Left and Right screens (Camera views and Main Navigation view) both host features that are most comfortable to view/use in full screen mode, they both should have the control menus required for their operation and these menus should be hidden/un-hidden to allow a complete full screen view.

The central screen hosts a larger set of functionalities as this is the Main view on which users will spend most of their time and from which most of the system features should be accessed & controlled.

Now with a general distribution of the features created it was time to start thinking of the appearance, graphic design and specific allocation of each element. As mentioned previously, the design concept was creating a digital dashboard. The experience should feel as if the 3 screen layout is a single element inspired by real car dashboards were each segment is reveled seamlessly by swiping right or left.

An additional subdivision of the central screen was required in order to distribute and allocate the various elements. As the Left & Right screens both host a single function, it was only necessary to find the correct position for the control menus and to consider the visual relation of these screens to the central screen.

(Hover over image)

The final result is a coherent interface where common/standard icons guide the user towards an intuitive and easy operation of the system. Providing additional skin choices for the user to select from allows the user to personalize the appearance and creates a better experience.

As the Enicar Connected system offers a large amount of features and controls it is impossible to allow all the controls directly from the main view. The solution was to place the most important controls of a certain feature from the main view and to allow direct access to a dedicated view for the specific feature where all the controls of that feature are available. done using that feature? tap back to the main view. If we look at the top viewport (Infotainment) we can see that in the main view we can control the play/pause, previous/next track, volume etc. but we cannot view the track list and manage the media library. Tap on the song\station name and a new view dedicated to this feature opens.

FM Radio screen
Web Radio screen
Personal Media screen

The phone is an example for a feature that cannot be operated directly from the main view (incoming calls excluded) but has a direct link from this view. Tap the phone button and a new screen opens with the phone controls. done? tap back to return to the main view.

Phone screen

In order  enhance the UX, I designed a selection of skins the user can choose from to personalize the appearance. By sending a pattern or surface image, users can request specific skin styles and colors to match their specific vehicle interior/exterior appearance (custom order). Obviously future updates of the system would contain new skins.

One of the most important features of the Enicar Connected system is remote accessibility and control. This is achieved  by using  a dedicated mobile app. The same guidelines of the main app were implemented during the design phase. The graphic concept was to create remote control feel that would recall the design of the main dashboard (chrome frames, carbon viewports etc.) and would be easy to use with one hand. The app allows a variety of function such as power locking, remote ignition, A/C control, media control, lights, TPMS/oil/battery status etc.. The app also provides live GPS location of the vehicle and it will notify the user of any unpermitted action on the vehicle (door/hood/trunk open, ignition etc.), the notification will lead to a page with the trigger details and a live map of the vehicle position and camera views. To enhance the connection between the mobile app and the main app they both will have matching skin choice options.

Mobile App main view

For more info about Enicar Connected visit www.enicarconnected.com
(Website was created by me using the Site123 platform)

Back to TOP