Wishlist Redesign
A simplified experience for customers to save and keep track of items
Wishlists are a way for customers to save items that they are not ready to purchase. As a long-existing feature, we looked to simplify the design and make it a more engaging experience that could both increase efficiency for power users and acquire new users.
MY ROLE
Lead designer through end-to-end process - consisting of ideation, UX design, user testing, delivery
MY TEAM
Product manager
Developers
Creative designer
UX content writer
Problem
There had not been a holistic look at the overall wishlist experience for several years as new enhancements were added. The result was a page that lacked visual hierarchy and didn't draw focus to the elements that were important to customers.
Through a desktop feedback widget on the wishlist page, we were able to receive and sort through customer comments about ways to improve their experience.
The customer feedback confirmed our initial evaluation. The top two themes were that customers wanted to be able to share their wishlist with others and receive alerts when saved items' prices dropped. Both of these were existing features, but it seemed that customers could not easily find them.
This project took place during a business-wide initiative to move from two codebases for mobile web and desktop to one responsive codebase.
How might we simplify the wishlist page so that customers can quickly accomplish their goals?
Above is the original desktop and mobile web wishlist page.
Evaluating the Experience
In addition to the customer comments from our feedback widget, I noted several issues in the experience that I accounted for in the redesign.
- On the mobile experience, customers can only access other wishlists via a small dropdown.
This navigation pattern easily gets lost among the other page content. In addition, the 'create a new list' action is accessible only through this dropdown, which doesn't promote creating new wishlists. - The desktop and mobile web experiences are not consistent.
This requires customers to understand two different models when switching between devices. Both experiences also have many elements competing for attention.
1. The mobile experience has multiple secondary actions.
Having several actions of the same weight made it less likely that customers would be able to discern them from each other. There needed to be a better prioritization that is reflected in the visual treatment.
The section near the top of the page that contains four secondary buttons grouped closely together.
2. The management actions take up the majority of the screen above the fold (on mobile).
For most customers, easy and quick access to their saved items is important. Pushing those items below the fold made it cumbersome for customers to take a quick glance at them (at the time, the iPhone 5 was a common model).
The content that is shown above the fold (on an iPhone 5).
3. On the mobile experience, customers can only access other wishlists through a small dropdown.
This navigation pattern easily gets lost among the other page content. In addition, the 'create a new list' action is accessible only through this dropdown, which doesn't promote creating new wishlists.
The list dropdown opens a modal containing all wishlists and the action to create a new list.
4. The desktop and mobile web experiences are not consistent.
This requires customers to understand two different models when switching between devices. Both experiences also have many elements competing for attention.
In the desktop experience, the left sidebar and main content clash. The gray dividers and amount of text feeds into the visual noise.
In the mobile experience, the 'create list' functionality is hidden while the 'find a list' and list sharing functionality is nonexistent.
Above are the desktop (left) and mobile web (right) screens. In both, it's difficult to understand what the focus is.
Final Designs
The final designs consisted of redesigning the wishlist experience and primary user flow by splitting functionality into two pages: a page focused on a high-level view of a customer's wishlists and a second page that dives into the specific details and items in a wishlist.
During this project, I also worked with our team's product manager and developers to overhaul our legacy code and incorporate a new responsive style guide and grid system. We were one of the first teams in the business to shift to this single responsive codebase, which gave us the responsibility to call out and solve any problems in the system.
Centralized Page for Wishlists and Creation
Instead of minimizing the wishlist navigation under a dropdown, we created a new wishlist landing page that is scalable for multiple wishlists. We encouraged customers to create new wishlists and made finding other wishlists easier by making the actions more noticeable. We also introduced copy with these actions that gave them more of a human feel. By moving these actions to this landing page, we could avoid clogging up the detailed wishlist page.
To make wishlists a more visual and inspirational experience, we displayed a preview of a few of the most recently saved items in each wishlist, so that customers could be reminded of what had piqued their interest. For easy access, customers' default wishlists were the first one displayed.
A Cleaner, More Focused Wishlist Page
To reduce the number of secondary actions on mobile web and help customers distinguish between them, we used recognizable icons from our style guide (for settings and sharing), and deemphasized actions that we deemed as tertiary (sort and filter).
In order to make the price alerts feature stand out, we utilized a shade of grey to provide contrast from the surrounding content on desktop, and displayed a status indicator on mobile web.
By making these changes, we were able to push the saved items to be higher on the screen and take up more space above the fold.
Outcome
Throughout this process, we broke the project up into incremental phases that would be more digestible for development stories. I worked closely with our developers to ensure that we could hash out any issues due to technical constraints or edge cases, since this was a huge undertaking.
To measure our success, we focused on increasing engagement (by increasing the item add to bag rate) and increasing the opt-in rate to price drop emails. Unfortunately, we ran into analytics constraints that prevented us from measuring exact numbers, but we found through initial A/B tests that the redesigned experience resulted in an overall positive lift. Based on these results, we decided to scale the new wishlist experience.
Takeaways
This was an incredibly rewarding, but challenging, project due to many technical and time constraints. We had to prioritize the features that we wanted to focus on in the scope of this project since we were not only redesigning the wishlist experience, but also writing the code from scratch. I learned a lot about responsive design and how to successfully collaborate with partners - here are some of my main takeaways:
1. Feature prioritization is critical to design execution.
I worked closely with my product manager and development team to determine what our must-have features were for the MVP based on development time needed and business priorities. As a designer, it's important to have this in mind while creating designs.
2. Start the responsive design process with all breakpoints in mind.
Although we approached the redesign from a mobile-first perspective in terms of development and testing, it was important to start designing (or at least have ideas in mind) all breakpoints to see where design patterns and visual treatments could break on different screen sizes.
3. Collaborate closely with the development team.
I learned how valuable it is to loop developers into the design conversation early on, so that they can call out any shortcomings from a development perspective, as well as feel included in the vision. As a designer, it can be easy to work in a silo until we feel like our designs are fleshed out. I had to adjust to being comfortable presenting early and getting feedback, which ultimately was more efficient.