Wishlists are an omnipresent feature of most e-commerce websites. List customers tend to be the most engaged, highest spending, loyal users that a site has. Part of the continual improvements made to the lists on the site was creating multiple views.
Client : Macys.com
Tools : Photoshop, Sketch, Invision
Role : Senior User Experience Designer
Wishlist functionality for Macys.com was the focus of one of the teams I was assigned to as a UX resource. While the customers that used wishlists were our best customers, they were a small group. One of our project goals was to increase usage of wishlists on the site. One idea that made sense was to make it easier for customers to use lists the way they wanted.
The UX department had a great research team. In addition to ongoing user research, we were able to partner with them on projects. This functionality came out of customer needs that were identified in user research questionnaires, customer satisfaction feedback, click-stream analysis and competitive research.
Using several research methods let us confirm that customers were doing what they said they were doing. We found that our customers most liked using lists to compare products, defer purchase, or communicate desired products to others.
The wishlist team came together to pitch ideas to fill our backlog. A “compare products” functionality was put out as an idea along with many others. I wanted to take the core of the idea and verify that it was the right solution to our problem.
While customers wanted to compare products, they didn’t seem to want to do so with formal side-by-side “compare” functionality. So I brainstormed to pare down an approach to help users compare products without investing lots of our team resources.
At its heart, comparing requires proximity and some product information. We were already showing product information in wishlists, but not always in the order the customer needed. Putting products into smaller groups didn’t make sense, as customers overwhelmingly used only one list. Instead I thought about moving around products and getting more product on screen.
Products they would be comparing would be in the same product category, and customers very rarely had more than 10 items in a list. So, instead of having users drag list items around, I just used sorting by category. It added to functionality that existed, so it was relatively easy.
Additionally, we decided to create additional list views to let users get more product on screen. We thought it would enhance our “sorting by category” functionality. Customers would get several similar products next to each other on screen at once.
My solution required three buttons to change list views (list, grid, individual), and an additional menu item in our sort menu. There were no complicated task flows to resolve, so I worked directly in Sketch to create the UI.
The original view for lists at Macy’s needed updating to provide more of the right information to customers. Based on interviews and user testing we determined what product information was the most important to Macy’s customers using lists.
The grid view allowed for more products on screen, letting customers compare products with more ease. By default, products were sorted by date added. So it was likely that items they wanted to compare were already next to each other. Adding the sort by category option made it almost certain they would be adjacent.
Screen space and product information were balanced by testing which was the most pertinent information needed by users.
The concept with the individual view is that customers can swipe through their products quickly to visual compare list items. This allowed for a large product photo and still felt fast. Customers responded well and understood the functionality. But they liked it as a way to go through their lists, not necessarily to compare products.
After getting buy in from the list team, I scheduled time with our researchers to user test some clickable prototypes. The department had been having access problems with remote testing, so I decided to try out Invision to hold the prototypes.
I loved being able to sync the files from my desktop and having the artboards parsed into screens. It made changes fast and collaboration easier. It was easy to add more screen from our visual designer and the product manager and researcher could see progress in real time.
After adding hotspots and setting the click paths. I walked the researcher through our goals and what we wanted to learn. She then wrote a test script and it all went through remote testing.
We had some great feedback from talkative users in remote testing. They immediately understood the list and grid views, and were interested in playing with the individual view. They loved the sort, but wouldn’t have found it immediately on their own. I presented the research finding to the team and it was decided to hold off the individual view until the subsequent sprint.
Our team was Agile, so they were working on parts of the functionality as soon as I showed my first prototypes. The rest went quickly. Since I wasn’t allocated full time to the team, I bounced in and out daily to check in on progress and answer questions. I was on Slack for quick questions, but made a point to be completely present with other teams when I was with them.
After launch, we compared length of time products were in list, amount of sales, number of sales, and of course click on the sort menu and view buttons. There was an uptick across our KPIs, though it was small since the number of customers that used lists was low. But addressing that was in our backlog.