Transforming a desktop-only site into a sophisticated mobile experience.
Marriott Responsive Design
Marriott is a monolith, to say the least; it’s made of nineteen brands that span from Courtyard to Renaissance and beyond. In terms of online revenue, the loss of a single percent of income made through their online experience, the Hotel Reservation Path, equates to millions of dollars lost. I wish I was overselling that, but I’m not. The reservation path is comprised of search, review, and confirmation experiences. Significant changes to any step along the path increases the likelihood for loss; a grim reminder that I kept in the back of my mind as I participated in its responsive redesign.
- Visual Design
- Art Direction
- Responsive Design
- User Experience Design
- Front-end Development
The Quick View
The quick view component was originally designed as a pop-up modal, displaying only enough information to entice you into clicking into a denser hotel information page. In true mobile-first fashion, quick view was redesigned to fit into an off-canvas component.
The off-canvas pattern worked so well that it was tested on the desktop’s quick view and filtering components too. Experimental? Yes, but the open space it created sparked some exciting iteration on Search’s list, gallery, and map views. Its visual design was made flexible enough to work with all of Marriott’s brands.
Responsive Maps and Custom Pins
Map view embraces an immersive experience by using as much browser real estate as possible. In the past, maps were secondary; a small, embedded square on a page of Search Results. By using all of the available space it’s easier to find nearby attractions and other Marriott hotels in the area. It also mitigates the temptation to leave Marriott’s website in favor of Google or Bing’s external map services.
Map pins were an iterate process. I created styles for each hotel brand by experimenting with logos, colors, pin shape, and hotel name abbreviations. I also created several secondary pins to highlight items of interest like car rentals, specifically those companies partnered with Marriott, and nearby airports. Critiques were favorable but Marriott wanted smaller pins since there could be overlaps on the map depending on its zoom. For this reason, name abbreviations were preferred over logos.
Review and Confirmation Paths
Designing these pages started with group sketching sessions; a two-day event at Marriott headquarters. Small and medium-sized devices were explored in order to understand how desktop screens, normally crowded with content, would scale.
Sketches evolved into Photoshop mockups where I explored three breakpoints; small, medium and large. Iterating the confirmation path helped to expand our color palette; better visuals were needed to connote success, failure, alerts, and special messages.