Ricardo Beverly Hills

Role — Research, UX Design, UI Design, Prototyping, Design System

A mockup of the Ricardo Beverly Hills website on desktop and mobile sizes.


People travel for the experience. It starts the moment they pack their suitcases. It continues until they find themselves home again. Ricardo Beverly Hills is a company that takes that journey with you. They needed to reflect that experience for customers on their site.

Mobile Screenshots of the Home and Collection pages over a brand lifestyle image.

Ricardo Beverly Hills consists of three brands. We partnered with their team to create an immersive eCommerce experience that encompassed each brand under the Ricardo umbrella. We ultimately combined three brands into two Shopify storefronts so a sitemap was crucial.

Sitemap for the combination of Ricardo Beverly Hills' three brands.

Clean and Modern, Just Like Their Luggage

Two of the key project goals were to elevate the brand experience and establish a new typographic system. They wanted to stay within the offerings of Typekit or Google Fonts so I developed a series of typographic studies with their current content. We landing on Open Sans as their workhorse.

Type studies for Ricardo Beverly Hills featuring Open Sans.

Customizable Sections

One of the benefits Shopify offers is its ease of use from the admin panel. Within its sectioning capabilities, we designed a robust system of options to give the Ricardo team the flexibility to tell their story as they wanted. They have a strong internal marketing team so giving them the keys to customize their site was a huge win.

Home page section documentation.

Descriptive Thumbnails

Luggage images at tiny scales degrade into colorful rectangles. I worked with our developers to make the default Shopify thumbnails more useful for the customer. We designed a simple alt tag system for the client that pulled in a snippet of the image description to replace the default Shopify thumbnail image. That way the customer can quickly see what views are possible. By clicking on the text thumbnail, the page scrolled the user to that view.

Side-by-side example of the default Shopify thumbnails are our custom descriptive thumbnails.

Since this system was a new way of generating product pages, it had to be simple. The client already writes the alt tags. We added the functionality in that attribute to double as screen reader content and a thumbnail replacement. The alternative way would be to add a separate custom meta field, doubling the areas of input and time.

Code showing how the alt tag affects the thumbnail customization.

Capitalizing on Internal Talent

Ricardo Beverly Hills has an amazing internal photo and video team. To highlight their skillset, we reserved space on the product page for a video showing the luggage in use. Luggage is a product that generally requires research. When a customer can visualize themselves with their product the chances of them aspiring to have it increase.

Wide Open Spaces

The client wanted to maximize the amount of horizontal real estate to show off their beautiful luggage. With that goal in mind, we developed a horizontal filtering system to allow easy product discovery while letting the images take center stage.

The Complete Journey

The final design gave the client the ability to add the storytelling they wanted to. It also helped engage their audience in a way that matched the exceptional experience they have when traveling with Ricardo Beverly Hills luggage.

Home page section documentation.


Research, UX Design, UI Design, Prototyping, Design System


Ricardo Beverly Hills while working at Gauge


Sketch -> InVision

Live Site

Visit Ricardo Beverly Hills