Steven Mocarski
Experience Designer
Made with

RAM Platform Migration

Re-Imagine & Accelerate Marriott Digital

About the project

In 2016, Marriott Digital launched the RAM program - Re-imagine & Accelerate Marriott Digital - to migrate Marriott.com and other digital channels to a new technology platform based on Adobe's Experience Manager (AEM). Product-aligned teams were formed to capture content and functionality requirements and to create new designs that would work best within the new architecture.

My role

As a user experience designer on the hotel websites (HWS) team, I was responsible for re-working many of the features on the legacy HWS product. I also participated in requirements grooming sessions with the team developers to resolve any design issues and answer UX-related questions.

HWS Responsive Design, pre-RAM
HWS Responsive Design, pre-RAM

Pre-RAM 

Prior to the RAM project, we had redesigned the hotel website product to make it responsive and optimized at desktop, tablet and mobile viewport sizes.

To work with the microservice architecture (what we internally referred to as the "tile" architecture) of the new platform and our new API's, the features and functionality on each page of HWS required refinement and, in some instances, a new design.


HWS Overview Page - 3 Breakpoints
HWS Overview Page - 3 Breakpoints

Sketch Comps

I spent the majority of my time creating detailed design comps in Sketch. New comps were made for each page of the legacy site, the features and layout revised to better fit the new tile architecture.

For each page, I created desktop, tablet, and mobile versions so Dev was clear on the expected responsive behavior.

Sample Screens

Tablet versions of the Overview (homepage), Meetings, Rooms, and Rooms Detail pages are shown below.















Outcome & Insights

Launch Successful!

The new platform launched successfully in November 2017. Traffic to hotel websites transitioned unimpeded. For 2018, we exceeded our performance metrics - notably check availability searches - much to the delight of the product owner.

And a lesson learned

To match our Sketch designs, the Development team created multiple variations of  AEM tiles, resulting in a sizable increase in the number of stylesheets called on page load. Closer communication between design and development teams can certainly help mitigate this outcome. By forming a Standards team that includes UX designers and developers, we have been able to standardize tile designs across products and achieve a more concise and manageable code base.