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.
WHAT IS RCI?
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.
- Lead UI/UX Designer
- Team of 3 designers and 20+ developers
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.
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.
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.
Filters were not clearly categorized and could not be accessed at all points of the page.
CTA’s on the search cards did not create enough urgency to get users down the funnel.
Too much dead-space that could be leveraged in a more beneficial way.
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.
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.
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.