Web Shell

Web Shell is a set of reusable utilities and components to ensure a consistent brand and user experience and to enable experimentation across all Booking.com product verticals.

I came up with the initial concept, I also designed and planned the launch of initial features. Later, I coordinated with product and design leadership to make a successful case to extend the effort into a bigger organization.

The challenge

When we decided to add new supply to our portfolio, we gave our product teams the freedom to build their platform from scratch. In time, this resulted in a fragmented user experience of core features across product verticals. Making it hard for our users to understand our product offerings as a single connected experience.

The most imminent problem was that the header of every product vertical in Booking.com had a different design and implementation with lots of inconsistencies in visual style, information architecture, and navigational structure.

My goal in the short term was to build a case to fix this broken experience and measure its impact on the user experience. However, I also wanted to plan for scale in the long term by designing a system to ensure a consistent user experience with high quality and velocity.

Kickstarting the project

Since this was a wide-scope project, I wanted to map my stakeholders and understand the product landscape better before I started designing anything. I came up with an outline document for the Booking.com Header project in which I have further detailed the problem and the proposed solution. I sent this document to various stakeholders I identified across the company to gather requirements and get their support for the project.

Doing so has helped me get a better understanding of the design and business constraints which greatly informed the timeline for this project.

Designing the new header

After gathering the requirements, I started designing the building blocks of the header. I first designed a header pattern that would serve as the base for the more complex Booking.com Header. I worked with the accessibility team to get the header component audited and worked with their engineers to implement their recommendations. I also wrote guidelines on how to design navigation patterns to set up a baseline for best practices for the future.

Now that we had the base component, the next step was to design its usage on all traveler facing Booking.com products, including the Web, iOS, and Android platforms. In addition to the header, I also had to design various utilities that come included with the header: language selectors, currency selectors, notification views, account menus, and navigational menus.

For the redesign of the menus, I had to work with various product managers and designers across the company to come up with an information architecture that reorganizes the legacy content without hurting their business metrics.

I presented my work in multiple design critique sessions, including one with the design leadership to gather valuable feedback which I then incorporated into my work.

Planning the launch

For a project of this scope, I wanted to make sure that we were planned and prepared for any questions that might arise. I prepared a slide deck that communicates the development timeline, our proposed experiment setup and success metrics, and the before and after states with user metrics we expected to shift for each product vertical.

I’ve sent this deck out to stakeholders for each business area who I identified before to raise awareness and allow them to ask questions and give feedback.

The next step was to establish business benchmarks to define success. I drafted and ran multiple A/A experiments to gather data on each platform. I then worked with our Director of Experimentation to come up with multiple scenarios and non-inferiority thresholds for our A/B experiments. I put a business case document together to effectively communicate our project outline and presented it to our leadership team to get their sign-off on the launch.

Launching the header

As previously planned, we started with a soft launch for 5% of the total traffic for a week. After a week, we increased the traffic of our A/B experiments to 100% traffic on all products. While our experiments were running, I organized weekly experiment analysis sessions with stakeholders to come up with possible iteration ideas.

After several weeks all of our experiments went live, successfully matching their success criteria after multiple iterations. We increased the discoverability of our product verticals and various features.

Extending the ecosystem

After proving the positive impact of investing in horizontal features with the header project, I had the opportunity to grow the Web Shell ecosystem further. To get the foundations right before we scaled things further, I decided to work on a high-level concept called Product Architecture. This service design asset aimed at describing the entire ecosystem, its information architecture, taxonomy and how its parts relate to each other.

To keep the momentum going, I also further detailed some low-level designs that would be the natural extension of the newly created Web Shell library. I’ve set out to create a new footer component to be used on all product verticals. I also worked on the design of the new Shell API to serve as the backbone of our library with my engineering counterparts. Having established and documented my process with the header, things went much faster and smoother than the first time around. Documenting the process also helped with onboarding new members to our team as we grew.

Growing our mission

Having a positive impact on the product allowed us to grow our mission further. Working alongside Product and Engineering, I helped grow the Web team further through hiring and onboarding. With the newly onboarded team, I led the process resulting in a mission statement and roadmap. I then collaborated with our User Research to facilitate user testing sessions at platform level to further inform our roadmap.

I also ran sessions with the team to come up with objectives and personal objectives to give them measurable targets throughout the year.

Outcome

The Web Shell project introduced a new way of working to Booking.com due to its cross-platform nature. There were many success stories and lessons learned along the way, both for me and the team.

• The first phase of the Booking.com Header experiment has been completed and all Booking.com products now have a consistent, single header. We now have stronger brand expression across the board.
• With the introduction of the header and its related utilities, we reduced the tech debt greatly and improved performance-related metrics.
• We had many other iterations along the way on the header, further increasing the traffic to our product verticals and increasing the usage of profile-related features.
• Product Architecture influenced many decisions for our engineering team and it informed our organizational design. It keeps serving as a great resource for our future planning and long-term vision.
• Approaching the problem with both short-term and long-term solutions in mind allowed us to grow the team with good momentum as soon as we had proven value. We could immediately put the right people in the right space to make a good impact and grow personally.
• I presented our learnings and the new horizontal process I came up with for wider scope experimentation and feature launches at the company level. The process is now adopted by other horizontal teams at Booking.com, making their day-to-day easier.

Next steps

Web Shell remained in my scope and continued to grow while becoming part of a wider organization we created called Web Core Experience. They continued to improve the ecosystem by building infrastructure and horizontal features that promote a holistic user experience and empower product teams to focus on building high-value features with high velocity and increased quality.