Client:
AVL
AVL is the world's largest independent company for the development of Powertrain systems with internal combustion engines as well as instrumentation and test systems.
I had a pleasure to dive deep into the world of car technology, learn a lot about automotive cars, battery solutions and the future of the car industry from the first hand. By learning all this technological news, I tried to put myself in shoes of an average car engineer. AVL website is used daily by millions of engineers from all over the world, they do it mainly to learn or find relevant information. As all of them look forward to the future and are passionate about their work, I wanted to reflect their view with a new futuristic experience on AVL site.
Complexity of content available on this website is enormous.
Biggest decision was of course around main navigation. Four main products would be always visible in the header area (solutions, powertrain elements, industries, support).
Hover friendly navigation helped to naturally browse through categories tree.
Deeper on a product page, except of the main navigation, category with products would be also visible to quickly access similar search results.
After browsing through endless avl products and solutions, I have created a landing page template, which could be easily managed by content managers. At the end of the each landing page would be similar products list and an option to start individual journey. Thanks to this user could browse products one after another and in the end, save his results in the cockpit.
Trying to give the future, fresh feeling, I've created futuristic UI elements.
A B C D E F G H I J K L M N O P Q R S T U V X Y Z
a b c d e f g h i j k l m n o p q r s t u v x y z
1234567890
View of a user panel. After logging, user could see recently browsed content, news related to his search, saved user journeys, recommended user journeys and a number of different available services. From this panel user would be able to arrange his view by adding/removing and rearranging modules.
Example of a video player on a landing page.
Header of a landing page, with a sticky menu at the bottom.
