LEXI_LIN

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 start 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 and maintenance.

The new corporate identity is live currently.

Personal contribution: Client workshop; Customer journey; Content strategies; UX/UI design; User test; 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

Project Background

The client approached us with the problem of their currently weak digital presence and lack of message on their MRO services.
This project is the starting point of their digital transformation to rebuild the whole brand identity and to improve usabilities across websites under the global strategy of “One Eriks”.

Majority of current customers perceive Eriks as component provider without realizing its expertise in know-hows, services and integrated solutions. Through content strategies and priorities, it is able to establish the connection among product, service and solution, while putting emphasis on the later.

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

. . .

Foundational Research and Workshop

As someone not familiar with the website and services provided. I decided to conduct a cognitive walkthrough as first-time user to search for relevant information and getting to know the company and its services. In the meanwhile, to prepare for my knowledge base, I mapped out the current sitemap to define potential problems for discussions before our workshop and meeting with client in Dudley, UK.

Eriks_sitemap
Eriks_workshop

Our co-creation workshop with client focused paramountly on gathering latent information from different stakeholders, defining personas of their main customers and mapping out customer journey and digital touch points especially on MRO services.

Staff from marketing, engineering, sales, MRO and even recruitment department are invited to join the workshop to provide insights from different perspectives. Since we are not able to invite real target users (the ones visit Eriks websites) at this stage, we are paying extra attention to question client’s thoughts and to prevent bias to disclose the fundamental needs from end users.

As a result from the workshop, we defined that

Typical users of Eriks website are engineers, engineer managers, purchasers and product designers. The workshop helps us to understand different type of users and purposes of landing on Eriks.co.uk.

For instance, an engineer lands on the website mostly for product information or MRO support; a purchase lands on the page mostly for vast product information and getting contact with relevant people immediately.

Eriks_touchpoints
Responsive image

Personas are created based on insights from the workshop about their different goals, attitudes and behaviors.
Customer journeys are later broken down into each type of users across omni channels and touch points with Eriks digital presences especially the main websites. Potential feature improvements or missing links/contents are highlighted in this process to prepare knowledge for the redesign process.

Keeping the problems and design challenge in mind, I started the process with firstly benchmarking with other similar product and service providers and how they present their service in a narrative and supportive way.

. . .

UX flow and Content Priority Guides

From the research and workshop, we know that users land on the page based on different needs and purposes. It is my role as an interaction designer to define important touch points to work on and leading users to achieve their goals through content strategy and information architecture.

The UX flow was created with color-coded flows and content to represent each type of users and their most relevant content and features. The content and features help to define information architecture and priority for each web page.

To take a responsive website approach, I started with mapping out content priority guide for key web pages. This helps to bring focus on content priorities and management without interference of any layout or compositions. Suggestions were given on how to provide high-quality contents for better user experience and how to properly tag contents for an effective CMS.

Eriks_UX flow&CPG

. . .

Design Development

Working closely with a visual designer, we continued the design development with wire framing page layout and content presentations, from both interaction and visual perspectives.
Several templates for key webpages were settled down for design iterations and visual refinement.

Eriks_Designdevelopment

. . .

User Evaluation

Before we define the content layout and visual elements for our design deliverable. As the interaction designer on this project, I planned a user test session to evaluate the usability of our design proposals and detect areas for improvements.
With the help from our research team, I also included SUS score and product reaction card for a product overview evaluation. The whole process was recorded on screen and their facial expressions was observed together with think-out loud method.

The best scenario is to test the design proposal with all five typical users. Considering the time constraint and recruitment effort, we decided to invite two types of persona to participate in the user test session, engineer manager and buyer.
The rationale behind this is that engineer manager has the largest footprint across the website, ranging from product to service to solutions. While buyer will have a complete perspective provided compared with other personas.

The test focus on evaluating two major stages of content strategy and usabilities of the website, searching for the information they need and establishing right knowledge or contact with Eriks.
Attention are given to test goals such as "are they able to navigate easily to find the right information they need”, “do they feel guided along the process and if the information are sufficient” and “what do they perceive the service and solutions provided by Eriks”.

Eriks_user test script

. . .

Final Design Proposal

The final design was created with Atomic Design methodology to break down and define UX components as reusable atoms, molecules, organisms, templates, and pages to be used in Adobe Experience Manager as the CMS (content management system). Our design team provided style guides and principles on how to build up and reuse these components according to visual design rules and front-end development.

Examples are given below with atomics such as fonts, colors to molecules such as buttons and content boxes to organisms such as service introduction and navigation bar.

Eriks_atomic

Eriks_regionalhub

Navigation

As the main interaction designer and content strategist of this project, I was also in charge of the final interaction and visual design of navigation system, including visual layout of three main sections, product, service and solution, relevant lead generation and how to bring attention to services and solutions.

Pragmatic consideration about scroll-to-review navigation, breadcrumb to indicate information depth and quick search with search history 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