Platforms

Desktop
Mobile
iOS app

Roles

UX & UI Design
Prototyping
User Testing
Spec Writing

Tools

Sketch
Silverback


Objective

Easy Reorder allowed customers to quickly reorder items that they had purchased in the past, and our best customers were Easy Reorder users. We aimed to increase Easy Reorder usage and to improve the experience across all devices, with a special focus on mobile (iOS and mobile web).

The Easy Reorder project had two parts: the Easy Reorder homepage carousel, described here, and the Easy Reorder page.

Problem

Almost 70% of our top customers used Easy Reorder, but the feature hadn't been updated in years. In particular,

  • On the desktop homepage, the Easy Reorder module was easily overlooked, and only a few products were visible at once
  • With a desktop homepage redesign in the works, the existing Easy Reorder module would not fit in either visually or functionally with the new homepage
  • On mobile/tablet web and the iOS apps, Easy Reorder was not shoppable on the homepage (there was only a banner leading to the Easy Reorder page)

Solution

I redesigned the homepage Easy Reorder display on desktop and mobile. On desktop, I turned the existing module into a carousel that fit with the new modern, modular home page. I also adapted the carousel for mobile, making Easy Reorder shoppable on the mobile homepages as well.

After drafting the new designs, I created the desktop prototypes and validated the new designs for both desktop and mobile through rounds of user testing.


User Testing

After completing the first versions of the redesign, I led user testing for this project, taking charge of recruiting participants, drafting the test plan, moderating some of the sessions, and compiling a report. 

User testing details:
  • Features tested: Homepage redesign, Easy Reorder homepage carousel, and Easy Reorder page
  • 15 moderated sessions
  • 4 test versions: (a) desktop with recommendations (4 testers); (b) desktop without recommendations (3 testers); (c) mobile with recommendations (4 testers); (d) mobile without recommendations (3 testers)
  • Setting: Quidsi user testing lab
  • Participants: Existing Diapers.com customers, primarily moms aged 30+ with small children. The participants were welcome to bring their children to the test sessions as well, in order to more realistically mirror the home setting where mom was likely to be shopping while keeping an eye on her kids.

Questions that I sought to answer:

Yes, all testers across desktop and mobile added Easy Reorder items to cart without any problem. In response to the question "was it easy or difficult to shop the items on this carousel?", all 15 testers said "Easy" or "Very Easy."

However, testers did encounter some issues with eCoupons and promo codes (see next question below).

Action: None

The testers had no problem finding and using the eCoupons and promo codes on mobile, where the offers are prominently displayed on the product modal.

However, on desktop, 4 out of 7 testers rated finding and applying an offer to be "Difficult" or "Very Difficult." This was because, when hovering over a product, the product card that appears only displays "savings available." Testers had to click this text to see the specific offers.

Actions: Despite the usability issue, we chose to keep the design of the offers as is on desktop. This was because it was a priority to keep the product card decluttered in order to make it possible to shop the Easy Reorder carousel quickly and easily. In addition, the majority of Easy Reorder users were our best customers, who seldom used eCoupons and promos.

Yes, 2 out of the 4 testers on mobile and 2 out of the 5 testers on desktop who saw product recommendations in the carousel confused their previously purchased products with the recommended products.

Action: Keep the design as is and observe after release. One potential confounding factor is that we couldn't create prototypes with the testers' actual Easy Reorder products, so we could only instruct testers to imagine that our pre-selected products were ones they had purchased before. If a tester saw her actual previously purchased products next to recommended products, the distinction between the two would likely be more clear.

Carousel Variations

Variation A: Without Recommendations

Variation B: With Recommendations

The Easy Reorder carousel on the homepage worked well if the user had enough products in her Easy Reorder to fill it. However, more than 50% of users had 3 or less Easy Reorder products, so their Easy Reorder carousels would be mostly empty.

To solve this problem and also take advantage of a lost upsell opportunity, recommendations were added to the Easy Reorder carousel for all users with 3 or less products. To avoid potential confusion and mistrust, I took care to distinguish the Easy Reorder products from the recommended products with multiple visual differences:

  1. A text label separating the user's Easy Reorder products and the recommended products
  2. A different hover state for recommended products
  3. Product title and star rating for recommended products

Desktop

We opted for an imaged-based carousel because it was the cleanest and most engaging. But what should the user see when hovering over/clicking on one of the images? Below are a few iterations:

Version A

In this first version, a modal with all of the product details appears when the user clicks on a product image. However, the modal is large and requires another click to dismiss, which slows down the shopping flow.

 

Version B

This second version, which was user tested, utilizes progressive disclosure instead of displaying all of the product details at once. On hover, the user first sees the product card above. This card contains only the basic information that the user would need to know before adding a product to cart. 

Clicking the card opens a larger modal (below) with all of the product details. With more space, the product details are easier to digest.

Version C (Final)

Version B passed user testing, but encountered a roadblock in development. The tech team reported that they could not create a product card that extended beyond the carousel boundaries. Thus, I modified the card to fit within the carousel. All elements remained the same, except there was no room for the full product image.

Desktop Homepage Easy Reorder Before

Desktop Homepage Easy Reorder Carousel After

Mobile

The image-based carousel was even more essential on mobile due to limited real estate. Because there is no hover state on mobile, the best option was to display all product details in a modal, like Version A of desktop.

Mobile Homepage Easy Reorder Before

Mobile Homepage Easy Reorder Carousel After