DESIGN SYSTEM

Building a scalable and consistent design system for Hertz.com

Building a scalable and consistent design system for Hertz.com

Duration

6 weeks Oct 2023 - Nov 2023

My Role

Deconstructing the site, Creating components, Testing, Documenting

Team

Sakshi S (me), Jimin, Kiyo, Nidhi

WHAT IS HERTZ?

WHAT IS HERTZ?

WHAT IS HERTZ?

Hertz is a platform for booking rentals, managing reservations, and accessing services like car sales and loyalty programs

Hertz offers a range of services including vehicle reservations for cars, vans, trucks, as well as specialised collections like electric vehicles (EVs) and luxury cars. Beyond rentals, Hertz.com provides access to additional services like car sales, loyalty programs (e.g., Hertz Gold Plus Rewards), and business solutions for corporate and government clients

PROBLEM DEFINITION

PROBLEM DEFINITION

PROBLEM DEFINITION

Hertz’s digital platforms suffer inconsistencies across their websites, leading to a fragmented user experience

Hertz’s digital platforms suffer inconsistencies across their websites, leading to a fragmented user experience

Inconsistent UI across pages

CHALLENGE

CHALLENGE

CHALLENGE

How might we establish a unified design system for Hertz to ensure consistency, structure, and scalability across all platforms?

SOLUTION

SOLUTION

SOLUTION

Building Ignition Design System with reusable components, clear guidelines, and consistent branding, ensuring seamless user experiences and efficient collaboration across all Hertz platforms.

Givepact interactions before the study

Figma UI Kit

Access the full UI Kit on Figma to explore and duplicate design components for your project.

I honed my communication skills through direct client engagement and gained the ability to understand understand and address client needs effectively.

I honed my communication skills through direct client engagement and gained the ability to understand understand and address client needs effectively.

Design System Documentation

View the comprehensive Ignition Design System Zeroheight documentation for guidelines.

I honed my communication skills through direct client engagement and gained the ability to understand understand and address client needs effectively.

I honed my communication skills through direct client engagement and gained the ability to understand understand and address client needs effectively.

PROCESS

PROCESS

PROCESS

Deconstruct

Construct & Test

Document

We audited the existing UI and captured key design assets to better understand Hertz.com’s ecosystem

UI Inventory

There were numerous inconsistencies. To name a few:

14 button variations with differing styles and text formats

12 distinct heading styles in typography, creating a fragmented visual hierarchy.

3 types of social media icon links, each with a different design treatment.

Deconstruct

Construct

& Test

Document

We audited the existing UI and captured key design assets to better understand Hertz.com’s ecosystem

UI Inventory

There were numerous inconsistencies. To name a few:

14 button variations with differing styles and text formats

12 distinct heading styles in typography, creating a fragmented visual hierarchy.

3 types of social media icon links, each with a different design treatment.

Deconstruct

Construct & Test

Document

We audited the existing UI and captured key design assets to better understand Hertz.com’s ecosystem

UI Inventory

There were numerous inconsistencies. To name a few:

14 button variations with differing styles and text formats

12 distinct heading styles in typography, creating a fragmented visual hierarchy.

3 types of social media icon links, each with a different design treatment.

OUTCOME

OUTCOME

OUTCOME

The redesign elevated the interface, creating a seamless and intuitive experience that strengthens the Hertz brand identity.

Before

After

Before

After

Before

After

LEARNINGS & TAKEAWAYS

LEARNINGS & TAKEAWAYS

LEARNINGS & TAKEAWAYS

How this project helped me grow as a designer?

01

Token structure evolves

Defining a token structure upfront didn’t fully work for us. We discovered that the ideal hierarchy and structure developed naturally as we worked through the process.

I honed my communication skills through direct client engagement and gained the ability to understand understand and address client needs effectively.

I honed my communication skills through direct client engagement and gained the ability to understand understand and address client needs effectively.

02

Overcommunicate

Despite strong collaboration, design gaps surfaced during testing, showing that overcommunicating helps catch overlooked details.