Behind the Scenes: Landing the Perfect Experience

In mid-April 2022, Hipcamp launched what is known as land orientation on desktop and mobile web. Hipcamp had previously centered itself around the concept of a campground, both in the product and throughout the codebase. A campground (aka listing) was a data-rich entity that could have several nameless sites available within it. Sites were lightweight in the codebase, and largely just important for tracking availability and coordinates. From a user perspective, sites were available to view on a low-fi map during checkout, but held little meaning otherwise.

The concept of a property, now better known as land, was an afterthought. It was the ignored umbrella over all campgrounds. This way of organizing and displaying information created a confusing user experience.

With land orientation, users now orient first around the land as a whole property and then the sites therein. Each site on the property is now one comprehensive, bookable entity, encompassing what was previously divided into both campgrounds and sites! The screenshots below highlight the difference in user experience for a user perusing a tent/RV listing page for the Cedar Bloom listing (first screenshot) vs Cedar Bloom’s new land page, which now showcases all of the property’s sites.

Product requirements: Why did we build it?

1. Set better trip expectations.

Previously, our users (known as Hipcampers) only saw all of a land’s offerings if they noticed either a page breadcrumb leading to the land page or a small  “More listings” module (see first screenshot). These entry points to more information were underutilized and led to incorrect expectations—Hipcampers were often mistakenly under the impression that a listing was the only one on the land, when many Hosts in fact offered multiple places to camp. This led to extra work and frustration for Hosts who wanted to set clear expectations but were limited by the constraints of the UI.

In addition, the path to booking was limited to listing pages. This high-level overview of the user journey before and after land orientation highlights the clearer booking flow:

2. Bring parity to all Hipcamp countries.

Hipcamp acquired UK-based Cool Camping in early 2022. Cool Camping was already following a land-oriented model, so this project was a milestone for successfully onboarding their Hosts and lands.

3. Pay off some engineering tech debt.

Listing pages were built in our now legacy tech stack (see table) with code that is largely untested client-side and isn’t integrated with our design system. Page and network performance did not have adequate monitoring, and debugging proved painful.

How did we build it?

Listing vs Land Page Core Differences

Challenges

Page speed

When the new pages first launched, we saw some substantial page speed issues that hadn’t been caught in testing. This was significant for lands outside of the US due to the location of our servers. 

Mitigation: We conducted a deep dive into our Core Web Vitals to guide our efforts. CWV improvements included photo optimization, better caching, and an improved approach to conditional rendering, among other things. We leaned on DataDog to analyze the CWV scores on a granular level and also tracked them via Vercel and the Google Search Console. The team used PageSpeedInsights to diagnose issues and Lighthouse to measure impact while in the development stage. Along with CWV scores, DataDog’s APM traces were valuable in understanding and improving latency.

SEO

It was discovered that lands cross-listed on other websites often ranked above the new Hipcamp land pages. This was especially true of the newly acquired Cool Camping lands, as we had the challenge of making their new land pages ‘inherit’ their previous page rankings.

We manage our SEO-specific HTML tags via the Next SEO plugin but quickly found gaps between our design system and SEO requirements. This led to incorrect tags on certain parts of the pages. We also grappled with duplicate content during the gradual rollout of the land pages, during which some legacy listing pages were still indexed. Permanent redirects were implemented on our Cool Camping lands to help with this, but the URLs initially included UTM parameters. The learning: never include query params in canonicals, especially if those URLs need to rank in SEO!

The UTM-free redirects would have been an ideal solution across the board. However, some product features unique to listing pages prevented them from being redirected as quickly as we had initially planned. To round out the perfect storm, some of the complexity with our hybrid ISG/client-side rendering approach created the possibility of conflicting settings around URLs being set to index or no-index.

Mitigation: So what did work for SEO? Fixing the missing tags was a quick SEO boost. Along with that, we did some image optimization using Cloudinary and next/image, fixed breadcrumb 301 redirects, removed invalid links, and minimized non-301 redirects, all of which helped rankings improve. The conflicting indexing settings were resolved by shifting all of our principal Next SEO usage to the next-seo.config.js file and the server-executed `getStaticProps` function (and out of our client-side-rendered component hierarchy).

What we learned

In future projects, we’ll give the challenges above more attention and planning before the development efforts begin. Early on in this post, we mentioned that land orientation was first launched on mobile web and desktop—but Hipcamp also provides a comprehensive app on iOS and Android! We split the project into two phases to get all hands on deck for the web launch, but that caused a rift both within our codebase and for our Hosts and Hipcampers. Moving forward, we’ll stay aligned on both web and the app.

Was it worth it?

Yes!

• Both our Hosts and Hipcampers have reported being more satisfied with the clearer expectations provided by land orientation.
• It allowed us to onboard our Cool Camping lands and Hosts more smoothly. 
• We have internally documented our learnings with in-depth detail.
• We have a cleaner and better-tested code base, along with improved monitoring.
• We delivered the project in just over a quarter, showing what strong teamwork could produce.

The Hipcamp engineering team sends special thanks to the many talented people who lent their expertise to this project and to this article about it. There were some setbacks along the way, but overall, this was a win!