Hyster & Yale Dealer portal redesign

Client Overview

Hyster & Yale Is a leading, globally integrated, full-line lift truck manufacturer offering a broad array of solutions aimed at meeting the specific materials handling needs of customers’ applications.

My Role

​UX Designer at Vertic working alongside the UX Lead of the project. I was responsible for designing wireframes for these sections of the HYG Portal: Trucks & parts product pages, supplier pages, solution sages, news, and the resource libraries.

Timeline

February 2019 - April 2019:  Discovery & Implementation Planning

April 2019 - September 2019: UX, Visual Design & Development

Project Background

A global web transformation to provide dealers with the resources they need to sell more.

The first phase of the project was a redesign of HYG's current dealer portal and a migration of content from the LogicBay platform to Episerver. The new dealer portal should make it easier and more effective to do business with HYG and to provide secure access to materials and applications for Hyster and Yale across the Americas, EMEA, and JAPAC regions.  

Understanding the Problem

"The learning curve is huge, I have to keep digging to find things."

Portal is not serving the needs of different user roles and content needs

Currently the portal lacks personalization. Dealers want content to be personalized and only want to see content relevant to their role. 

 

Poor search functionality and navigation

Users have to navigate through several levels to find what they are looking for. The search experience is not optimized to help dealers filter down to what they are looking for.

A device agnostic experience

The portal is not optimized for mobile usage. A majority of the portal usage is on desktop but a good tablet and mobile experience is essential for dealers supporting off-site tasks.

Lack of organization in content management

Content within the portal is out dated and has inaccurate news, promotions, and product information. Often times search results may pull up information from 8 to 9 years ago.

Lack of content engagement within the portal 

Portal usability and navigation inhibits dealers from exploring content within the portal. When dealers can find the content they are looking for it does add value to their role, but due to the usability dealers are not engaging with the content.

Lack of portal onboarding

There is a steep learning curve for the portal. Dealers are having a difficult time onboarding new employees.

Diverse content across different regions

Content is not consistent across the three regions. Even though the regions are all under the same mother brand, business is done very differently across the regions which creates a very siloed experience on the portal.

The Strategy

Collecting user data to inform our design system.

The 4 persona groups

There are 4 key groups of dealers that exhibit similar intent, hold similar roles, and have similar information needs.

Truck SalesDealer

Part SalesDealer

MarketingDealer

Services & WarrantyDealer

Strategy ambition

  • Usage: Improve the usability of the portal for users to explore content and get the information they are looking for.

  • Engagement: Digitalize request and information exchange between HYG and the dealers.

  • Satisfaction: Increase the stakeholder net promoter score.

The Process

Atomic design system

We used the Atomic Design system to wireframe the foundation of the portal. The key idea behind this methodology is that small, independent atomic parts, can be combined into larger molecular structures. We had to consider all the details that go into creating and maintaining a robust design system and standardize modules. The atomic design system allows our teams to build products faster and develop consistency across each and every touch point.

Templates & organisms

We were using the atomic design system to build the HYG portal. Therefore, we weren't designing every single page of the website. We created templates that would have to meet various content needs across the portal. We defined which templates would be used for every page in the sitemap, which helps the content editor to build pages.. Each template would consist of organisms or modules that could be reused across the portal.

Tech validation

We validated all of the wireframes and design with the Development team before reviewing with the client. This was to make sure that we weren't adding too many complex functionalities that would increase the development time. As well as not creating too many different variations of modules. Keeping development in the loop and brainstorming on solutions made it easier for the team to be aligned throughout the process. 

Discovery

The team used various research methods to collect insights.

I joined the project after the discovery phase & the sitemap was done by the UX Lead. To understand the business objectives and the end users I had to onboard myself onto the project reading through the research findings done by the strategy team. The approach for the project was to integrate the brand and digital strategy into our design thinking to ensure experiences are user-centric, aligned with business and project goals, and delivering meaningful and relevant experiences. The UX and Visual Design team worked in parallel to meet the development deadline but faced these constraints:

  • Functionality constraints due to short development timeline.

  • Limited visibility into the existing portal due to competitor advantage.

  • Strict branding guidelines within Hyster and Yale.

Stakeholder Interviews

  • 8 stakeholder interviews were done to define the business objectives and KPIs.

  • Stakeholder Interviews gave us insight into what the ambition for the business was and the key areas of improvement.

User Insights

  • Strategy conducted user interviews with dealers from different regions to understand pain points and content needs.

Competitor Research

  • Conducted a study on external and internal competitors on their navigation, product pages, dashboards, and overall content engagement.

Analytics

  • Strategy analyzed current visitor behavior using Google Analytics.

  • Determined pages with high or low click through rate.

The Solution

A new dealer portal optimized for usability and findability across different regions and two brands.

Product overview page

We used the atomic design system to build the portal. Therefore the product overview page was a template used across several pages within the portal for trucks, parts, and solutions. In developing our design system we chose to use icons as a way for users to quickly recognize and identify a truck, part or solution they are looking for. Part of the reasoning for this was because a lot of the images used today in the portal all look the same. It is difficult for users to differentiate truck models or a specific part.

Product category page

The structure and layout of the page was influenced by e-commerce product pages. This template was used for trucks and parts. On the left, users can use the filter panel to refine the list. Each product card will show users attributes about the product before they are taken to a product detail page.

Product detail page

Product detail pages are where dealers can get all resources and documents related to a specific truck model or part. There is a main hero area that can feature a carousel of images and general information about the product. There is an in-section navigation within the product pages. Once a user scrolls to the in-section navigation the top header disappears and the in-section navigation sticks to the page. On click of any of the categories the page will jump directly to that section of the page.

Resource library

Most of the HYG dealer portal is a resource library for dealers to collect of the the documents and resources they need to sell. This template would be used across multiple different areas of the portal. I added a section for users to be able to see the lastest new content and announcements. Similar to the product category page there is a filter to refine the list of documents and tools. When a user applies filters the filters they applied list above the documents. An alternative is for users to use search to refine the list. If their search yields no results there is a no results found state of the page. 

Key Learnings

What I've learned throughout the process. 

Design system is key for scalability

Prioritizing the time to look at elements from the atom level and building a consistent and functional design system is key for scalability. The first phase of this project was focusing on the dealer portal. But, we were able to start the foundation of a system that will be scalable to redesign the .COMs for Hyster and Yale.

Team alignment

The UX and Visual Design team were working in parallel throughout the process to meet the tight development deadline to launch the new HYG portal for the two brands. At times there was miscommunication but using a task management tool to handover work, log communication, and keep accountability is key to keeping everyone on track with deliverables and decisions being made.

The Team

Thank you to everyone for making this project happen!

Strategy: Jackson Liang

UX Director: Stacey Eggimann

UX Lead: Anna Deu

Visual Designer: Ben Nusbaum

Development: Vertic Development Team

Get In Touch

Work inquiry, question or just want to chat? Email me.

You Can Also Find Me On

Linkedin     Behance     Instagram