Forklift Company Marketing Website
Our client, a prominent provider and manufacturer of forklift and warehouse solutions in the North American market, sought to revamp their marketing website to enhance the user experience and rejuvenate the design system. The new experience would guide shoppers in making informed decisions about the products, exploring solutions, finding dealers in their area, and purchasing the products. My team and I aimed to organize all the existing data in a way that makes sense and is easily searchable.
I joined the project as a visual designer to extend and apply the desktop and mobile UI based on the established design direction set by the designers who had been on the project from the start. Working alongside them—as well as the product and engineering teams—I helped translate their foundational look and feel into scalable interfaces, ensuring consistency while expanding the system across additional pages and use cases.
Role
Visual Designer
Applications
April 6, 2023
This past week, after a year of planning, development, and many late nights, we relaunched the new website. I could not be more proud of our team and their dedication to this project. It was most certainly a team effort, and I am so proud of what we released. Thank you to our internal team, Accenture partners, and Adobe team.
Reply
Design System
I helped develop a robust design system with over 600 scalable components and 95 styles. Following the Atomic Design methodology, we created atoms, molecules, organisms, templates, and pages for consistent design.
I lead two junior designers in capturing detailed documentation and annotation, which provided guidance for usage, variations, accessibility, and best practices for current and new designers.
This empowered the client's team to build cohesive, user-friendly experiences on their marketing website and simplified future updates and expansions.
** This color palette was created as part of a collaborative design effort with other designers on the team. I contributed to refinement, alignment, and application within the UI.
** These icons were created as part of a collaborative design effort with other designers on the team. I contributed to refinement, alignment, and application within the UI.
** The typography was created as part of a collaborative design effort with other designers on the team. I contributed to refinement, alignment, and application within the UI.
Applying styles to components
** not all components are shown
I created a loading animation GIF to add a delightful experience to the styling. The animation, designed in Figma, shows a forklift moving in a loading circle. This animation appears when information is being loaded, providing feedback to the user that the data is in the process of loading.
Loading Animation Gif
** not all designs are shown
I designed each page with responsiveness in mind from the beginning, ensuring that the experience feels intuitive, functional, and visually consistent across desktop and mobile. Rather than scaling elements down, I adapted layouts, navigation, and interactions to align with the natural behaviors and constraints of each device.
Compared to desktop, the mobile experience includes:
Multi-column layouts → reorganized into a single-column vertical flow
Full navigation bar → collapsed into a hamburger menu for condensed browsing
Breadcrumb navigation → simplified to avoid clutter and maintain clarity in smaller viewports
Side-panel map details → shifted below the map for tap-based interaction
Large hero imagery → resized and cropped to preserve visual context
Content density → reduced to focus on key user goals
UI interactions → optimized for touch-based gestures vs. cursor precision
