Redefining Hertz's Digital Presence with a Cohesive Design System
Ignition, Hertz's design system, enables you to create a consistent and accessible user experience across all ecosystems.
The Hertz website, a key platform for booking car rentals, faced workflow challenges due to inconsistent design elements and interactions across the customer journey. A detailed evaluation and deconstruction of the site uncovered specific areas for improvement. To resolve these issues and ensure a seamless user experience, a design system was developed emphasizing accessibility, scalability, and consistency.
My Role
Website Deconstruction
Identified Inconsistencies Design System Development
Documentation
Duration
9 weeks
(Oct - Dec 2024)
Collaborators
Team of 4 UX Designers
Problem
The Hertz website faces challenges in scalability and efficiency due to inconsistent design elements, unstructured code, and the absence of clear design guidelines, leading to a fragmented user experience and inefficient workflows.
Solution
Create an integrated design system comprising configurable and consistent components, including a Ul library, a Figma Ul kit, design tokens, and specifications.
Process
01. Deconstructing the
Platform to Uncover
Gaps
To gain a deeper understanding of the Hertz's platform, we began by conducting a comprehensive design audit. Leveraging the Atomic Design Framework, we deconstructed the existing design system into its foundational elements to identify and document critical gaps across components, patterns, and layouts.
Lack of Uniformity within Buttons
Font sizes, dimensions, shapes, and text alignment lacked uniformity, creating a disjointed visual identity.
Homepage search
Modify the search
Homepage subscribe
Log in
Sign up
Checkout
Rent an ev
Typography Disrupts Visual Consistency
Excessive font styles made it challenging to maintain consistency and clear structure.
Forms Created a Disjointed Experience
Mixed use of old and new form patterns led to confusion, inconsistent user flows, and reduced usability.
Key Inconsistencies
Build and Test Phase
03. Building and Refining the Figma UI Kit
With our principles in place, we moved into the build phase to develop a scalable and efficient design system. Using Figma, we created a comprehensive UI kit with reusable components and modular patterns, streamlining the design and development process.
Consistency
A unified approach that ensures a seamless experience across all touchpoints.
Scalability
A flexible framework that adapts to new features, products, and growth.
Accessibility
Design that meets standards to serve all users, regardless of abilities or devices.
02. Defining Our
Principles
After uncovering key inconsistencies, it became evident that the lack of structure and cohesion was creating fragmentation and inefficiency. To resolve these challenges, we established a strong foundation through clear brand and design principles. This foundation provided a guiding framework to streamline workflows
Organisms
Combining Components into Purposeful Page Sections
Full Built Sections
By combining interactive components, we assembled fully functional sections such as headers, footers, forms, and cards. These sections act as the building blocks of pages, ensuring users can navigate their journey seamlessly.
Molecules
Scaling Basic Elements into Flexible, Interactive Components
Components
Building on the foundational elements, we created functional and flexible components—buttons, dropdowns, input fields, chips, and breadcrumbs. These components adapt seamlessly across various use cases and layouts, ensuring consistency and usability.
Atoms
Tokenised the smallest re-usable elements
Foundation
At the foundation of Ignition are the smallest, reusable design elements—colors, typography, spacing, icons, elevation, etc. Establishing consistency across the entire product makes scaling and adapting designs easier.
Ignitions’ Star Qualities
⭐️
Enabling Scalability and Customization with Tokens and Variants
⭐️
Reduced Colors with WCAG Contrast Standards
⭐️
Enhanced Input Fields and Forms with Visual Feedback and Textual Support
⭐️
Streamlined, Modular Typography for Visual Hierarchy
Usability Testing Highlighted the Need for Clear Usage Guidelines
We tested the UI kit with other designers by asking them to recreate pages from the Hertz website using the system.
During the session, we observed their experience and gathered feedback.
Identified issues like missing components, scaling inconsistencies, and lack of grid system.
Based on these insights, we refined the kit to improve its functionality and usability. The updated version was then published to the Figma Community for others to access and use.
04. Strengthening the System with Comprehensive Documentation
We hosted our design system on Zeroheight, creating a central hub that serves as the single source of truth. It houses design principles, accessibility standards, components, and best practices, ensuring easy access and seamless collaboration for all teams.
Quick access to key sections, divided for clear content segmentation and efficient navigation.
Components are stacked vertically for clear visibility, enabling quick access and easy exploration of specific elements.
Components are divided into:
Usage: Best practices and guidelines.
Variants: Visual styles, states, and configurations for adaptability.
Pitch Deck
Why the Hertz Team Should Embrace the Ignition Design System
We prepared this pitch for internal stakeholders to showcase how Ignition delivers tangible advantages—saving time, resources, and costs—while improving collaboration, consistency, and scalability across all teams.
Takeaways & Reflections
“It’s like a team playbook”
Systematic Thinking
Building and using a design system has taught me to document and define interconnected elements, including the UI kit, style guides, UX principles, and best practices. I learned to balance high-level hierarchy with attention to detail, ensuring a cohesive and scalable system.
Improving Naming and Expanding the System
I would refine the naming conventions within the system to make it easier for my team and me to identify complex components and understand how they interconnect. Additionally, with more time, I would conduct a thorough site evaluation to ensure the design system is expandable and fully comprehensive.
More Projects
Get in touch!
let's connect and build together.
© 2025 Nidhi B Gowda
Mobile: (914)-308-6701