One Eriks

Rethink and redesign the web and CMS strategies for Eriks

Eriks is an international industrial provider for mechanical components and associated technical services and solutions. In its transition from traditional component provider to MRO (maintenance, repair and operations) supplier, the corporate is in an urgent need for holistic strategy and design system to reshape its brand image and encapsulate all its subsidiaries globally.

Our team at Mirabeau starts with one of its biggest footprint – the United Kingdom and its country website while taking a holistic approach in consideration of different branches globally. Together with Eriks, we decided to build up the website and CMS based on Adobe Experience Manager with Atomic Design Strategy to break down design elements for easy implementation.

The first version of new corporate identity is live recently.

Personal contribution: Customer journey mapping; Content strategies; UX flow; User test plan; UI implementation; Motion demo

Team: Bas Poppink (Senior Art Director), Koen Huiskamp (Visual Designer), Lisette Halff (Project Manager), Peter Pronk (Front-end Developer)

06/2017 – 07/2017

Eriks_screenshots

The project vision is to establish strategy and design templates with consistent view and clear customer journeys for eriks.co.uk website. With a consideration of Eriks future goal and service transition, the design is also proof of concept to be used on other platforms.

The templates are designed with Atomic Design methodology and are consist of reusable components to formulate consistent design patterns throughout eriks.co.uk and beyond. This project is part of a program to build a coherent global brand that fits the “One Eriks” strategy.

The goal of this program is to set up a design system, starting with redesign eriks.co.uk to set up a design system, of which UX patterns and design components will be used for other country websites, product business unites, services and related brand websites.

The motion demo was created within one day for fast demonstration of how different components interact with each other to bring focus for the interaction and attract user’s attention.

Foundational Workshop and Research

To prepare knowledge base, I initially mapped out the existing sitemap of eriks.co.uk to define questions and brief the project team about potential problems.

Eriks_sitemap

Eriks_workshop
Eriks_touchpoints
Responsive image

The project was kicked off with a workshop between the Mirabeau team and Eriks. Stuff from marketing, sales, MRO and recruitment team joined to provide insights from all different perspectives. The workshop aimed at creating main personas and experience mapping for each of them. Since there was no real user involved at this stage, we kept questioning their propositions of customers to stimulate thoughts and reflections.

Typical users of the website are engineers, engineer managers, purchasers and product designers. Each persona comes to the website with own goal and attitude. In order to serve the need of each persona on different phase along their customer journey and formulate the right lead generation, I broke down their actions into omni-channels and mapped out touch points on the website of eriks.co.uk.

Another big challenge is to change the perception of customers from product-orientation to service and solution awareness. Most of customers consider Eriks as component provider without realizing its expertise in know-hows, services and integrated solutions. With content strategies and priorities, it is able to re-establish the connection among product, service and solution. Benchmarking with successful samples helped in this process.

. . .

UX flow and Content Priority Guides

After defining the touch points of components and pages of the website along customer journeys, I started remapping UX flow with important content types. To take a responsive website approach, content priority guide without interference of wireframe compositions were created to think about the importance of contents for each page. Suggestions were given on how to provide better contents and how to properly tag contents to establish correlations.

Eriks_UX flow&CPG

Eriks_user test script

Based on the customer journey and touch points, I made user test plans. Considering the time constraint and recruitment effort, two main personas were selected for testing, the purchaser and engineer manager to cover most aspects of the websites. Typical assignments were given to cover key interactions we intent to test. Think-out aloud methodologies were applied to empathize with their hurdles and thoughts.

. . .

Atomic Design Components

The final design was created with Atomic Design methodology to break down UX components and built in Adobe Experience Manager as an CMS (content management system). Our team provided style guides on how to build up and use these components in a proper way. An example is given below to break down into atomics such as fonts, colors to molecules such as buttons and content boxes.

Eriks_atomic

Navigation

As the main interaction designer and content strategist of this project, I was in charge of the interaction and visual design of navigation menu, including the visual layout of three main sections, product, service and solution, relevant lead generation and contacts and how to bring focus and attention into services and solutions. Pragmatic consideration of auto-hiding navigation and using breadcrumb to indicate information depth and quick search with search history stored were also encapsulated in the final proposals.

Eriks_navigation

. . .

The design is based on a responsive 12 column grid with a maximum width of 1440 pixels. At its widest appearance, the columns are 65 pixels wide with gutters of 33 pixels.

Eriks_responsive

Eriks_regionalhub