ThirdHome Design System

ThirdHome Go Banner

Becoming the Most Trusted Name in Luxury Travel

When I began working with and eventually for ThirdHome, the company had a single focus: luxury home exchange. Through the tenure of my time as their VP of UX and Design, we added four products parallel to the Exchange club. In order to support a fast update cycle and a need for consistency in our front-end development, content, and design, I've created a central repository of our styles, content guidelines, visual and coding resources, and a private node package to instantly deploy updates to our products from one source. More than a collection of UI elements and code, this system spans marketing, content creation, sales, onboarding, and member engagement scripts, as well as visual components. The goal is to present a consistent message across all our contact points: ThirdHome is the most trusted name in luxury travel.

This is still very much a living, breathing project spanning years and in active development.

A luxury home exchange platform.
A tool for our Exchange members to further monetize their second vacation home, as well as find vacations beyond the Exchange.
Wrapping our concierge services and further selling curated luxury experiences.
A white-glove service housing the most exclusive and ultra-luxury properties.
ThirdHome Go
An invite-only club for last-minute luxury travel.

Creating a Framework of Support

Each product has been made to work in concert with the original Exchange web application, which has a Ruby on Rails backbone. The UI/front-end components across products all have a slightly different flavor, as our styles and development strategies have changed to keep up with modern technology and trends. This has led to a fragmentation in our presentation, function, and messaging across products and departments.

With new hires and team expansions currently in the works, having a company resource to push consistency and retain working knowledge is key for cross-departmental efficiency. Despite the pandemic taking a knife to the heart of the travel industry, ThirdHome closed one of its best years in 2020. With other executives focused on growth, creating a design system is one of my solutions to help ThirdHome scale effectively.

A Toolset for the Whole Company

The working design system and documentation plays hand in hand with our private node package for distributing styles, components, and assets. The goal is to drive a modular pattern to our css, as well as our development components. A prime example is our date picker and calendar system, which is used in almost all our offerings, but updated each time, recreating styles, updating build packages, etc. By moving the pattern and styles to a modular component, we can update and deploy across all our sites with ease. Another long-term development goal is to remove Foundation as our front-end framework and move to our own small open-source ThimbleCSS for a lighter CSS footprint.

I'm also balancing the visual/development components with a marketing content focus. The project is scoped to include content guidelines, house styles, branding resources, partnership kits, and sales scripts. This is important to the tech team as well, as we often build and deploy fast enough that having defined messaging, formatting, and approved marketing imagery ready to go removes a hurdle to moving a feature to the testing phase.

A side effect of targeting marketing content styles create a desire to try to streamline our messaging through other touchpoints as well, meaning sales and onboarding scripts, CRM emails, and affiliate information kits.

Decoding the Information Architecture of ThirdHome

As a contractor for ThirdHome, I pushed to create this company wide foundation as a starting point, but it wasn't until I was hired in-house that I've been able to fully make the case to integration. I've created several presentations to various levels of administrators throughout the company to demonstrate the usefulness of this tool and the steps needed to fully realize a wholistic system.

I've had to hire and manage consultants to assist on this project, ranging in focus from a branding designer to iterate on our new logo, a WordPress expert to help update our custom themes, a UI designer to help with system generated emails and marketing pages, and a content marketing strategist.

I've also created and tested our node package. I had to update our WordPress builds to Webpack, and test in rails and WP environments, and compile/build the final design system site, a fun task for testing new designs and builds.

Keeping Focus on a Moving Target

Due to the broad nature of this project, the biggest constraint has been focus. I've had to work slowly, building up each piece individually in between more immediate feature requests and design cycles. The hardest part of bringing this to fruition was not losing focus and keeping a steady hand in between my daily management tasks to move it forward.

ThirdHome Map
ThirdHome Map

A Multi-Staged Process

Decoding the Information Architecture of ThirdHome

In 2018, ThirdHome hired the partnership of the Agile League to take up executive positions in the growing company. Before this hire, we had a filtered and slightly limited view of the company hierarchy and inner workings. One of the things we quickly realized once we were free to interview department employees as we set up our product team and cycle, was that our assumptions of our user base were completely incorrect.

Users across our site are high-touch clients, meaning ThirdHome's Membership Engagement team will personally search, hold stays, update profiles, and reserve trips for our members. They accomplished these tasks through toolsets we provided through the application, which was rarely the focus of our development attention.

Knowing that our actual users are split between a self-serve and concierge model let us incorporate quality-of-life improvements for our administrators to increase efficiency and make managing members easier, and to shift focus to think of our employee base as an important user base.

ThirdHome Touchpoints
An overview I put together of our touchpoints and tracking departments through our basic exchange purchase cycle.

I helped in this process by creating a set of core journey maps so we could see where the touchpoints happen, where there is friction, and gather feedback at these moments. After identifying pages that we were able to remove and crafting some more efficient flows in other areas with the product team, I worked with marketing to create a touchpoint map of our basic user purchase lifecycle, and use this to create targeted feedback surveys for each stage. Before this point we had a yearly user survey, but I wanted to incorporate a more organic and frequent source of qualitative user feedback.

At the same time, our CTO began pushing a quantitative data gathering approach to our current user base by connecting our apps to Metabase. This process has helped give our product team (which is run by our CTO, the head of Operations, the Director of Development, and myself) a deeper understanding of our user segments, business needs, revenue models, and allowed me to craft an informed design system.

Bringing the Message to Roost

From a visual standpoint I started with our identity. I wanted to incorporate branding that could grow with the company's expanding product portfolio. Certain species of doves have been known to share their nests while migrating with other doves. This idea was chosen to represent the company long before my involvement, but with such a strong idea, I wanted to help bridge the gap between the weighty dove symbolism and home ownership. Working with Joey Gudenas, we created a new dove with individual key elements, colors (based on standard color psychology linked to each product), and sub-product hierarchy.

Thirdhome Logos

Sharing a Library

With a strong understanding of flow and a new identity ready to expand to sub-products, I next created a Sketch library with all our branding assets, colors, and typographic hierarchy. I began branching out from there and creating sketch documents for modular components, such as cards, layout elements, and inputs.

Combining all this work, the first site we focused on is our marketing/company site, which is a WordPress site focusing on lead generation. Designing and (currently) building this page is setting the framework for a rollout across products.

ThirdHome Sketch Library

It Takes a Village

While each user of the design system may have a different goal and need, crafting something of value for each department and user has been difficult. The need for buy-in from departments at different stages, and finding time in our rigorous development cycle, has also been an equal struggle to overcome.

Along the way, as parts of this build have come together, the proof of the speed and utility of the project have shown through. Working with design contractors, marketers, and developers across teams, and the speed that a (partial) finished design system has afforded us speaks for itself. Going forward, as projects are stacked and scoped out, taking time for the foundation has proven to be a time saver and cost reducer, and has given us the ability to keep design agile.