Launched: 2015
Duration: ~6-7 months

Elektrobit Automotive Website.


Background

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.


Overview

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.


Challenges

UX challenges:

  • Overall IA and structure of the EB sites from corporate to automotive were not consistent, uniform or anticipatable.
  • The navigation and product overview pages were somewhat confusing and challenging for customers to discover and act on.

Content challenges:

  • Overall IA and terms used in navigation was confusing and made information hard to find.
  • Product information was structured based on the corporate site.
  • Brochures, data sheets, and graphics used to explain products and services were either outdated or missing.
  • Social media presence and ways to access were hidden.

Visual challenges:

  • Corporate site presented a dark and mysterious EB brand (designed in 2007).
  • Automotive division's site was last updated in 2012, which followed a refreshed EB look and feel at the time.

Audience

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

Key objectives that needed to be met for the design to be considered a success included the following:

  1. Design must match new corporate design, although we would adapt the design to meet EB Automotive's unique requirements in certain areas.
  2. Improve discoverability and usability of the site navigation, reflecting how customers think about products, rather than reflecting the internal organizational structure of EB. This means telling a cohesive story from a solutions perspective.
  3. Improve customer understanding of the EB product line, including how products relate to each other and and synergies between products.
  4. Build customer awareness of EB thought/industry leadership by discussing vision and solutions (in addition to current product focus).
  5. Design must be responsive when viewing across desktop, tablet and mobile web browsers.

Content Audit

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:

  • Who is EB Automotive?
  • What do they do?
  • How do I become a customer?
Early Concepts

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.


Site Navigation

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:

  • Short and sweet whenever possible
  • Easy to read
  • Task-oriented
  • Accessible and placed consistently across all pages
  • Clear, straightforward and expected
  • Vertical if scrolling is required
  • Easy on the eyes
  • Finger-friendly
Visual Design

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.


Solutions Pages

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.


Tech Corner

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.


e-newsletter

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.

Like what you see?

Lets start talkin'

Copyright © 2013-17 Kat Estacio. All Rights Reserved.