Embedded Files
Context
Senior UX/UI Designer at Hyatt, collaborating with product, business, analytics, and engineering to reduce booking friction while balancing credit card acquisition goals for the World of Hyatt card.
Problem
The checkout flow had too many conversion blockers — a confusing sign-in/guest form layout, custom fields preventing browser autofill, and a payment entry form that added unnecessary friction. Abandonment rates and form errors were costing bookings.
Options Considered:
Two parallel workstreams were pursued: (1) streamline payment entry by replacing manual card type selection with auto-detection and inline validation, and (2) a reimagined experience combining guest information and payment into a single page.
Trade-offs
The World of Hyatt credit card offer created internal tension — removing it would improve conversion, but it had significant new cardholder acquisition value. Rather than eliminating it, placement was tested across pages, ultimately landing on the payment screen where it drove more click-throughs with fewer abandonments. Progress tracker removal was similarly counterintuitive but validated by A/B testing.
Outcome
2% reduction in abandonments with 30% fewer errors. Balanced booking conversion and credit card enrollment.
What I'd do next:
Track whether replacing custom fields with standard fields meaningfully reduced submit errors for non-members, and continue A/B testing credit card offer designs given the documented tension between booking conversion and new cardholder acquisition.
Seamless payment
Seamless payment
Activities
Activities
Evaluated Warby Parker and other retail websites with similar payment entry methods
Explored attitudes and behaviors for saved cards and other payment methods through contextual inquiry and discovered:
Strong correlation between shopping frequency and saved cards
Behavioral spectrum impacted by security concerns and tech savviness
Digital payments trending towards providers such as Paypal and Apple Pay given security concerns
Partnered with analytics colleagues for quantitative data to discover and address top conversion blockers.
Design comparisons
Design comparisons
Original payment entry
New payment entry
Card Type selector replaced with card number auto-detection
Pseudo form field for card number and expiration date
Input format hinting and inline validation
Save card option added for members and registering non-members
Temporarily moved card offer to the Guest Information page for testing
Original payment selection
New payment selection
Expose only 1 preferred payment method because most people would use the first method
Change card button exposes ability to switch and add new cards
Temporarily moved credit card offer to guest information page
Interaction states
Interaction states
Re-imagined check-out
Re-imagined check-out
Combine guest information and payment forms.
Member sign-in or continue as guest
Member sign-in or continue as guest
Original combined sign-in and guest information forms
Guest information non-member form hidden below 'false floor' page fold.
New standalone sign-in or continue as guest (Step 1)
Help users avoid confusion, errors, and abandonments by presenting a clear choice for members and non-members.
Non-Members
Non-Members
Original guest info form for non-members
Issues
Users either skip past 'Sign-in' or miss the non-member form
Custom fields blocked auto-population resulting in submit errors
Updates
Used inline form validation to indicate errors onBlur
Replaced custom fields with standard fields so that the users' stored data in their browser could be pre-populated
Compared card offer placement between guest info and payment pages, discovering the payment screen received more click-throughs and fewer abandonments.
Combined guest info and payment forms for non-members (Step 2A)
Optional Name Prefix: Added 'Optional' to the Prefix label to ensure users understood this was not a required field.
Phone Number: Users told us they would either skip or enter a bogus number into the phone number field because they feared it would be misused for marketing purposes. Therefore, we included 'Required for emergencies' helper text directly under the field to encourage more users to provide this information.
Payment: Includes pseudo single card entry field from Payment Iterations. Other Payment methods and split payments are included as a future state concept.
Join World of Hyatt: I redesigned and updated the language for the Join World of Hyatt placement to ensure it would not be mistaken for a standard terms and conditions checkbox.
Terms & Conditions: Proposed standard E-commerce convention that uses copy to explain what will happen upon form submission instead of 'Agree to Terms' checkbox. This removed the possibility of triggering a form validation error.
Members
Members
Original standalone guest info form for members
Issues
Suboptimal form location
Unable to update address information
'Proceed to Payment' button missing sitewide transactional CTA yellow color
Updates
Preceded phone number and state field with Country / Region select list
Moved phone prefix (driven by Country / Region selection) into phone number field
Included legally mandated SMS opt-in for some hotels
New combined guest information and payment forms for members (Step 2B)
Progress Tracker: A/B testing already verified increased conversion for removing the progress tracker.
Guest Details:
Prioritized guest details, total price, and reservation information
Made contact information and billing address read-only and editable
Provided obvious page scroll by removing false floor
Included a photo of the room with additional photos available via modal to keep users moving forward
Payment: Included payment form so users could complete their reservation without going to another page
Price Summary:
Used clearer label 'Price breakdown' rather than 'Stay breakdown'
Added 'Price Summary' heading for this information for improved findability
Kept card offer due to new cardholder acquisition value and A/B Tested offer designs
Proposed a simplified benefit heading
Visually distinguished headline weights to make the primary benefit more discoverable
Moved offer terms above the main CTA for more transparency
Google Sites
Report abuse