Marriott / Responsive Responsive Reservations with a Splash of Innovation

Project
Responsive
marriott.com
Services
Strategy
Interaction Design
Prototyping
Visual Design
Year & Duration
2013, 3 months
Share This

In 2013, EightShapes partnered with Marriott.com Digital to transform their desktop-only room reservation process into a new, responsive design language. The project produced sophisticated, fluid displays across devices, setting the stage for billions of dollars in hotel reservations for years to come.

Previous design: Search New design: Search
Search
Previous design: Rate List Menu New design: Rate List Menu
Rate List Menu
Previous design: Guest Information New design: Guest Information
Guest Information
Previous design: Review Information New design: Review Information
Review Information

Plan by Establishing Boundaries

A top ecommerce site, nurtured by multiple in-house development teams, cannot be transformed willy nilly in a vacuum. A project of this scale needs clear boundaries, validated with in-house collaborators early and often.

Objectives

Do No Harm

Sustain conversion rate of an online channel contributing billions in revenue †.

Go Responsive

Transform desktop-only capabilities to retire the mobile-only site.

Layer the Language

Apply an emerging visual language of color, type, space, and more.

Reactively Refine

Don’t add features, but refine the UI with modern patterns.

Site features weren’t frozen during the project, either. As in-house teams soldiered on with enhancements and monthly releases, the responsive team worked in parallel, syncing with those updates.

Break Molds in Low-Fi

The in-house product team had never “done responsive” before and remained focused on new features and ongoing releases. Our participation transformed the experience quickly, forcing the team to observe and adapt to a new responsive mindset and workflow on the fly.

Sketching Together

In the first two weeks of the project, we convened the group in two half-day brainstorming workshops.

Stack of sketched screen ideas with marker

Sketches came fast and furious. We explored handset and tablet implications on data-rich displays of hotels and rooms, immersive maps, and long reservation forms. The group converged on design themes like:

Design Themes

Focus on fluidity given variable displays, currencies, and languages.

Make maps immersive, especially on smaller devices.

Strengthen hotel branding through color and identity.

Minimize repetitive form entry by emphasizing sign in.

Defining a Layout Model

Following sketching studios, we produced wireframes of the layout model for search results, the most sophisticated page in the process.

We riffed on concepts ranging from a similar layout to the as-is experience to riskier, more dramatic shifts:

Wireframe

Classic

Conservatively mirrored most current layout choices.

Wireframe

App

Used panels extensively to modularize displays for smaller devices.

Wireframe

Thin List

Spilled intentionally overboard with data density and UI sophistication.

With rapid wireframing, we defined a screen framework to accommodate device width and state of the UI. The device widths included handsets, tablets, small desktop, and wide desktop and UI states included list, map, hotel details, and map/hotel details combined.

Wireframe: layout model across spectrum of screen sizes

By structuring discussion around clear dimensions and decisions, we illuminated their tolerance for risk and change. The group acknowledged how responsiveness forces change, embraced some ideas, and clarified what concepts to discontinue.

Prototype in Hi-Fi HTML & CSS

At EightShapes, we believe responsive design needs more than mockups for “desktop” and “handset”. Adding “tablet” isn’t enough either. To limit responsive thinking to two or three sizes is irresponsible.

Devices unpredictably span widths from 300px past 1024px wide in various aspect ratios. Expressing responsiveness in high-fidelity HTML & CSS prototypes isn’t a nice-to-have. It’s a necessity: show the design at any size or circumstance, just as the customer will see it.

As the stewards of the emerging Marriott Digital Design System, our team knew the visual language, layout system, and HTML/CSS design toolkit. We’d built the system ourselves, and it provided us a tremendous head start to tackle the project efficiently.

Prototyping was central to the process from the outset. Pairing a coding-capable UX designer with a visual designer creating PSD mockups, we got to work!

Over the course of two months we designed, prototyped, researched, and refined the entire flow from search results to a confirmed reservation.

Search

Screenshot of prototyped Search

Room Rates

Screenshot of prototyped Room Rates

Guest Info

Screenshot of prototyped Guest Info

Viewing and Comparing Hotels Quickly

On wide screens, selecting a hotel opened a detail panel to the right of the list. This master-detail UI pattern sped up toggling between hotels, facilitating comparison and decision-making.

To ensure we got it right, we prototyped with real content of countless hotels, varying brand identities to simulate choosing a hotel across Marriott’s range of property types.

Screenshot demonstrating Fairfield Inn brand
Fairfield Inn
Screenshot demonstrating JW Marriott brand
JW Marriott
Screenshot demonstrating Courtyard brand
Courtyard
Screenshot demonstrating Marriott brand
Marriott
Screenshot demonstrating Renaissance brand
Renaissance
Screenshot demonstrating Residence Inn brand
Residence Inn

The experience on smaller screens gave us an excuse to work with the development team on designing and coding gestures. Swiping from hotel to hotel is a natural, expected gesture.

Design details matter. Panel edges hint at distinct hotel brands using color and shape, and imply swiping. A fixed header persists the Close button no matter the scroll. Tappable content invokes maps and phone calls.

For a team unfamiliar with gesture-based interaction, demonstrating the experience via a fully-coded prototype provoked useful questions of “What gestures go where?” and “What script libraries do we need for these features?”

Revealing Hotel Brands within Immersive Maps

Maps proved an exciting challenge too. Maps? Why maps? Doesn’t Google do maps, like really well? Yes, but [as Marriott learned in prior research] mapping is essential to finding just the right hotel.

On the desktop, we sought to make the map bigger. Way bigger. Break the layout grid’s max-width of 1024px bigger. The map dominated the desktop browser’s view, extending to the canvas’ max width of 1400px. The massive map size also afforded more space for the panel of hotel details, focusing users on the central task.

Screen: map results for Chicago on large desktop browser

On small screens, users can pan the map by swiping, conflicting with the vertical swipe otherwise used throughout. Therefore, toggling to the map triggered an animation, conveying a shift in mode..

Screen: map results for Chicago on mobile browser