I’m probably the least fashionable person I know but I have to admit to thinking that Rent the Runway is a genius idea, even though I’m not in their target market and I will never be because it’s a service where women can rent expensive luxury dresses at a fraction of the price.

While it may be an excellent idea, ideas are nothing without great execution and design plays a big role, especially with something that predominantly exists online like this.

Despite my lack of fashion knowledge, I worked with a fashion retail company (as a UI designer) who have over 4 million users, so I find Rent the Runway fascinating but you don’t have to have any fashion sense for this study because there’s plenty to learn about great design in general that can be used in any type of design.

As of the most recent available figures, Rent the Runway have 5 million users and they haven’t got there without great design. When you have that many users, even slight improvements to the design can have huge wins.

From their about page:

“Rent the Runway is a fashion company with a technology soul”

That all but confirms their dedication to great design. Great technology can’t exist without great design.

“By giving people access to remarkable luxury experiences, we’re changing the meaning of ownership — and revolutionizing retail in the process.”

At face value, “luxury experiences” means the experience of wearing a high quality dress but really, it’s much more than that. It’s the entire experience including online, searching for a dress, seeing others wear it, finding more about a product, checking out and more.

Now we know some more information about Rent the Runway, let’s dig into the great design of their unique service.

A Typeface Tells a Story

The visual importance of words can have a dramatic effect on the perception of a design.

The primary typeface choice of Genath looks great in context of a luxury design but let’s evaluate it isolated, without being surrounded by luxury fashion images and a luxurious gold-like colour.

Even on its own you can see it’s a great choice for luxury. We’ve been conditioned to associate this style of typeface design with elegance and luxury, so it’s a perfect choice for Rent the Runway.

Using Engravers’ Gothic with its all cap appearance adds a modern feel to the design complimenting the classic look and feel of the primary font.

It also gives a nice visual contrast to Genath and works well for the UI elements such as buttons and navigation.

Emotion vs Function

Genath is used to set the emotional tone, while Engravers’ Gothic is more functional giving clarity to the UI design.

It’s All Gold

Actually the use of gold-like colour is used sparingly but the minimal use of it adds to the overall elegance. It becomes instantly noticeable, contrasting perfectly against the other colours, black and grey.

Homepage

The first think you’ll notice is the video background. It doesn’t exactly explain what the company is but it doesn’t need to because of the great headline sitting on top (which I’ll get to shortly). As such, it plays the role of being aspirational, informing first time visitors to the luxury quality they offer.

It reminds me of airbnb which does exactly the same thing.

“Enter Your Endless Closet”

The very first message that welcomes you to Rent the Runway is an example of great copywriting.

“I have nothing everything to wear”

It plays off the common fear women have when it comes to clothes and fashion, grabbing your attention by emphatically crossing out “nothing”. This visual design element is great because it literally crosses out a fear and replaces it with the solution.

At this point, I already want to high-five the designer and the copywriter.

The call to action button is very well worded too, enticing people in with what Rent the Runway offer and what people want. “Enter your endless closet” is so much better than “Enter” or “Start shopping” which just aren’t interesting.

Iteratie, Iterate, Iterate

During the process of writing this study, Rent the Runway made a slight change to the homepage.

Gone is the button with its well written copy, replaced by a search bar and a more obvious button design. As good as the copy was on the previous button, it wasn’t as visually strong as the gold one used in the new search bar.

Anyway, it seems Rent the Runway are iterating their design. It may seem like a small thing but this is the entrance point to their service itself so it’s incredibly important. Small changes can have big results, especially when you’re designing for over 5 million users.

I would have like to see the button button say “Search your endless closet” rather than just “Search” but the at least the call to action is now much more obvious.

Perhaps they’re testing or simply iterating the design but one of the best ways to do improve a design is to observe how people are using it. I wouldn’t be surprised to learn that the design team discovered not as many people where following through the call to action as they hoped and looked at ways to make it more obvious.

Let’s think about this a bit more deeply because it may be a bit more complex than that.

Forcing a selection of the date and size before seeing what’s available may well reduce frustration of finding a dress and coming up against the disappointment of it not being available when needed.

The key takeaway here is that great design is never finished no matter how great it is. There’s always room for improvement.

Extra Details

I noticed a nice little design detail that won’t be obvious until you start using it multiple times.

The search bar keeps the date and size selection(s) you last entered when you return, which is great if you get distracted part way through the process and need to come back to it later.

It doesn’t affect usability if you do need to change the date as it’s still the same process of clicking or tapping on the date field.

Great design helps without getting in the way.

Where’s the Social Proof?

One thing the homepage can benefit from, which I’m surprised is missing, is some form of social proof. There is a clever use of social proof on the product details pages as you’ll see later in this study but nothing on the homepage.

What is social proof? In the case of Rent the Runway, it would be the positive influence from others who have used the service.

Social proof has proven to increase conversions, so I would add 3–5 testimonials from actual users here. Even just mentioning the 5+ million users would is a form of social proof and would increase trust and improve conversions.

Product Details Page

The first thing to notice on each individual product page, is the amount of space given to the images. They are front and center, as they should be but there some nice details to highlight too.

Price

This isn’t a standard shop, so there are two prices. The price you pay to rent an item and the actual retail price.

In the example above, the dress is almost 20 times cheaper! Placing these prices together reinforces the affordable (notice I said affordable, not cheap) rental price making it more appealing.

I know this well from working with a company that discounts items as much as 70% where there can also be significant monetary savings to be made.

Rent the Runway could also include the percentage saving but associating the price with a discount may take away from the luxury feel. You don’t want to make shoppers feel like they’re in Walmart or Tescos when they expect luxury.

Individual Product Social Proof

There’s an interesting inclusion in the product gallery area of each image that I haven’t seen before.

The last image in the list of thumbnails is a photo of a customer wearing the dress you’re browsing. Clicking on it takes you to the review with an image attached and from here you can browse all reviews with photos.

Encouraging customers to include photos with their review is ideal for the service Rent the Runway provide.

If you look at the photos, everyone looks happy. No one is going to share pictures of themselves if they don’t like the way they look!

Reviews and testimonials with photos of the reviewer increases conversions but Rent the Runway have taken it to the next level by integrating them into the product gallery.

Checking Out

The checkout process is an important part of any e-commerce design and Rent the Runway wouldn’t be a Learn from Great Design study if it wasn’t great.

Let’s start with the moment you press the “Reserve Now” button on an item.

“Customers wore this with…”

Above is a clever use of social proof. You’ve seen the same technique on sites like Amazon but I wasn’t even aware you could rent accessories with Rent the Runway until this moment.

To be fair, I’m not exactly the target market for Rent the Runway (I just don’t have the figure!) so I didn’t go looking for accessories but people may have missed it, so it’s a good way to introduce it as well as using it for social proof.

Primary vs Secondary Action

At this point, you want the user to easily know how to progress to the checkout but there is an opportunity to offer something else with a secondary button.

There’s an offer next to the checkout button but it isn’t too distracting. Checkout is clearly top of the visual hierarchy, as it should be.

The best way to test primary and secondary actions is to place them next to each other, regardless if they ever actually appear next to each other in a design (they may well do in a future design). If the primary action isn’t obviously the one that stands out, you need to reduce the visual importance of the secondary action or increase the visual weight of the primary one.

Mini-Bag

Upon clicking the bag icon, the contents of your bag slides in from right hand side in a narrow column design. I call this the mini-bag.

The purpose of it is to give you a quick overview of everything in your bag without disrupting your current shopping/browsing experience. It slides over the top of the page and is easily dismissible so you can carry on uninterrupted or indeed head on to the checkout page, which is where we’re heading next.

Checkout

Those with a keen eye for detail will notice the navigation has been removed. Giving people less choice increases the chances they will complete the checkout process.

Placing the ordered items at bottom of this page may seem like an odd place as it might be easy to miss but as you’ve come from the mini-cart, where you have already confirmed your items, the payment and address forms should be prioritised.

Pro

The “Pro” service offered by Rent the Runway makes it cheaper for repeat buyers if they pay an upfront fee. If offering a service that entices people to come back, make it stand out visually.

Introduced here is a new dark green colour chosen to catch your eye because it isn’t seen anywhere else on the site.

The cream coloured box is not new but it definitely contrast with the rest of the page. You can’t miss it but it doesn’t distract too much from the task at hand.

Let’s Talk About Overlays

Designers will forever tell you overlays are bad but that’s not always the case as they can have a positive effect for business. They work. That said, I acknowledge there’s an annoyance factor. The best way around this is to offer something of value to make people happy. That way, the business benefits and the user benefits. Turn it into a win-win situation, rather than win-lose.

This overlay appears when you arrive at the page for the first time. While it may be annoying to some, others will be delighted to see a 20% offer. Without this incentive, this would be completely annoying.

This is a one time overlay, meaning it doesn’t appear after the first time you’ve seen it. I haven’t seen it appear again during my hours of studying the design.

Mobile Overlay

The mobile app overlay that appears oh smartphones is a different story, however. This overlay is definitely annoying as it doesn’t offer any value, even though it attempts to.

“Life Just Got Easier”

How? Unfortunately, it’s a claim without any substance.

As soon as you close the overlay, you get full access to their mobile responsive website.

Rent the Runway don’t give any value to use the app, like they did with the signup making it a win-lose situation because there is no obvious benefit to the user.

A Luxury Service Deserves a Luxury Design

Rent the Runway is a service for women who want to experience luxury products. Their luxury design gives people trust that they are shopping for luxury items.

Source: Inspect Element