UI DESIGN | VISUAL DEISGN + DIRECTION

Redesigning the Hyatt Residence Club member website to simplify complex interactions and optimize usability.

PROJECT STATEMENT

The Hyatt Residence Club is a timeshare program in the U.S. They discovered users were struggling through the booking process and were looking for a complete overhaul of their website. I worked closely with the UX designer to create a solution that scaled easily, led to more completed bookings and was optimized for their target demographics.

** Branding and content creation were done concurrently to the website redesign, therefore, most sections are using FPO copy and images. **

ROLE

Lead UI/Interaction Designer

CLIENT

Hyatt

MY CONTRIBUTIONS

As the lead UI designer for this project I:

Worked closely with the UX designer (Jackie Eaton) to translate wireframes into low-fi and high fi mockups of flows
Designed over 100 unique pages including all major website flows
Established breakpoints for mobile and tablet responsivness
Owned review cycles with design leadership
Established visual direction with an accompanying style guide for easier website scaling and developer implementation
Created unqiue set of icons to be used across the website

ACCOUNT PAGES

CATERING TO THEIR AUDIENCE

Targeting adults aged 30-60 with families, I optimized the account page for ease of use. User profiles and direct navigation are prominently placed at the top, remaining visible as you scroll. Bright-colored buttons and large numbers enhance visibility for key actions and dates.

FLOW DEVELOPMENT

Our main challenge was to simplify the booking process. Our UX team collaborated with Hyatt to redesign the sitemap strategically. As the UI designer, I refined basic wireframes into a scalable system that streamlined these flows.

By reusing components and modules throughout the site, we enhanced cohesion and simplified the steps. Bright calls-to-actions and limiting tasks per page improved step-by-step clarity. Information entered remained visible throughout the booking process, allowing editing to remain accessible and increasing flow awareness.

ADDING PERSONALITY

High-quality imagery showcasing Hyatt properties in diverse locations was paired with expanded brand colors and newly developed icons to enhance brand cohesion and align with their updated guidelines. These elements provided contrast and infused Hyatt's personality into text-heavy pages.

CREATING A STYLE GUIDE

I developed a comprehensive style guide to ensure website consistency and a smooth handoff to developers. While we weren't able to implement an extensive design system, I created reusable components and modules to enhance uniformity across their dense sitemap. It also reduced implementation time by enabling developers to make quick style decisions and create micro animations based on the hover elements defined in the style guide.

CHALLENGES AND LEARNING

Our team encountered challenges in the beginning stages which caused us to restructure our approach and internal workflow to address the delays in client deliverables. By breaking down the site into manageable segments, we tackled issues at a granular level and expanded solutions across other sections as we received input from the Hyatt team. Despite working in parallel, this iterative process and our established style guide allowed us to remain flexible and incorporate new assets on the fly, helping the site to come together in a cohesive way.

IMPACT

Our team encountered challenges in the beginning stages which caused us to restructure our approach and internal workflow to address the delays in client deliverables. By breaking down the site into manageable segments, we tackled issues at a granular level and expanded solutions across other sections as we received input from the Hyatt team. Despite working in parallel, this iterative process and our established style guide allowed us to remain flexible and incorporate new assets on the fly, helping the site to come together in a cohesive way.