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.

OVERVIEW

Before joining RCI there was never an in-house product design team in place. As the design 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 more systematic ways to guide and leverage our collective efforts.

The initial outcome was to have a collection of reusable components, guided by clear standards, that can be assembled together to quickly build any number of consistent experiences.

ROLE
  • Lead UI/UX Designer
  • Team of 3 designers and 20+ developers

The Problem

After conducting a product audit and going through hundreds of cases of member feedback it was clear that RCI needed a new design language in order to make the product more consistent, intuitive and delightful.

BUSINESS GOALS

Reduce the number of calls to the call center. Make the product intuitive to use for existing members as well as new first-time users.

The Solution

1

A Design System

The primary solution was to come up with a design system that was guided by principles and best practices. Also, to keep documentation at each step to ensure consistency and efficiency of work.
2

Personalization

To solve the problem of complexity it was important to eliminate any unnecessary elements and do our best to predict what the user wanted.

The Challenges

1

Getting the team onboard

A Design System is not a one-person project and if you want it to succeed you need everyone on board. The more integrated you want it the more disciplines you need at the table.
2

Planning & Priority

Failing to plan is planning to fail. We constantly toggle between working on our Design System and improving its workflow and integration with both the design team and the larger product teams.
3

Breaking this news to our agencies

RCI also has a few third-party sites managed by outside agencies. Although these teams were aware of our previous style guidelines, there was never a way for them to stay up-to-date with any changes made to the main product. We looped them into our process so they could create our third-party sites while still maintaining consistency.

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

Creating the Design System

This system is based largely on the principles of atomic design. The key idea behind this methodology being small, independent – atomic – parts, can be combined into larger molecular structures.

This foundation loosely 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.

Bringing it all together

While creating these components, we collected them in a sketch master file, which we referred to throughout the design process. After a week or two, we began to see huge leaps in productivity by using the library when iterating on designs.

While the library was growing, we started organizing individual components into artboards containing similar items. These artboards were then organized by general category into Grid, Colors, Type, Actions, Form elements, Feedback indicators, Interaction states, Structure, Lists and tables, and Other. Product teams, developers and all other people not within the design team were able to view the complete design system through InVision.

and many, many more…

Problems solved: The Search Experience

Creating the RCI Design System solved many problems, but I would like to focus on the most used feature 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