The landing page of the style guide.
The Hertz Corporation is United States' largest car rental company by sales. They offer the world's most diverse global car rental brand portfolio with the combination of Hertz, Dollar, Thrifty and Firefly brands. Together, they serve in nearly 150 countries worldwide with over 10,300 locations. Besides offering car rentals, Hertz also provides additional services with Hertz Car Sales, Hertz Equipment Rental, and Hertz 24/7.
I joined the Hertz Corporation in May 2014 as a UX Developer Intern. Since then, I had the privilege of working on some major projects for Hertz.com. I have included three of these projects as part of my selected work for this portfolio: Hertz Style Guide, Hertz Mobile Web Reservation, and Hertz Android App Redesign.
Due to the lack of design guidelines for the web and mobile, developers held the creative freedom of how various user interface elements and components looked and behaved. Over time, parts of code within the Hertz websites were reused, but not often updated. This forced many inconsistencies between the code and the design amongst all Hertz-operated websites, sometimes within the same webpage. The variations of UX patterns and structure led to poor user experience. We needed something more sustainable and scalable, like a style guide.
Style guides were not a new idea to the company. They had been tried and created in the past, however the attempts failed. Previously, style guides were created by external agencies in a PDF format, which resulted in hundreds of pages. Coincidentally so, these style guides ended up on the desks of developers as binders, never opened and rarely brought up. In fact, I found most developers didn't even know they existed in the first place. We knew that the new style guide needed to be more accessible, useful, and regularly updated for this to work.
We began discussions within the design team on how we can consolidate all the inconsistent styles into a single stylesheet that all of our pages can utilize. Within a couple of weeks, we created the most basic version of the style guide including some common UI patterns, such as logos, typography, colors, and buttons. Building up to the release, we included developers and managers on our team to collaborate on the project. What made it significant was not only that we were able to set guidelines and principles, but that we were also able to bridge the existing gaps between the design and development teams through this collaborative effort and involvement.
I developed an internal web and mobile style guide using Bootstrap, PHP, and some additional JavaScript. The style guide provided guidelines to various user interface components for the web and mobile applications, accompanied by its corresponding code in HTML and CSS for reference. This helped provide better documentation for reusing code and maintaining consistency amongst all Hertz brands and divisions for a more seamless user experience. With the help of another developer, we also designed Bootstrap themes for various Hertz brands and allowed users to download them through the style guide for future projects and for faster implementation. This also helped us with testing.
The landing page of the style guide.
The global header page with options to demo it in multiple breakpoints.
The buttons page with a demonstration of the elements with its corresponding HTML & CSS code
Language definitions for various Android app elements
Due to time constraints, one of the earliest mistakes we made with the styleguide is releasing it too early as a prototype. While its usefullness did help gain attention and kindle excitement, the style guide only covered the most basic user interface components. When the development teams that had been already working on projects without the style guide learned they had to begin converting their styles to adopt the new styles and guidelines, it forced a variety of problems.
Due to the early release, it made it more difficult to introduce new components to the style guide while modifying changes to existing ones at the same time. The style guide is not a living style guide, so while we were progressing by introducing/modifying changes to it, we were also backtracking at the same time because that meant we had to revisit and modify the webpages as well.
The style guide set a great foundation of user interface components for Hertz. It helped bridge the gap between design and development, and it also helped make it a more collaborative effort. This style guide is now referenced by Hertz globally for all publicly-facing websites as well as for internal pages, testing, and prototyping. Even though the style guide is released, we still have a long way to go to improve the efficiency in adoption. However, since we began the project, we have vastly improved in becoming more consistent to help create a better user experience.