A New Design Language System for Hilton Honors


Introduction

“When creating a sustainable culture, your design system is only as strong as your relationships with the teams who use it.
For a robust design system to work, a company needs a mature culture that empowers people to develop the system together. Without this, designers may feel like the system is limiting or blocking their creativity.” -
Airbnb

Both iOS and Material design guidelines stress the importance of consistency in interfaces which was instilled in me from the earlier days of my career working at a successful startup in San Francisco. At Hilton, I advised that we apply the same standards and with doing so we will build trust by constantly proving customer expectations true. My intent while moving through the rebranding transition for Hilton was to continue to support our teams as we build a sustainable design system community together and form an organic alliance. The larger purpose for rebranding and creating a new design language system was to meet our Hilton Honors members at the visceral, behavioral and reflective level. We want our members to experience emotions such as admiration and trust, which require time to build through UX and UI pattern recognition and design consistency.

Enterprise Branding

When I started my UI design position at Hilton Worldwide, I was asked to conduct audits of their iOS and Android apps. I began by reviewing Hilton’s latest active zeplin files, a total of 1,500 screens for iOS alone, not including Android, I tested the apps, I took screenshots, and collaborated with QA to access a few of the member features.

Audits:

iOS Audit

Android Audit

Apple Watch Audit

Findings

What I learned is that Hilton lacked design consistency across their digital products. This tells me that the mobile and web design teams may not be communicating as well as they should and that the management for building these features did not consider designing the products with systematic cross-platform design thinking. I saw this problem as a great need for Hilton's digital products, and I brought the concern to my manager’s attention.

Challenge

I saw the problem as a challenge to clean up the brand identity of Hilton and bring cross-platform continuity across Hilton’s Honors mobile and web platforms. By doing this, we will increase brand recognition and improve cross-platform and mobile optimization. Companies like Airbnb, Hotel Tonight, and Kayak need to be able to learn quickly, iterate, and respond to their mobile user behavior and we should be doing the same at Hilton Honors. Little did I know I had joined the team at the right time, as they were just about to do a full sweep of Enterprise Re-branding across all their marketing, print, and digital collateral.

Enterprise Branding Strategy

I partnered with the lead Senior iOS designer, and together we were responsible for coming up with the new enterprise branding strategy and applying the new color palette to our mobile products. We were asked to make global changes to our iOS and Android platforms with only a 3-week timeframe. Since we did not have time to go through and update all 2,500 something screens found in zeplin that were currently being used in our apps, and since at that time sketch had not introduced the powerful feature of symbols, we had to come up with another strategy.

Step 1:

We started by researching relevant branding trends across higher visibility apps and then analyzed what’s most widely spread in terms of brand color usage and consistency. Our main focus was to present a compelling argument for using 1-2 primary colors for most interactive elements vs. using multiple colors as we did in the past.

Step 2:

We documented and mapped out all areas that would be affected, and we found quite a few problems. The first problem is that the new color palette that was provided to us by a print design agency was not ADA compliant. Second, the font selection that was chosen for Hilton’s new print collateral would not translate well and be legible for our digital product. Third, the new brand identity for Hilton was light themed, and our current mobile product as it stood was more of a dark themed app so we would need to make a switch from a dark themed app to a light themed app. Forth, not all assets in the app could be found, especially for Android, so I had to create many new vector drawings by hand. Fifth, we would need to replace the stock images found in the app as they clashed with the new color palette.

Step 3:

During the color palette change we followed iOS and Android interface guidelines some of the rules we set in place were:

  • Define a key color that denotes interactivity, make sure other colors don’t compete with it.

  • Avoid using the same color for interactive and non-interactive elements.

  • Chose a limited color palette that coordinates with our palettes primary colors. A subtle use of color is a great way to communicate the brand.

  • Use sufficient color contrast ratios.

  • Design our product to be accessible for everyone. Be aware of colorblindness and design for ADA compliance.

Step 4:

After receiving approval from our stakeholders with the new design strategy for rebranding our mobile and web platforms, we facilitated several meetings with our development teams to discuss the best way in which we would deploy our approach across the apps. We tried our best to get the message across to our dev teams that we would be making global changes with all our UI elements and that these changes would touch all screens. It was a hard pill to swallow for many, especially for our Android team. To help guide our development teams through this journey we provided a new Enterprise Rebranding Dev Walkthrough Style-Guide, and we also created a spreadsheet going through each screen describing what elements needed to be changed. However, with the little time we had left on the project, there was no way we could accomplish documenting each and every screen and I questioned was this even necessary if we provided a dev walkthrough documenting and showing all the universal UI elements that would be impacted by the new color palette?

Rebranding Deliverables:

Competitive Analysis Rebrand Strategy

Android Branding Spreadsheet

Rebranding Developer Walkthrough

Cross Platform Mobile Font System

Step 5:

And so the development begins... At this point, as I am writing this I can't remember how many days the developers were given to fully rebrand our apps, but I want to say it was only a week. All I remember is that we were scrambling and spending long days at the office. For our Team Hilton slack channel, I had won being the most active user during the month of development. I was being pinged left and right making decisions for Android and it was not an easy job keeping up 8 or so developers needs at any given moment while making this huge design overhaul. The developers praised me for getting through these times with them and likewise, we managed to pull through the struggle of meeting our deadline together. Reflecting back though, we should have asked for more designers to be dedicated to the project.


Build a new Design Language System using Atomic Design Principles

After enterprise branding, I was responsible for building our new mobile design language system and reported on a weekly basis to our Design Director at Hilton as well as communicated with our web and mobile teams to make design system changes and meet cross-platform coherence. We used Brad Frost’s Atomic Design Methodology to act as a guideline when building our iOS, Android, and Web pattern library. We documented and stored these patterns libraries both through our internal web portal and our master sketch file. The plan was that anyone working on Hilton’s digital products would have access to these libraries and be responsible for learning the design language system and applying systemic thinking to all projects and new features moving forward. Easier said than done.

List of components we redesigned: Forms, Text Field, Text Area, Radio Buttons, Checkboxes, Switches and Toggles, Buttons, Cards, Links, Dropdown menu, Modals, Date Picker, Grids, Sliders, Plus and Minus, Image Gallery, Snackbar, Errors and Alerts, Lists, Maps and Pins, Expansion Panel, Finger Print, Login Form, Menu, Progress and Activity Indicators, Dialogs, Lists.

View our new: Hilton Design Language System

Master Sketch File Example:

Screen Shot 2019-04-09 at 6.48.38 AM.png
 

Mobile Form & Text Example:

Web Form & Text Example:

 

During the time of building our new design language system, I was responsible for working with our UX team on a weekly basis to create new and consistent UX patterns too. For example redesigning the placement of our checkboxes, checkmarks, error and alert states. I brought to the UX team's awareness and we had few conversations about redesigning the multiple filter screens we had within our apps. I found there were inconsistencies with our information hierarchy, copy, and placement of switches and checkboxes. Again, how can we build trust with our members when our designs do not emphasize pattern recognition?

I also redesigned the UX and UI for our calendar date picker and image galleries.

Image Galleries Preview:

Final Product

Below is an approved mobile example of my final designs after applying the new design language system to our product. As you will see with the images to the left vs the images to the right I applied our new color palette, new font system, changed the app from dark themed to light themed, created new ux cross platform patterns, checked to keep copy consistent on both platforms, and increased our brand recognition.

Hilton Honors App Before and After Riley Pelosi.png