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?
My role with RCI was UI/UX designer. I worked within a team of 3 total designers, 2 data strategists, and rotating teams of engineers. I collaborated on all designs with the team and was responsible for crafting the final designs that were handed off to the engineers.
While at RCI I took on two major projects, as well as many other smaller projects that are not showcased here. These two projects were the creation of a new digital style guide and a redesign of the resort search experience.
Digital Style Guide
When I joined RCI the only style guide that was in place was an out-dated marketing style guide from over 10 years ago. This, along with the fact that there was never an in-house product design team lead to many errors and inconsistencies within the product.
Old Palette and Typography
The original color palette contained 9 different colors with no defined set of rules. Shades, tints, typography and the use of icons were all used haphazardly with no clear system in place. The result was many different variations of the same color used throughout the product in places where the color should be consistent. The combination of all these inconsistencies created a very difficult user experience.
The solution consisted of a color palette that maintained the original 9 colors but was expanded in a manner to create a workable system.
Proxima Nova was kept as the primary typeface but the text styles were designed to be more responsive to varying devices and to be more adaptive to new UI components.
Grid and Growth
In order to grow a system of rules was put in place. Colored typography must meet the WCAG 2.0 contrast standards. Buttons and icons must also follow these contrast guidelines. Design of componets should adapt around an 8px grid with consistent 8, 16, 24, 48, 64 pixel spacing.
When RCI was created, it began as a mailed direct-to-member catalog. Up until 2018 the web search experience was not much different than how it began over 40 years ago. Redesigning search was long overdue.
Filters were placed in multiple locations, alerts and fees were always being thrown in your face and the data on the search cards were put together with no clear hierarchy in place.
Reduced cognitive load
Keeping track of your search process was a huge problem. Members would frequently call the call center to help them find what they want.
No good solution existed for our users need to view and search resorts with an interactive map.
The old filter design created a lot of clutter that interfered with the search cards. Moving all of the filters to the one location in the nav bar helped to simplify the search experience.
Reduced cognitive load
Often times different filters and search parameters would go unnoticed and would be hard to find. The single line of filters in the nav bar creates one point of reference during the search experience. When something is selected it will change colors and be accessible throughout the entire search process.
The creation of an interactive map proved highly successful. The map allows users to directly scan the shoreline for beach resorts or scan major cities for resorts nearby. Location was our member’s most important requirement for booking vacations. We needed to give them a way to search with location first.
On the left, you will see the original search cards. These cards contained a lot of important information but were put together haphazardly. The resort ID number is located inside of the resort name which makes it hard to find, the location is styled the same way as the resort name, causing them to blend together.
On the right, you will see the redesigned search cards. The largest improvement with these designs was pulling the location out from below the resort name and calling it our in all uppercase at the very top of the cards. Members often would search solely on location, making this a necessary feature that received a lot of positive feedback.
Other improvements can be seen in the display of the price. By making the prices uniquely different from the other data within the card, we were able to reduce the cognitive load of the user by making it easier for them to scan down the page.