OVERVIEW

Easy Reorder was a feature that allowed customers to quickly reorder items that they had purchased in the past. Our best customers at Quidsi were Easy Reorder users, so it was a key feature - and it was badly in need of an overhaul. We aimed to increase Easy Reorder usage and to improve the experience across all devices and touch points, with a special focus on mobile (iOS app and mobile web).

The two key touch points that the Easy Reorder project focused on were

  1. The Easy Reorder page, and
  2. The Easy Reorder module on the home page

PLATFORMS

Desktop, Mobile Web, iOS

ROLES

UX & UI Design
User Testing
Prototyping
Spec Writing

TOOLS

Sketch, Silverback

PROBLEM

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

  • Across all touch points, Easy Reorder was outdated with older graphics. With a redesign of the home page in the works, Easy Reorder would not fit in visually with the rest of the site
  • No upsells or cross-sells existed in Easy Reorder, giving up a significant opportunity to increase average order size and advertising/vendor funding
  • Easy Reorder was cluttered with little-used features, especially on desktop

SOLUTION

EASY REORDER PAGE

I redesigned the Easy Reorder page across all platforms with the following improvements:

HOME PAGE CAROUSEL

Outside of the Easy Reorder page, the Easy Reorder module on the home page was the primary touchpoint for Easy Reorder. I turned the home page Easy Reorder module into a carousel across all platforms and made the following improvements:


PERSONA

The redesign was made with a persona of our best "A customer" in mind. The UX and Marketing teams worked together to craft this persona of Abby, the busy, tech savvy urban mom:

USER RESEARCH

After completing the first versions of the Easy Reorder 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. I modified the designs based on feedback from testing.

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 I SOUGHT TO ANSWER:

Yes, all testers across desktop and mobile added Easy Reorder items to cart and understood how to delete items from the list without any problem. In response to the question "was it easy or difficult to shop the items on this [Easy Reorder] page?" 14 out of 15 testers said "Easy" or "Very Easy," while 1 tester on desktop responded with "Neutral." In response to the question "was it easy or difficult to shop the items on this carousel [on the home page]?", 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

On the Easy Reorder page, the testers had no problem finding and using the eCoupons and promo codes, but seeing multiple offers confused and inconvenienced them. 5 out of 15 testers stopped to read and compare all of the offer details because they thought they could only choose one offer to apply. As one tester commented, "Why not give just one coupon? And why not apply it automatically?"

For the Easy Reorder carousel on the home page, 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: Unfortunately, business requirements prevented us from being able to automatically apply eCoupons and promo codes. However, I adjusted the design to display only the eCoupon/promo code with the best savings instead of all applicable offers.

Despite the usability issue of the desktop Easy Reorder home page carousel, 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.

On the Easy Reorder page, mobile testers did not experience any confusion, but desktop testers did. 4 out of the 7 desktop testers encountered difficulty with the recommendations on desktop. 2 of the testers expected to be taken to the product page after clicking on the recommended product. 3 testers also commented that the light orange shading on the recommendations discouraged them from clicking: "...the shaded red recommendations look like they're out of stock and like something you're not supposed to touch."

For the Easy Reorder carousel on the home page, 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: On the desktop version of the Easy Reorder page, I removed the orange overlay and labeled the product recommendations for more clarity. For the rest of the Easy Reorder touch points, I kept the recommendation design as is, to 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.

No, 5 out of 7 testers on desktop and 6 out of 8 testers on mobile noticed the Easy Reorder Exclusive discount, but the majority did not fully understand what it was.

Only 5 of the 15 testers correctly interpreted from the name and the discount details that (1) the Easy Reorder Exclusive discount was available because the user was shopping on the Easy Reorder page, (2) it wasn't available for all products, and (3) even if it was available for a given product at one time, it might not be available for the same product in the future. 6 testers expected it to be available every time for the same product, and 2 testers incorrectly associated it with recurring orders.

Action: After discussing the complexity of the Easy Reorder Exclusive discount and the usability issues it presented, the buying team agreed to remove the feature. They proposed other venues for getting vendor funding that we worked into the final design, like selling the first slot of the product recommendations.

DESIGN GOAL: EASY TO SHOP

Though Easy Reorder was in need of a redesign, customers liked it because it was easy to shop. Thus, even though the goal was to modernize and simplify Easy Reorder as much as possible, Easy Reorder still had to be easy to shop or else it would lose its value. 

ESSENTIAL PRODUCT INFORMATION UP FRONT

I took care to identify all of the product information customers needed to confidently add a product to cart and displayed the information up front:

  1. Product name and specific attributes
  2. Price
  3. Availability of promotions

Testing validated that users could quickly go through their Easy Reorder list and add products to cart with this information. For further details, users could click/tap to go to the product detail page or open up a modal with more product information. 

DESKTOP EASY REORDER CAROUSEL

MOBILE EASY REORDER PAGE

RECOMMENDATIONS

Previously, Easy Reorder was only a list of a customer's past orders. Adding personalized product recommendations gave us the opportunity to increase average order size and pull in more vendor funding.

The biggest design challenge when it came to recommendations was to separate recommendations from the customer's actual products and to make them feel helpful rather than pushy. I explored a couple of recommendation designs and ended up with a different solution for each touch point.

DESKTOP EASY REORDER PAGE

The desktop Easy Reorder page had the most room for flexibility. In V1, I put the recommendations on the side, added light orange shading for visual distinction, and created a drawer that slid out with multiple recommended products. However, during user testing, testers failed to recognize the overlaid products as recommendations and were dissuaded from engaging with them. 

Thus, for V2, I kept the recommendation placement but removed the shading. I also replaced the drawer with a modal that displayed all relevant information about the recommended product and allowed users to modify the recommended product/apply promotions before adding to cart.

DESKTOP V1: DRAWER

DESKTOP V2: MODAL

MOBILE EASY REORDER PAGE

On the mobile Easy Reorder page, there was no room to display recommended products alongside Easy Reorder products, so I created a recommendation drawer that expands downward when the user taps the "You May Also Like" link. Though a similar drawer pattern caused confusion on desktop, it was more natural on mobile and testers had no problems with it during user testing. 

Tapping on a recommended product opened a modal with product details and an Add to Cart button.

MOBILE DRAWER

MOBILE MODAL

EASY REORDER CAROUSEL ON HOME PAGE

The Easy Reorder carousel on the home page was intended to only display a customer's previously purchased products. However, if the customer had 3 or fewer products, the carousel would be mostly empty. To take advantage of the empty space, I added recommendations for customers with 3 or fewer products and took care to distinguish the recommended products from the customer's own products. The carousel is the same on across all platforms.

PROMOTIONS

Even though past research showed that promotions degraded usability and that our top customers usually did not apply promotions to their purchases, the Buying team kept promotions as a requirement for Easy Reorder. The challenge was to present promotions in the most useful but unobtrusive way possible.

NUMBER OF PROMOTIONS TO DISPLAY

Initially, I displayed all available promotions to leave customers to decide which one to apply, in case one promotion might result in higher savings than another. However, the first rounds of testing quickly showed that testers were overwhelmed by promotion information. I pared back to displaying only a single promotion at a time, and discussed how to determine the best promotion to serve to the customer with the Buying and Engineering teams.

Testers also commented that they wanted eCoupons and promo codes to be applied automatically, but this was not possible due to Buying team requirements.

EASY REORDER EXCLUSIVE COUPON

The Buying team wanted to introduce a new Easy Reorder Exclusive coupon to encourage customers to use Easy Reorder. The coupon would only appear for items on the Easy Reorder page or module (not on the product detail page for an item the customer bought before). However, the majority of testers did not understand what the Easy Reorder Exclusive coupon was and expected it to be available every time for the same product. After seeing the results from user testing, the Buying team decided not to introduce this feature.

DESKTOP EASY REORDER PAGE V1: ALL PROMO CODES

DESKTOP EASY REORDER PAGE V2: SINGLE PROMO CODE


BEFORE AND AFTER

EASY REORDER PAGE

A comparison of the Easy Reorder page before and after the redesign:

DESKTOP BEFORE

MOBILE BEFORE

DESKTOP AFTER

MOBILE AFTER

EASY REORDER HOME PAGE CAROUSEL

A comparison of the original Easy Reorder module on the home page and the redesigned Easy Reorder carousel:

DESKTOP BEFORE

MOBILE BEFORE

DESKTOP AFTER

MOBILE AFTER