web design

Hyster & Yale

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. This would be the first step in their global web transformation. The new dealer portal should make it easier and more effective to do business with HYG and to provide dealers with secure access to materials and applications for Hyster and Yale across the Americas, EMEA, and JAPAC regions. The 4 key persona groups were truck dealers, parts dealers, marketing dealers, and service & warranty dealers.
my role

​UX Designer at Vertic. I worked 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 pages, news, and resource libraries.

Company

Hyster & Yale is a leading, globally integrated, full-line lift truck manufacturer.

Year

2019

problem
The old portal was not serving the needs of different user roles and content needs.

Dealers want content to be personalized and only want to see content relevant to their role. Usability issues inhibit dealers from engaging with content due to the poor search functionality and the navigation.

goals
Improve the usability of the portal for users to explore content and get the information they are looking for.
Digitalize request and information exchange between HYG and the dealers.
Increase the stakeholder net promoter score.
research insights
Interviews with dealers were set up to identify their pain points and to understand their experience using the portal. Stakeholder interviews were set up to define the business objectives and KPIs.
  • Portal lacks personalization.
  • Poor search functionality and navigation.
  • Most of the portal usage is on desktop, but a good tablet and mobile experience is essential for dealers supporting off-site tasks.
  • Content within the portal is outdated. Often, search results may pull up information from 8 to 9 years ago.
  • Due to the usability issues dealers are not engaging with the content.

Note: I joined the project after the discovery phase and the sitemap were done by the UX Lead. I read the research done by the strategy team to understand the business objectives and the end users. I wanted to integrate the brand and digital strategy into my design thinking to ensure experiences were user-centric, aligned with business goals, and delivering meaningful and relevant experiences.

THE PROCESS
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. 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.

challenges
There were challenges developing the design system.
  • No access into the portal. We had to work off of screenshots.
  • Content is handled very different across the 3 regions.
  • Functionality constraints due to short development timeline.
  • Strict branding guidelines within Hyster and Yale.
wireframes
Product overview template

The product overview template would be used for the trucks, solutions, and parts overview page. A template for dealers to get an overview of all trucks, parts, or solutions. The list would be displayed in alphabetical order from A-Z. I recommended the idea of using icons as a way for users to quickly recognise and identify a truck, part or solution. The reason for this is because in the portal a lot of the images used today all look the same. As a team we agreed that the visual designers would build out unique icons for the Hyster and Yale brand.

Product category template

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 template

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 features 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. Content editors have flexibility in building out pages because not all modules are required within a template.

key learnings
What I've learned throughout the process

A 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.