AUTOMOTIVE INFOTAINMENT DESIGN SYSTEM

As of Feb 2022:  This page will serve to show my continued efforts and iterations of a component-driven automotive infotainment design system.  I plan to map out the information architecture, flows and display prototype video examples.

TOOLS: FIGMA & PHOTOSHOP

ICON SOURCE:  Car & Equipment Graphical symbols (icons) by Andrey Krivenko (Note some SVG may be sourced from storyset.com)

Demo of 16:5 Infotainment Screen - Home, Climate & Navigation Screens Shown

Note: "Back, Home & Power" buttons are shown to represent physical hard buttons outside of the infotainment system.  They are not purposely designed in a way that matches any design styles found within the iterations of the screens.


COMPONENT DRIVEN DESIGN SYSTEM

Top Figures:  Here you can see various components for major button, widget and screen styles.  All variants are nested accordingly with the respective default component.


Lower Figures:  Various screens are shown for 4:3, 16:9 and 16:5 screen sizes.  Nested in each frame will be the components as seen above.


An example of determining, grouping and mapping out the information architecture.  There is a lot more to go still then what is shown here!


Feb 16, 2022:  Details showing two additional variants for the climate control display in 16:5 format.  The top variant leaves space on the right for various widgets.  The bottom variant closes the widget to expand the climate screen fully.  In the video demo, you can see a weather forecast screen is added to the negative space.


Off to the right and bottom, you can see the additional components and variants for the air flow  & fan speed icons.

Demo: Main Climate Control Screen, Detail of Collapsing Widget and Full Expansion of Climate Screen


The following shows an example of a swipe-able carousel for the main icons on the home screen, this time in a 4:3 format.


Originally I found in Figma that the drag interaction does not specify which direction to go, in this case I wanted left & right.  However, by laying out the variants of the carousel components visually the way I wanted, and adding two interaction nodes (one to go right and one to go left), Figma defaulted the right and left actions correctly.


Note:  If I make the interactions go from variant to variant the above method did NOT work.  However, if I make the interaction go from the icon nested in each variant to the target variant, it works!  However, this can limit the swipe-able area  to the container size of the icon.

      

Demo: Carousel Swipe Left/Right


Powered by SmugMug Owner Log In