Scarcity

PERSUASIVE DESIGN

MAKING THINGS DESIRABLE

THE CHALLENGE


J.Crew.com was experiencing a noticeable decrease in the Order Average Value (OAV). Assuming the more expensive items have higher margins, there is an important opportunity to improve positioning for those products. By increasing AOV, our online business increased their ROI.

THE TIMEFRAME


3 months

MY ROLE

Research, User Flows, Game Interface, Mid-Fidelity Wireframes, Interaction Design , Prototyping

THE IDEA

We wanted to influence our users showing the popularity of our items and boost revenue increasing our OAV. This heightens their urgency to complete a purchase, which results in a mixture of a customer’s desire for a sense of belonging and their fear of missing out or loss aversion.

How Make Things Persuasive

Scarcity is one of the psychological bias that makes us place a higher value on things that are more scarce than those in abundance. In summary, we tend to like things that are harder to obtain.

This technique is pretty common in industries focused on traveling and hotels. Fashion brands, in general, are not the kind of business that feels a strong interest in these methodologies of persuasive design. There is some skepticism about integrating features that belong to other industries since brands don’t enjoy being associated with low-end retailers with aggressive-desperate sale strategies.

Communicating Urgency

One of the most important things that I noticed while I was developing this feature, is that the success of this specific product relies for the most part on the way you communicate the message. We want the message being the trigger of a user behavior, and in this case, we want the customer to add an item before is sold out.

The sense of urgency is stronger if it’s defined by two keywords: time + quantity, however, this language it has to be surrounded within a subtle framework.

My first messaging draft

THE DESIGN

Initially, for the first version, I placed this urgency indicator on the top, heading the product description after meeting with some stakeholders. There was a lot of controversy about placing the scarcity element close to the ‘Add to Bag’ button. From my UX perspective, I had strong reasons to defend localization, since this element is contextual. The purpose and content are associated with a UI element (‘Add to bag’ button) and should be shown in close proximity to that element.

After conducting user testing using UsabilityHub, the option with the scarcity feature just below the call to action was the winner. I shared the results and we decided to work with this design.

Persuasive Design Visual Concept


Creating a sense of urgency became popular because it’s extremely powerful and fairly easy to implement. And the reason it’s so effective is because it combines multiple biases into one.

Testing Placement V2

Testing Placement V1

Testing color variations

Testing color variations and positioning

Usability Testing showed that the orange variation performed better but the difference was not statistically significant.

Adding Motion

For the mobile visitors, the trigger that starts the animation would be when the user scrolls down until the ‘hotness’ icon appears on the screen. If the user scrolls up, the animation stays as-is, in order to not overwhelm the user with additional motion. The animation only resets from the beginning when the page is refreshed.

For desktop, the animation would start determined milliseconds after the PDP is loaded to guarantee the visualization from all visitors.

Emotion drives action

Option 1: ‘Users have seen’

Option 2: ‘Users have seen’

Option 3: ‘Users have added’

Love it? Visit J.Crew.com


Proudly crafted in NYC with ❤
Copyright © 2018 Carla Giannina.

This is a unique website which will require a more modern browser to work!

Please upgrade today!