Role: UI Designer (contract)
Team: Collaborative design squad with dedicated UX designers, system architects, and developers
Tools: Figma, Jira
Pages: Hotel homepage templates, reservation booking flow
Goal: Translate approved wireframes into high-fidelity, responsive UI designs using the newly standardized design system
Team: Collaborative design squad with dedicated UX designers, system architects, and developers
Tools: Figma, Jira
Pages: Hotel homepage templates, reservation booking flow
Goal: Translate approved wireframes into high-fidelity, responsive UI designs using the newly standardized design system
Objectives
Accurately implement Marriott’s evolving design system to ensure UI consistency across brand touchpoints
Build responsive desktop and mobile prototypes in Figma for developer handoff
Create scalable UI patterns that reflect global branding while accommodating diverse hotel property content
Provide visual polish and accessibility alignment across new pages
Build responsive desktop and mobile prototypes in Figma for developer handoff
Create scalable UI patterns that reflect global branding while accommodating diverse hotel property content
Provide visual polish and accessibility alignment across new pages
Challenges
New Design System
The Marriott Bonvoy design system was still being documented and refined during my contract,
which required me to collaborate with the design system team and occasionally propose visual solutions.
The Marriott Bonvoy design system was still being documented and refined during my contract,
which required me to collaborate with the design system team and occasionally propose visual solutions.
Limited UX Input
Since UX was handled upstream, I had to ensure my UI decisions
respected the wireframes’ intent without major deviation.
Since UX was handled upstream, I had to ensure my UI decisions
respected the wireframes’ intent without major deviation.
Responsive Consistency
UI components needed to work fluidly across screen sizes and locales.
UI components needed to work fluidly across screen sizes and locales.
Template Flexibility
Hotel homepages had to support a wide range of imagery, amenities,
and pricing data while maintaining consistent layout integrity.
Hotel homepages had to support a wide range of imagery, amenities,
and pricing data while maintaining consistent layout integrity.
Process
Wireframe Translation
Received annotated wireframes and flow charts from UX leads
Clarified any functional ambiguity in design huddles or Jira tickets
Matched wireframe sections to existing Bonvoy components or suggested light variations when necessary
Received annotated wireframes and flow charts from UX leads
Clarified any functional ambiguity in design huddles or Jira tickets
Matched wireframe sections to existing Bonvoy components or suggested light variations when necessary
Figma Prototyping
Built high-fidelity desktop and mobile layouts using the Bonvoy design system
Created page-level mockups following atomic design principles
Applied Marriott’s typography, spacing grid, iconography, and interaction states as defined in their UI kit
Built high-fidelity desktop and mobile layouts using the Bonvoy design system
Created page-level mockups following atomic design principles
Applied Marriott’s typography, spacing grid, iconography, and interaction states as defined in their UI kit
Cross-Team Review
Participated in weekly design review syncs to present page progress
Logged edge cases and behavior rules for responsive layouts
Collaborated with dev team to ensure my Figma handoffs met accessibility standards
Participated in weekly design review syncs to present page progress
Logged edge cases and behavior rules for responsive layouts
Collaborated with dev team to ensure my Figma handoffs met accessibility standards
Highlights
Hotel Homepage Template
Image carousels, room types, amenity lists, and map/location sections
Built flexible UI cards that auto-adjusted for properties with less content
Implemented interactive hover states and mobile swipe gestures per Bonvoy system
Image carousels, room types, amenity lists, and map/location sections
Built flexible UI cards that auto-adjusted for properties with less content
Implemented interactive hover states and mobile swipe gestures per Bonvoy system
Reservation Booking Flow
Calendar selection UX (arrival/departure), number of guests, and rate filter interface
Consistent form fields and CTA placements optimized for readability and tap target sizes
Responsive modals and dynamic panels for upsell or member-only content
Calendar selection UX (arrival/departure), number of guests, and rate filter interface
Consistent form fields and CTA placements optimized for readability and tap target sizes
Responsive modals and dynamic panels for upsell or member-only content
