Wish Lists

Redesign of 10+ yr old legacy feature

User Experience
User Research
UI Design

The REI online accounts team set out to redesign the website's wish list experience from its legacy code that was more than 10 years old. As the user experience lead working with a product manager, visual designer, and the development team, we determined that the primary goals for this effort were to:

  1. Apply our latest redesign styles found across REI.com
  2. Make the feature responsive and accessible via any device
  3. Optimize the user flow
  4. Establish foundational analytics to better understand the feature's future usage
Screenshots of a few pages of the legacy wish lists feature.
Legacy design: outdated, unusable, desktop-only.

Foundational analytics

The original analytics in the legacy code were next to none. The daily average of "adds to wish lists" was hardly an interesting piece of information on which to base key design decisions on without much context. Additionally, we believed that the faulty workflow design was causing low engagement and potentially hindering product conversion on the site. We proposed the following set of analytics to be included in the new code so that the redesign could be tracked going forward. We proposed the following foundational analytics:

  • Wish lists: move item on Wish List to Cart
  • Wish lists: average # of lists per online account
  • Wish lists: average # of items on a list per online account
  • Categories of items vs. Collections of items
  • Life cycle of an item lives in a list before action is taken
  • Life cycle of an individual list

Technical feasibility

Originally, the overhaul of this feature was to be completed by an outsourced company. However, once our team demonstrated the enormous complexities of pulling off a front-end redesign and refactoring of this feature, we were able to convince our technology partners to bring the project in-house so as to facilitate smooth communication and minimize as many design and development roadblocks as possible. Development updated the backend framework to a more modern architecture, which created the foundation for this work and contributed to a more modern experience. Additionally, design partnered with development to define new design patterns and work closely with our analytics partners.

Experience flow

By optimizing the workflow for users to create and view their wish lists, we were able to streamline:

  • creating parallel experiences needed for similar tasks with different entry points
  • eliminating extraneous screens and interactions that detracted from the experience, and previously took the user away from the shopping flow
Diagram workflow of the old wish list experience.
Old workflow.

Diagram workflow of the new wish list experience.
Optimized workflow.

Design of the new wish list for mobile breakpoint.
Mobile breakpoint.

Design of the new wish list for tablet breakpoint.
Tablet breakpoint.

Design of the new wish list for desktop breakpoint.
Desktop breakpoint.

User testing

Testing our design with real people was useful to understand the following:

  • How do customers use the newly updated wish list feature?
  • Do customers understand the redesign of the wish lists and gift registries homepage?
  • What are enhancements and opportunities to improve the wish lists?
  • How do customers use lists to plan their outdoor activities?

Based on usability testing on multiple devices with store customers, overall our users received the redesign well. They also provided qualitative feedback that led to another round of iterative improvements with copy, website performance, and design details, prior to the feature's release.

Impact

According to our analytics, our newly redesigned wish list feature accounted for 0.2% - 0.5% of the overall daily demand over 6 months, with a peak of 0.87%. This amounted to an average of $6,000 per day or $760,000 since the feature's release.

Photos of a person user testing the new wish list feature on a computer and a smartphone.
Usability testing in the store.