WebDirect

Scalable content management system for hotels to market their property and get online bookings.


Problem

We were developing a suite of products to help hotels manage multiple areas of their business, but in order to make a scalable product, we decided to pivot and have the product be focused on being a lightweight content management system that we could scale globally. I arrived to the product development team shortly after we decided to pivot the product and right before the MVP was launched. The product still needed to find a product-market fit. From a user experience perspective, we needed to find the right balance between the ‘easy button’ and customization, so hotel partners felt like they are building their own website.


Solution

We developed a lightweight content management system for hotels with an e-commerce component. After we had about 30,000 hotels in the platform, we decided it had reached a level of maturity to move it to the Booking.com technology stack so we could scale it fast. By the time I stopped working on the product, it had grown from zero to 70,000 live hotel websites using the platform. Within 3 months after leaving, the product had grown to 100,000 hotel websites.


Screenshots


My Role

I focused my energy on trying to help the product find a product-market fit. I was designing functionality that could allow partners to launch a hotel website in minutes, reduce human- handled processes and could be ready to scale.

I was one of 3 designers working on 3 agile teams for this product. My team focused on the partner-facing side of the content management system. During this time I:

  • Worked closely with product owners to design new features and functionality to reach product-market fit.
  • Implemented designs using HTML, CSS and Git.
  • Created prototypes using Sketch and InVision.
  • Conducted usability studies, partner interviews, and contextual inquiry.
  • Designed revisions due to migration of product to the Booking.com stack.
  • Designed concepts to further integrate this product into other Booking.com partner-facing products.
  • Used A/B testing to make improvements on the conversion funnel.


Pattern Library

Above is a snippet of a file that I created to document new and existing design patterns for the product. I used resizable symbols in Sketch to speed up the design process.


UCD Methods

  • Conducted remote usability studies to test prototypes.
  • Conducted user interviews and contextual inquiry.
  • Assisted with User Surveys. This work was mostly driven by Product Owners.
  • Looked through past research findings.
  • Embedded myself in weekly conversations with representatives from multiple regions of the world that support hotel partners. This helped me get a better idea of the top issues partners were experiencing with the product.


Tools Used

  • Design methods: Stakeholder Interviews, Contextual Inquiry, Usability Studies, Findings from prior research, Google Analytics, A/B Testing
  • Design tools: Whiteboarding, sketching, Sketch, inVision, prototypes, UserZoom, Sublime, Git
  • Communication: Bluejeans, Google Docs/Sheets/Drive/etc


Localization

When I first started working on the product, we were supporting 23 languages. By the time I stopped, we were supporting 40 (non right-to-left) languages. When designing for so many languages, you have to be mindful of word length. More specifically, you can’t assume that a call to action will be within 10 characters in length. Instead you have to keep long-word languages like Russian and German in mind. As we started to support more languages, we also had to remove copy in all caps, as it didn’t translate well to other languages. You could handle these issues as language-specific exceptions, but since we were designing for scale, we learned to avoid using language-specific exceptions in our design.


Features

Below is a sample of features I worked on to help reach product-market fit.


Page Layouts

The original product had a very simple approach to page layouts which only allowed users to add one image, a page title and paragraph content. I introduced a new modular page layout which gave more flexibility to hotel owners.



Sketches



Creating a Page

The flow for creating a new page needed to change since I introduced a second page layout. This concept had to be flexible since we were considering having a third layout.


New Page Layout



Close-Ups



Testing New Interactions

Before implementing the new page layout, I conducted a remote moderated usability study to test new interaction patterns introduced by the feature. The study helped us decide in implementing a small interaction we were going to skip for the first release, and highlighted other friction points in the product.



Onboarding

I designed an on-boarding feature MVP that drove new partners to pay attention to key features that would improve their website’s performance. This was done after analysing patterns of website performance a few months after launching the product.


Featured pages

A hotel would want to feature a page on the home page for marketing purposes. For example, feature their spa services, restaurant and salon. The interface needed to have a method to showcase these pages from the home page.


Redirects

It is common for web addresses to change when migrating to a new content management system. The redirect functionality also needed to handle localized web addresses which could come from subdomains, subdirectories or query strings.


Booking Modification Flow

I also designed elements outside the partner-facing CMS tool. One of the areas I worked on was designing the flow so it could handle modifying bookings, as the MVP only allowed for cancellations. Once the flow was completed, I also worked on the changes to the emails that would be sent at each step of the process.

Other work samples