Role:

I was the Lead Visual Designer on the App. Our Director gave me the responsibility of extending the style and patterns I developed for the responsive header and footer to the Hyatt Hotels app.

Those patterns were showing up in email and hyatt.com's responsive re-architecture. Extending them to the app would establish the cross-channel consistency Hyatt was looking for.

We worked on a large agile team, sometimes two. My UX partner Adam Bitner, handled Axure wires, prototypes, and user research. I handled visual design, specs and assets for the iOS and Android developers. 

Specific Tasks

• Visual design of the app's style, icons, assets, elements, screens, flows, typography and color.
• Codify the standards, patterns, assets and specifications and document them in a live standards library.
• Build out responsive symbols, text styles, and shape styles of most used elements in Sketch App to streamline prototyping.
• Design price display rules for five rate structures in seven languages and 58 currencies.
• InVision prototyping
• Present work for peer, executive, product and development team feedback.
• Write final development requirements in JIRA and Zeplin.
• Support the BA, QA and Dev team as needed.
• Photo selection and treatment standards.

Hyatt's Goals:

1. Merge/Redesign Hyatt's Main and Guest Request Apps.
2. Establish Digital Channel Consistency.
3. Bring App Work and Its Maintenance In-House.
    

1. Merge/Redesign Hyatt's Main and Guest Request Apps

The existing Hyatt app kept things simple by not offering guest requests. The guest request app did it by showing only one stay and no account management or booking features. We had to find an elegant way to make the combination of both apps' features readily apparent without cluttering up the experience.  

After a few go-rounds we landed on a contextual stay card and home screen concept. The home screen would change depending on broad information you were likely to require. For example, if you had a stay coming up, it would show a stay card. If you didn't, it would show a hotel search box.

When a stay card is shown, its changes relate only to the specific reservation that card represents. If you happen to have several consecutive stays, we show only your current stay and tease the next stay by allowing its stay card to peek in from the right edge of the screen.  Swipe to move forward or backward in time by stay date. If you're on a multi-leg trip you can quickly reassure yourself that your accommodations are in order by swiping through your itinerary.

The stay card is the glue that relates the broad Hyatt information in the rest of the app to the stay-specific information from the Hyatt guest request app so they perform as one.

Time-sensitive options like check-in are surfaced to the bottom-front of the stay card with an action button right where your thumb might be. A few days before you arrive, you might see the option to upgrade. On your arrival day, you might see an option to check-in and get your key at a key dispenser versus having to stand in line.

Services available throughout your stay, like valet service, luggage assistance, and room service are filed under the "my stay" icon.

This contextual approach was achieved through close collaboration and lengthy discussions across the entire team. The stay card was inspired by the property card we developed for hotel details section within booking. We found that cards made a nice way to surface the most important actions and information at-a-glance throughout the app.

2. Establish digital channel consistency

To align the app's style with what was emerging on email and web, I repurposed a Photoshop scratch file from the header/footer project as a rough style guide. While I worked on the header/footer, I had developed a vision to use as my conceptual north star. That vision is best described with four ideas:

Understated, Clean, Contemporary, Luxury.

With the vision in mind, I extended and adapted the styles from the header/footer work to fit the app requirements as we went along.

As common elements emerged in screens, I codified them into standards. Once standards were in place, the process reversed: The standards now informed the screens.

The philosophy I adopted for building the library was based on Cadillac's interchangeable parts approach. Although I was technically designing elements for the app, I thought of them as parts for use across digital media. They are designed for as much interchangeability as possible while respecting OS specific requirements for Android and iOS as necessary.

And it worked. Other designers regularly pulled my files as the starting point for their work in other projects like the booking path and page redesigns.

3. Bring App Work and Its Maintenance In-House

This power transition was orchestrated by management. Adam and my role was to support the change-over. Our job was to hold the vision so the app would look like it was designed by one team while the composition of the teams was actually constantly changing.

As the project progressed, internal departments that once owned parts of the project ceded control to others, two vendors were spun off, Individual consultants spun in and out, development teams eventually shrank to one team per platform, and process transitioned from Waterfall to Agile. It was rough going at times but we did it!

Challenges:

At the start of the project, Hyatt's UX team was in its infancy. We were five designers, no UX manager, formal process, or Hyatt UI/UX standards. There were no style, pattern, asset or specification libraries for digital. We were going to have to build our design language and infrastructure from scratch while we designed the app.

To address the infrastructure challenge, Adam and I made UI/UX design language and infrastructure libraries we needed as we went. He in Axure, Me in Sketch and Zeplin.io. The Axure library became the reference for interaction and wires. The Zeplin library became the reference for spec, assets and style for the Product, Dev, UX, BA and QA teams.

Changes Along The Way

After designing screens in Photoshop for the first section, it became clear that the Photoshop workflow was too slow for our needs. I switched tools to Sketch App and Zeplin.io to eliminate red-lining and the constant emailing that comes with communicating specs with Photoshop.

That decision streamlined both the work and its dissemination beyond my personal workflow. It improved the UX, Dev, Product, QA and BA teams' communication by reducing communicational transactions while increasing communication understanding itself.

Outcome

• Hyatt now enjoys one nicely integrated app for booking, rewards, stays and guest requests.
• The app aligns with the emerging cohesive style across channels. That style represents the company as the understated, clean, contemporary, luxurious hotelier Hyatt is.
• Work on the app is now supported by the infrastructure of the live style, standards and specification libraries.
• Once they saw the benefits in action, Hyatt's visual designers on other projects also switched from Photoshop to the Sketch and Zeplin workflow.

A Personal Note

Better aligning Hyatt's look and designing the app was incredibly rewarding. Developing UX infrastructure and influencing other designers was even more so.

It might be a "designer thing," but my favorite feeling is the one I get when I see others choosing to use something I worked on because they want to, not because they are required to. This holds especially true if it is a new way of doing things. It proves that something I did persuaded them it was also right for them – that it works.

When that happens, I feel like I'm leading by design example, instead of by control. After all, isn't the point of UX to cause people to want to engage a better way instead of making them have to?