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.
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.
Do No Harm
Sustain conversion rate of an online channel contributing billions in revenue †.
Transform desktop-only capabilities to retire the mobile-only site.
Layer the Language
Apply an emerging visual language of color, type, space, and more.
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.
In the first two weeks of the project, we convened the group in two half-day brainstorming workshops.
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:
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:
Conservatively mirrored most current layout choices.
Used panels extensively to modularize displays for smaller devices.
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.
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.
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.
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.
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..