Caravan

Project Overview

Caravan.com is a one-stop shop for booking fully guided bus tours around the world. Caravan seeks to modernize their website experience with a mobile-first approach for an easy to use, responsive interface.

www.caravan.com

My Contributions

As the design lead, I facilitated design thinking workshops with stakeholders and worked closely with the product owner of Caravan and their graphic designer to prototype a responsive redesign that upholds the Caravan brand. In addition, I created the foundations of a design system so that the frontend devs can leverage reusable UI components and a style library.

UX Pain Points

The Layout is Ideal for Print, not Digital Web
The current layout of the website is based on traditional print design, which does not translate well to digital platforms.
Static and Not Responsive
Namely, the width of the page is static and content does not flex to its parent containers. The Caravan team wanted to be able to maintain formatting for print as their customers want to print out a tour page's info to keep handy for vacation planning. However, a responsive website should have a flexible width to adapt to various screen sizes. Modern sites nowadays have separate style sheets to make sure that the content conforms neatly to a sheet of paper.
Dense Content
When websites utilize a two-column layout, the left side is typically used for navigation and not content, but the Caravan site does not follow this convention. In order to fit as much information as possible onto one page, the left column is overloaded with text. This information hierarchy may not map to a user's mental model and can be overwhelming to a first-time visitor.

Discovery: Design Thinking Workshops

We started off this project with a week of design thinking workshops. The goal was to assess our assumptions about Caravan site visitors and come up with hypotheses that we can validate through prototyping and testing.

This project began at the start of the COVID pandemic, so we were unable to meet in person for these workshops. Facilitating design thinking workshops completely remotely was a new challenge for me. Rather than physical whiteboards and sticky notes, I adapted our process to digital tools, namely InVision Freehand. To simulate the whiteboarding workshop environment, I screen-shared my Freehand board and made notes and drawings with my iPad Pro and Pencil.

InVision Freehand proved to be a super helpful tool for live collaboration. Participants were able to follow along and they could see exactly what I was making note of during our discussions.

View Discovery Findings Slide Deck

Challenges

Content-Heavy
‍In our discovery, we learned that the website is extremely dependent on content. The Caravan team needs to be able to update tour information every season, and anything from the day-to-day itinerary to hotel details may need to be adjusted. However, there is currently not a good system in place for the team to manage and update the content on the site.
Content-Driven Design
‍The content-heavy site was also a UX challenge. Thought it may be feasible to have that much content on a desktop, having all that text on a mobile device was not ideal. I conducted user testing on the current design of the mobile site and users found it to be an information overload and expressed how difficult it was to find what they want. Our stakeholders thought that having all the information on one page would empower a user in trip planning, but in reality, it overwhelmed them. In order to create a more delightful mobile experience, we needed to redesign the tour pages in a way that would allow the users to get straight to the stuff they want to see.
Mobile vs Desktop
‍Our stakeholders came into this project with the thinking that mobile and desktop were two different platforms and thus two different user experiences. Because of that, a large majority of the project was initially focused on building the mobile interface first, then worrying about the desktop later. However, that is not it works with responsive web design – the website is one product, and the UX should be essentially the same across all platforms. The challenge here was educating our stakeholders in responsive design principles and showing them how Caravan.com can exist as a single product that adapts to multiple devices.

scrolling and scrolling...

User Flows

The redesign of caravan.com began with user flows. I broke the site down into different areas, depending on what a site visitor may be trying accomplish when visiting the website. It was important to detail how the user interacts with each page of the site for a seamless navigation.

Below is the brochure ordering user flow. Customers and travel agents can order free physical copies of brochures from Caravan delivered straight to their mailboxes.

Atomic Design System

As I was creating the prototypes, I compiled each element and component together into a design system. I utilized the atomic design system method, which started with the basic building blocks like typography, colors, and icons, which formed the core UI elements, and those in turn combine to create components and finally layouts. Breaking down the interface this way helped ensure a consistent design throughout the site and provided reusable components. In addition, I spec'd out each UI element and paired with our developers so that the final product would match the designs precisely. I also created a responsive matrix for core page layouts to show how the interface would adapt to various widths and devices sizes, ranging from mobile to tablet to desktop.

Interactive Prototype

The demo below shows the redesign of a sample tour page. Each tour page section was contained in collapsible accordion components. This shortened a tour page drastically and allowed for more streamlined navigation.