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
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
A peek at my sketch file for this feature
Highlighting customization options
Adding a new section
Adding a video block
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.
Interactions in prototype tested
Heatmap from usability study
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.
Complete flow of adding and editing featured pages
Close up of flow to add a featured page to 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.
Emergency planning and response platform allows emergency dispatch personnel to navigate the exterior and interior of buildings using a combination of photography and 3D renderings.
A new approach to providing a class schedule and detailed class information that makes it easier for students to find the classes they need as well as plan for future quarters.
Bellevue College is the third largest institution of higher education in the state of Washington and its web presence has more than 120 official websites.