TRAVEL GUIDES REDESIGN

The ranking problem wasn't a ranking problem.

ROLE

PIC + Content Design + Research

YEAR

2023

FORM

Microcopy + long-form editorial

ORG

Traveloka

TEAM

Designers, PMs, engineers, SEO team

STATUS

Shipped

NUMBERS

2 → 172 daily visits

TRAVEL GUIDES REDESIGN

The ranking problem wasn't a ranking problem.

ROLE

PIC + Content Design + Research

YEAR

2023

FORM

Microcopy + long-form editorial

ORG

Traveloka

TEAM

Designers, PMs, engineers, SEO team

STATUS

Shipped

NUMBERS

2 → 172 daily visits

Travel Guides was losing organic traffic from search engines. The temptation on a ranking problem is to go SEO-maxxing by injecting more keywords, metadata, technical fixes. What actually moved the needle was sitting with the bounce rate long enough to notice it was pointing at a UX problem.

The situation

Travel Guides is Traveloka's travel destination-page system. One long-form editorial page per destination, written to appear on Google and convert organic readers into bookings.

The pages were structured like storefronts. A booking widget at the top, then a few product entry points (Flights, Hotels), then contents like inspirational articles, area highlights, travel tips scattering below them. This arrangement matched the team's internal logic (each business unit owned a slot) more than it matched how anyone reads a page about a city they're considering visiting.

The project started when the SEO team ran an audit and brought their findings to product. I came in as design PIC and split the work into two phases to meet the engineering timeline: mobile first, desktop second with user research attached.

The approach

Users arrived at Travel Guides from a Google search with a soft intent. They wanted to know what Bali was before they wanted to know how to book a flight to it. The redesign rebuilt the page as a sequence, where each section did one job, and the jobs were ordered to match how user intent develops, not how the organization chart is structured.

  • 01

    Follow the intent, not the inventory

    The page got reordered top-to-bottom around the question a reader was actually asking when they landed.

    1. Inspiration: top tourist spots, popular areas, inspirational articles, user-generated contents. Enough picture that a stranger to the city could start imagining themselves in it.

    1. Practical tips, in collapsible form. Collapsible because it kept the page scannable while keeping the long content on-page for SEO indexing. I rewrote the tips as questions (Do I need a visa? When is the best time to visit?) because question-shaped content earns Google's Q&A snippet slots, and questions also happen to be the most scannable shape on mobile.

    1. Product entry points near the end, where intent had ripened into something that could drive a booking decision. Nearby destinations as the wrap. The labels were chosen carefully to manage the expectation that the anchor links jumped within the page, not to another page.

    An "In This Guide" table of contents were placed on top of the page. I picked the labels carefully — anchor links jumping within the page is unusual behavior, and the label had to manage that expectation.

  • 02

    Make each label do two jobs

    I capped the section titles at 5 words. That's short enough to be scanned in a glance, even by a reader who'd already decided the page wasn't for them.

    Meanwhile, section subtitles carried the high-intent SEO keywords and worked as a segue for readers reading slowly. So when the titles were optimized for brevity, the subtitles could go more marketese.

    On desktop, the practical tips component opened in a sidebar covering 75% of the screen. The argument I made for the ratio: felt close enough to opening a new page that the reading experience held, but kept the URL stable so the content stayed indexed under the destination's page.

  • 03

    The content guideline tells you why, not how

    Long-form content for each destination got handed off to the SEO team's writers, who are content marketers by trade. Product copywriters stayed on UX writing.

    The guideline I wrote for them had two columns. "About the Section" explained what each section was for and how the UI behaved. "Format & Guides" covered the surface rules: capitalization, word limits, frontloading, paragraph-breaking.

    The reason for that split is that content varies more across destinations than the structure does. A prescriptive template would over-constrain in places where local nuance matters and under-constrain in places where the structure had to hold. Explaining the purpose let writers adapt without drifting.

In a nutshell: arrange the page so each section earns its place, arrange the copy so each label does its job, arrange the brief so writers know why before they know how. The redesigned page wasn't competing for SEO ranking against reader experience; rather, it was answering the same question the search query was asking, in the same order the reader was asking it.

Artifacts

FIG. 01

Page architecture, in mobile. While the old page (not shown) assumed a reader ready to book, the new page assumed a reader trying to decide whether to want to.

FIG. 01

Page architecture, in mobile. While the old page (not shown) assumed a reader ready to book, the new page assumed a reader trying to decide whether to want to.

FIG. 02

Before & after, desktop. From huge cropped images to more responsive image sizes and a grid layout to support mid-res images.

FIG. 02

Before & after, desktop. From huge cropped images to more responsive image sizes and a grid layout to support mid-res images.

FIG. 03

Sidebar for practical tips, desktop. A solution to keep the content under the main page for better SEO-indexing. The product team initially had doubts about using sidebar as it wasn’t a common behavior in other websites. Convinced them that the new design was seamless enough – almost like reading on a new page

FIG. 03

Sidebar for practical tips, desktop. A solution to keep the content under the main page for better SEO-indexing. The product team initially had doubts about using sidebar as it wasn’t a common behavior in other websites. Convinced them that the new design was seamless enough – almost like reading on a new page

FIG. 04

A guideline that explains the purpose is more durable than a template that only prescribes. Long-form content varies, structural intent doesn't.

FIG. 04

A guideline that explains the purpose is more durable than a template that only prescribes. Long-form content varies, structural intent doesn't.

The impact

01

A month after release, average daily visits moved from around 2 per day to 172. The bounce rate dropped enough to lift the pages out of the ranking pit they'd been sitting in. The pattern held across destinations, suggesting the structure, not any single destination's content, was the lever.

02

The project became the working model for cross-team setups after it. Design, SEO, product, and engineering had never worked on the same brief from the start before this one, and the practices that emerged (weighing SEO impact against technical effort as the framing question, deferring component decisions to scoped follow-ups, using shared scoring for alternatives) carried into the next year of platform work.

WHAT DIDN'T WORK

Design had been pushing toward inspirational structure from the start, but the product brief was still transactional, so early sketches had to follow. Product team caught up partway through and shifted positioning. Some sketches got discarded.

Mobile shipped before research, to meet the engineering timeline. Several mobile decisions were assumption-validated, not user-validated. The desktop research surfaced things that worked, but also one or two things that probably should have been tested earlier.

The practical tips component (collapsible, sidebar, separate page) needed multiple rounds of follow-up across design, SEO, and engineering. Component behavior decisions kept getting deferred because the team hadn't yet agreed on how to weigh SEO impact against technical effort as a shared criteria. We figured it out by the end, but it ate more sessions than it needed to.

WHAT THIS UNLOCKED

The content governance handoff outlived the project. Product copywriters stopped writing per-destination long-form, and the SEO team's writers picked up that load with the guideline as their north star.

The intent-ladder pattern (sequence the page to match how intent ripens) became a reusable frame for other content-heavy pages. It got picked up on at least one adjacent project after Travel Guides.

The cross-team practices that emerged became the loose template for how SEO-influenced design projects ran after this one. First time everyone in the room realized the trade-off they'd been treating as adversarial was mostly architectural.

More case studies →