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.
Hyster & Yale is a leading, globally integrated, full-line lift truck manufacturer.
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.
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 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.
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.
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 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.
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.