Netflixing Pelago’s webpages

Background

Pelago is a travel experiences marketplace backed by Singapore Airlines. We strive to deliver a seamless discovery and booking experience to our customers with curated and personalized product catalogs reducing clutter and a quick checkout process to reduce drop-outs.

Fig. 1 — Klook’s (a competitor) webpages for multiple destinations

Introduction

Fig. 2— Structure of a webpage

Webpage

A webpage is a plain white canvas that can contain any User Interface (UI) elements ranging from text, images, buttons with hyperlinks to other web pages.

Component

Instead of dumping UI elements directly and disorderly on this webpage, we divide this page into multiple components or sections (an informal definition only for the sake of this article) to make it more structured and manageable. So, a webpage can contain any number of components.

Content

Now, each component can contain one or more UI elements within it. These will generally include component headers/titles and images of products along with product titles, price, category information, and hyperlinks to view more details of the product.

Part 1 — Component-Based Views

Fig. 3— Pelago’s Singapore destination page
Fig. 4 — Component representation of the destination page
Fig. 5— Static components vs Dynamic components
Fig. 6— Component-based view architecture

The key difference between previous approach and the new one is the second step which is an additional API call introduced by this framework. The Front End requests for the list of components from the Back End (server-side or the data/business logic layer). It was previously an individual design for each page managed by the Front End.

This tradeoff gives us the ability to scale to hundreds of types of pages with a one-time effort of defining the components within each page.

Part 2 — Personalized Components

Fig. 7 — Personalized destination page components for a solo traveler
Fig. 8 — Architecture + Data Flow Diagram for Personalized Components
Fig. 9— Different personalized versions of the same page for two users

Key Results

Learnings

Thanks

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store