J.Crew data showed that shopping bag abandonment had increased slightly during the last quarter and that customers were leaving the site without completing their purchase. This metric was the trigger to introduce a new strategy to recover those customers and keep them motivated during their shopping experience.


3 months


I led the interaction design of a Gamification feature for across desktop and mobile since the outset of the project in November 2017.


Several studies point out that one of the reasons customers abandon their shopping bags is primarily the lack of free-shipping or unexpected/high shipping costs.


Source: Statista

At that time, J.Crew was offering Free-Shipping to all our customers, however, this perk had their own constraints: a non-competitive $150 threshold and only for a limited time. At that point, the company was not in the position to offer a lower shipping threshold, nonetheless, aware that other fashion competitors where providing Free-Shipping in lower expenses, we realized that we had a massive opportunity to dramatically increase revenue by converting this limited perk into something more dynamic.

A good strategy is transforming any experience in a Gamification process. The word “Gamification” stands for the technique of exerting game mechanics into a non-game environment.

Users need the motivation to return to a digital product every day. One of the most powerful motives that moves people to do something is a desire to prove that we are able to handle any kind of challenges. When users have challenges to handle and missions to attain, they have reasons to come back to an app or website.

Applying gamification on this functionality would allow users to know through a dynamic way how many items have left in order to get free shipping during the customer exploratory phase and the checkout stage.

Using gamification it becomes easy to target, engage and convert prospective buyers because of the human nature to compete, win and feel rewarded.


After collecting the initial insights and data of this project, I performed a competitive analysis to evaluate how other competitors were displaying their Free Shipping strategy.

During my research, I had to expand the range of industry since Fashion had only a few examples. One interesting finding was that most fashion brands, especially those ones which have high-end customers, seemed to be reluctant to apply persuasive design principles like gamification or similar across their site, trusting more traditional formats like banners or modals, in comparison with big department stores such as Target or Walmart that use more aggressive strategies in order to increase conversion.

The key part of designing this feature was to think about how to cause an immediate reaction in new and returning customers. My approach would be an animated horizontal progress bar that would display messages to our users every time an item was added to the shopping bag, informing their progress towards their reward, in this case, our amazing Free-Shipping.

Creating Interactive Stages

One complex challenge that I faced was creating different stages and discussing with the product managers and developers about possible conflicts with other current promotions.

Scheme for stages process and interactions

The Controversial Green Bar
Fashion brands are well known because of their minimalistic interface. J.Crew was not an exception, so when I presented my first prototype using a bright teal it did not go unnoticed.
My first intention of using this color was the association of this teal green with wealthy and positive feelings. The user would be rewarded while using this feature and as a designer, I wanted to support this connotation. However, after a discussion with other stakeholders, they agreed that this tone was not appropriate in terms of branding. Several mockups were created using orange and black, being the black option one who got a poor performance in terms of visibility during an internal usability testing, leaving orange the final winner that would be sent to production.

Teal Variation

Orange variation

Black variation

Finding The Right Place

Placement of this feature was a huge deal. The requirements were to place the gamification feature in the Mini Bag, which is a small flyout that belongs to the main nav, and also in the Shopping Bag page. My first attempt was on the top area of the mini bag fly out, however, when I built the prototype in Principle I felt that the “progress” feeling was dissociated from the items lists. I did a quick internal test and the results revealed that the feature placed on the bottom was positively perceived. The Product Owner agreed on this statement and we continued working on these placements.

  • Mini Bag: Stage 1

    Mini Bag: Stage 1

  • Mini Bag: Stage 2

    Mini Bag: Stage 2

  • Mini Bag: Stage 3

    Mini Bag: Stage 3

  • Shopping Bag Page

    Shopping Bag Page

The closer we get to a goal, the more motivated we are to complete it.


Metrics after launching:

  • Gamification was launched in February 2018 in the mini cart and shopping cart.
  • The component was tested via A/B testing Monetate, 50% control, 50% experiment all countries (desktop & mobile)
  • Data showed that this project boosted +7.75%  J.Crew sales with a noticeable decrease in cart abandonment.
  • After the success of this project, senior management decided to scale to all customers.
  • As a result of this project, leadership approved new experiments with different prizes to test what reward generate more sales in order to evolve the gamification component.

Love it? Visit

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

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

Please upgrade today!