Duration: ~6-7 months
Elektrobit (EB) Automotive is an international supplier of embedded software solutions and services for the automotive industry. EB’s products power over 70 million vehicles and offer innovative software solutions for connected car infrastructure, human machine interface (HMI) technologies, navigation, driver assistance, electronic control units (ECUs), and software engineering services.
As the visual designer, I worked with Resources Online (which comprised of a team of a UX designer, content writers, editors, developers, QA and project managers) and product managers and marketing at EB Automotive to update the visual designs of EB Automotive's website, automotive.elektrobit.com, matching Elektrobit’s (the parent company) new corporate design. As part of this visual update, new content was added and site navigation and usability were improved while the majority of existing content remained the same.
Current and future customers were the main focus of the website. Current customers have a mid to high level of knowledge of EB Automotive products and services where they proactively engage/interact with EB Sales (by email or phone) with specific questions. As a result, this group does not visit the website for additional information nor do internal Sales and Support teams use or share content from the website with customers. Potential customers comprised of automotive industry employees who do not have a current relationship with EB, or they may be current customers of other EB products who are interested in evaluating additional products.
Key objectives that needed to be met for the design to be considered a success included the following:
To understand what we were starting with, we conducted a full content audit of the existing EB Automotive website, performing a comprehensive inventory of all pages, sub-pages, links, images, keywords, downloadable content, etc. This enabled us to reorganize site content to improve discoverability and idenitified key content areas that were missing, but needed to be created in order to support our key objectives.
Other activities in our discovery and planning stage included conducting a web survey to give us additional insight into EB Automotive's site visitors: who they are, what they were looking for, any painpoints they were having with the site, and their motivators. This surfaced content themes for the site, focusing on the following key messages:
Leveraging the initial corporate site designs from a Finnish agency, we adapted the design to meet the unique requirements of the Automotive division. This gave us clarity in terms of the overall look and feel of the EB brand.
The biggest opportunity for improving the customer experience was simplifying the top level navigation and the product level navigation. We worked with the EB team to understand and restructure the navigation so that customers would be able to understand the EB product line – how products relate to each other and synergies between products.
To enable visitors to easily find and consume information, we created a mega dropdown menu to display and organize large groups of content. When viewed on a desktop, we paired product and service photography with clear links and short descriptions to promote engagement and visual clarity of site sections – with minimal clicks.
For the mobile nav, we were challenged with limited above-the-fold real estate, which meant limited room for clutter. To save users from decision paralysis while being thoughtful about multi-level navigation due to the amount of content, we asked ourselves key questions like, “What links need to be included to help our personas complete priority tasks? What elements from the desktop navigation aren’t relevant in the mobile environment?”
To make our customers happy, we made our mobile-friendly navigation:
We used Bootstrap's 12-column grid system to build structure, consistency and form throughout the site's pages, leveraging how the grid adapts to be 724px and 1170px wide depending on your viewport. Below 767px viewports, like for mobile phones, the columns become fluid and stack vertically.
To achieve a modern look and feel with plenty of imagery and a clean, crisp look, each content block area was layered with high resolution images and graphics, videos and icons with typography and color to create a sense of organization, hierarchy, balance and rhythm. The use of white space and alignments create balance and associations between elements for a clean, simple and intuitive interface.
Second- to third-level pages were given a right sidebar, which contained carefully curated links and information, surfacing relevant or related content and product promotions. This right sidebar was created to become an important tool for gaining creditability and trust with the majority of our users by looking at this area as a place to drive important messages or actions.
A key area of the site is the Tech Corner. Internal EB Automotive teams and potential customers were challenged with not having access to the latest product brochures and data sheets to download, as well as information about news and events. To remedy this, we created the Tech Corner as a knowledge hub to be the central location where all types of content may be view and filtered by product and service. For example, a visitor can view all news items related to EB Autmotive's Infotainment, or all events related to EB Guide.
To scale Elektrobit's online brand, we adapted and extended the design to the email newsletters, ensuring we were conveying a consistent look and feel that customers, prospects and partners could trust. The Newsletter page template needed to work on phone, tablet, and desktop via both an email client and a browser.