Introduction

WHAT IS RCI?

RCI is a timeshare exchange company with over 4,300 affiliated resorts in 110 countries. It functions as a member-based exchange marketplace, where timeshare owners can deposit their timeshares and exchange them for others.

PROJECT BRIEF

I joined RCI to lead the design of their very first in-house product design team. As the team grew, it became increasingly important to maintain a consistent style and visual language across all areas of the product. Working within a company of people distributed around the world, building a product in over 100 countries and nearly 4 million users it was clear that we needed a more systematic way to guide and leverage our collective efforts.

Before beginning work on the RCI Design System (RDS) there were no established UI standards that covered the product, or anything that served as a ‘single source of truth’ for anyone on the team. In fact, since there were no designers, PMs and SCRUM masters were referencing and re-drawing what was on the live site —  not an ideal situation for any product.

OBJECTIVE

Design a flexible and scalable design system that can grow alongside the company while making the product more consistent, intuitive and delightful. Working with the design team, UI engineers, data analysts, and PMs I proposed a system of styles and guidelines to support the development, implementation and growth of the RDS.

Audit

COLLECT THE CURRENT STATE OF THE PRODUCT

The first step of my design process for this project was to conduct a full product audit of all atoms, molecules, organisms, templates and pages that made up the product. Before moving forward, we have to first know where we are.

Empathize & Research

WHO ARE THE RCI USERS?

Through the help of our data team, tools like Optimizely, one-on-one discussions with RCI Booking Guides, my team and I were able to generate a good understanding of our complete member base.  The RCI members were split roughly down the middle between men and women, 70% of members were between the ages 50-70, and it was made clear that this group is not particularly tech-savy. When speaking with people working in the RCI call center, they made it clear that in the past, when large changes were made to the UI of the product, they would experience a significant spike in in-bound calls.

Ideate

“Ideation is the mode of the design process in which you concentrate on idea generation. Mentally it represents a process of “going wide” in terms of concepts and outcomes. Ideation provides both the fuel and also the source material for building prototypes and getting innovative solutions into the hands of your users.”

– d.school, An Introduction to Design Thinking PROCESS GUIDE

WHY IS THE PRODUCT DISJOINTED?
  1. Components that should look and function the same way throughout the product are not.
  2. New releases are using designs that have no logical form of growth or direction.
  3. Some components are hard to use and have not been rethought for years.
HOW CAN WE FIX IT?
  1. Create consistency throughout the entire product. 
  2. Follow the “Atomic” approach for our component construction. This way there can be clear, guiding principles on how to implement and grow the RDS.
  3. Design components to be more human-centered and less mechanical.

Fig: Newly redesigned search experience, using components from the RCI Design System.

Creating the Design System

Design Systems are only useful when they’re easy for Engineers to use — otherwise Designers are operating in a vacuum. From the outset, my team and I involved UI Engineers from across the business to build the necessary tooling that sees each component visualized, tested and self-contained — ready to be used by anyone who implements code. The best way to do this was by using the “Atomic Design” methodology.

This foundation defined our typography, colors, icons, spacing, navigation and information architecture and proved essential for guiding our work in a unified direction. Reviewing our collective work at the end of each day, we began to see patterns emerge.

We course-corrected when necessary, and started defining our standardized components.

and many, many more…

Problems solved: The Search Experience

Since the creation of a design system is a large holistic approach to a product, the testing and implementation had to be done accordingly. I didn’t want to introduce newly designed components into existing pages, but rather release a full redesign of a page in its entirety. In order to do this, we focused on one specific part of the product — the search experience.

Before

FILTERS

Filters were not clearly categorized and could not be accessed at all points of the page.

CTA’S

CTA’s on the search cards did not create enough urgency to get users down the funnel.

SPACE

Too much dead-space that could be leveraged in a more beneficial way.

After

FILTERS

Filters were renamed and reorganized to create natural and intuitive groups. Placing them in the sticky navbar also made it possible for the user to quickly edit their search even if they scrolled halfway down the page.

CTA’S

By changing the CTA copy in the buttons on the search cards we were able to get more users into the booking funnel. When users saw “300+ Units Available” during their search, it didn’t create enough urgency for them to take action. Changing that copy to “Book Now” prompted the user with their main goal of the search experience.

SPACE

Location was our member’s most important requirement when booking vacations. In order to give them a way to search with the location as the main focus, we introduced an interactive map that allowed for a more visual search experience.

Leave a Reply