Buy Your Forever Sofa

Adding the Option to 'Buy'

Feather is a pioneer in the circular economy, with a mission to keep furniture out of landfills. Feather does this by offering high-quality rental furniture - that at the end of its rental period can be picked up, refurbished and redeployed. In order to increase revenue, stakeholders decided to offer flexible purchasing options, so customers would have the option to rent or buy their favorite couch.

Don’t Add Friction

The site already had a lot of decision making moments for users, such as: Are you in a delivery area? How long do you need your furniture? Do you want to be a member and pay less? My task was to add another choice in the user journey that didn't increase confusion and friction. On this project, I worked with 1 Project Manager, 4 Engineers, and 1 QA Engineer.

Research the Best Practices

I love The Baymard Institute! It is a premier source of ecommerce recommendations and best practices based on 88,000+ hours of research. It is one of my favorite tools for quickly researching ecommerce user behaviors. The Feather journey is more complex than the sites Baymard uses for its case studies, but I still found some good recommendations to keep in mind (shown below). I also did a analysis of our direct and indirect competitors to see how they used the UI on their sites to give users multiple options to rent or buy.

Recommended Best Practices

Concepts

I designed three concepts for the Product Description Pages to show users that they could either rent or buy furniture from Feather. Keeping the Baymard recommendations in mind, I created the following concepts:

• The Reveal: Influenced by Baymard Rule #4 -- A stepped process that leads users through the options and reveals them in sequence, so they don't experience choice paralysis.
• All in One: Cards for rent or buy -- Each card contains all the options so the user’s first question is, “Do I want to rent or buy?” -- then they can make other 'more fun' choices like color and size.
• The Clean Up: A simplified version of the rent or buy cards with Baymard Rule #1 in mind -- Focus on the essentials.

The Clean Up for the Win

Concept 1 and Concept 2 asked the user to take too many actions. Concept 1 also hid the variant choice below the viewpoint. Concept 2 had an intimidating amount of steps to take. These steps made sense for a more customized shopping experience, but felt like overkill in this context. I decided to go with Concept 3: The Clean Up. Here’s why...

• User Behavior: In past user interviews, I observed how customers are always comparing prices on our site. With this design, the unit economics of rent or buy are clearer to compare.
• Visual Storytelling: With this design, users can visually take in all the info at once: Image, price, color, etc. This gives them more overall context on the value of a product with one glance.
• Reinforces the Value Proposition: There is an opportunity to list a few of the Feather Value Propositions (the benefits of purchasing or renting from Feather) on the cards.

'Rent' or 'Buy' Iterations

After I got feedback from my team and we aligned on a concept, I iterated on the various parts of the UI. Keeping my research findings in mind, I made final iterations. Here's what I did to craft the strongest design with a clear price/ variant relationship and the least amount of distraction:

• I moved the variant dropdown to the top of the page. Variants can affect the price of the product and it's important users see that change. This way, users also get a visualization of the product variant in the main product image. If they pick a large sectional sofa they see the price and hero image change.
• The Finance Team agreed to offer a discount on 'Buy' items. So I added a strikethrough price to incentivize users to pick this purchasing option.
• I added radio buttons to both cards with the 'Buy' card open as the default choice. Having a preselected radio button helps convey the finality of the action required, reduces interaction costs for the user, and has the power of suggestion - helping users make a decision.
• I put a CTA to 'Add to Cart" (or if users hadn't yet inputed their Zip Code - 'Check if We Deliver') in each card. This makes the page easier to scan and to keeps the most vital action we want users to take within the viewport.
• I decided to keep the quantity picker even though Baymard suggests it could be removed for items that are typically sold as singles. I discussed this with the Head of Customer Service, who felt that it would add to their call load if people accidentally ordered one dining room chair when they meant to order four. So we decided it wasn't worth removing it, if it meant less friction in the PDP but more friction for the CS team in the post-checkout customer journey.

PDP Final UI - Buy

PDP Final UI - Rent

Dev Handoff - A lot of Exceptions

Many of the products offered at Feather have buy or rent exceptions. For example: It’s illegal to rent mattresses, so we can only display the option to buy mattresses to customers. Additionally, some of the furniture vendors that Feather carries allow Feather to rent their products - but not sell them. I mapped out a chart of each exception to share with the engineers so they could have a visual guide on how to handle each use case. This was a wonderful learning moment for me as the Senior Designer showed me how to do this.

Exceptions Chart

Close Up of Exceptions Chart

How I Would Approach Things Differently

Testing! This was an all-hands on deck project with a need for a quick turn around. If we had more time, I would have loved to test my three concepts. Actual user feedback would have helped to get more validation on which concept was the clearest and had the least amount of friction. Additionally, I would do usability testing with the final concept to massage out any kinks in the UI.