Revinate: Case Studies

Audience Segmentation Builder

This initial concept (above) was exploring a new way to build audience segments from our data lake. With over 15,000 available datapoints to choose from we needed a more robust way to explore and group information.

From demographic, geographic and historical behavior, to "AI" recommended actions - there an endless number of ways a user could build these segments. Compounded with dozens of "AND/OR/EXCLUDE/IF/THEN/INCLUDE" modifiers we ended up with multiple layers of nested arguments we needed to clearly group and define. I built this initial concept as a visual representation of "nodes" and "flows".

Each flow could have multiple branches of arguments, while each node could have multiple modifiers. This enabled a user to target "Couples With Kids -> Within 100 Miles OR VIP -> Greater Than 150 Miles" as long as neither has stayed at one of our hotels within the past "180 Days".

Due to engineering constraints it was decided to abandon a complete overhaul and simply enhance our existing approach. We kept many elements of the old UI from a dropdown / modal perspective while keeping the node / grouping concepts from my first draft. We also opted to allow multiple segments to be grouped together, and those groups applied to reports and campaigns in order to allow our customers the ability to mix and match segments together. This feature extensibility allowed for a cleaner, more streamlined approach as opposed to managing and tweaking monolithic segments that were created individually.

First Unified Design System

When I joined Revinate they had just purchased and merged two new companies: Navis and GoMoment. On top of that they were making the initial migration from Sketch to Figma.

My first job was to unify all three environments into a single, unified design system that Engineering could replicate in Storybook for the rebrand initiative.

Rebrand & React

About a year after our first design system launched, the company chose to rebrand. Engineering took this opportunity to start migrating from Angular and .NET to React. I lead the initiative to build our second design system iteration and component library, expanding it dramatically with the addition of state management.

Leading the charge ...

As the design system architect it was up to me to create new design patterns, maintain our existing library, and train others on best practices and emerging Figma design trends.

Marketing: SMS Upsells

Prior to 2023 our Marketing Platform was email only, and our Product team wanted to expand that functionality to include SMS upsells to our customers. For hotels, an SMS upsell could be offers for dining, golf, gambling, or spa - but they need to be delivered contextually based on a guests profile history.

This feature allows hoteliers to send an SMS campaign to any guest that includes message-specific URLs with customized tracking data. And it targets hotel guests intelligently based on detailed segmentation data. It provides analytics that can be viewed separately from email offers in the same campaign, or in aggregate.

Marketing: Email Management

I overhauled the image library, adding search and filters for campaign images to our email builder. Unsplash integration and revised thumbnail components also allowed for extended functionality around grouping and sorting images, as well as version controlling them.

Enhanced send controls also gave users more granular access to rate limits and batching, preventing call rollover and smoothing out traffic spikes for sales events.

API In/Out

Updating data in real time is the only way to truly enhance customer experiences. And for this reason the Product team decided to implement third party API connections to over 100 of the biggest ancillary systems in use by our clients across the globe. Tagging, grouping, flagging, mapping, and translation services were all required to expand our current interface, in addition to the new feature controls and workflow required to enable this functionality.

Reservation Sales

For 2023 it was time to rewrite Reservation Sales from the ground up. We introduced a new telephony system, Rich Guest Profile integration, and a greenfield experience across the board with the introduction of React. As you can see below the old interfaces were quite dated. The Product Requirements Document (PRD) included a wireframe of all the potential steps and conditions that a call center agent might experience depending on the hotel property they are representing. These permutations were represented in various layouts as conditional logic.

You can find an interactive Prototype here: https://youtu.be/eV5GjNztzMs

Ivy is a chat SaaS platform for the hospitality industry.

It allows hoteliers and contact center agents to manage communications with their guests, and share the associated requests with the rest of the hotel maintenance staff.

Chat View

At a high level the new Chat window breaks out user communications into a series of inboxes. Urgent messages are considered orphaned, they constitute messages that have not been responded to in a certain amount of minutes, or if a guest sends a certain number of messages that are currently unread within any threshold of time. A message can also be flagged urgent based on any number of historical flags attributed to a specific user (VIPs, repeat guests, "known problems").

Unresolved, resolved, and archived message statuses are self-explanatory.

Tasks

Ivy Original UI

This was the legacy UI that our new interface is replacing. It did not include tasks, which staff had to manually keep track of.

Wireframes

The top wireframe represents what order to lazy load dashboard graph data. The second wireframe represents how to handle obfuscated customer data based on user role for compliance purposes. The bottom wireframe represents lazy load order for email campaigns reports.

Posted on Jul 27, 2022
Blake Howard
Design System Architect, Senior Product Designer

More by Blake Howard

View profile