🚀 Shipped June 2016

QVC product listing redesign

Search results redesign including new design system components and optimizing the QVC shopping experience for mobile shoppers

Discover

Problem

As a customer

  • I am overwhelmed by the amount of information and controls offered on page
  • I do not want to compare, add to cart, or purchase from this page
  • I am extremely frustrated with the filter experience on mobile devices
  • I prefer larger images when browsing products
  • I cannot easily de-select filters

As a business

  • Lift & shift product listing (search results) to new CMS platform
  • Merge separate US, UK, and DE listings into one consistent template
  • Refresh UI with new foundational design styles (and build new components where necessary)
  • Low-hanging fruit UX updates to reduce bounce rate, increase funnel progression to product detail page, and optimize for mobile customers

Observations 

State of affairs at QVC

Teardown_QVC_HP_PDP
In 2016, QVC was in a state of transition. The entire site was shifting to a new CMS, and with it a new front-end “style guide”. Only two pages had been shipped on the new CMS at this point; the homepage and product details page. All other pages existed on the legacy platform. The product listing was tagged as the next priority page to be shifted. 

 

Leadership had dubbed this effort a “lift and shift with some enhancements”. There was a tight deadline to be on the new CMS by end of 2016; our team had a max of 3 months to iterate, test, develop, and ship a new listings page. We had liberty to test off outdated features, but additional features would have to be post-MVP. 

 

It’s important to note that our new style guide was not a design system. Our company hadn’t quite jumped on the system train yet; we basically worked off a collection of always-updating Sketch files. Our style guide had the foundational elements of a system – fonts, colors, icons, and a few basic components. Most components were built specifically for the homepage and product detail pages though, so items relevant to the listing pages like filters, product cards, badges, etc would need to be built by our team. 

 

We worked closely with the homepage and product detail teams to attain cohesion between pages. 
Teardown - QVC_
1. Page view: Our analytics showed little interaction with list or text-only views. We wanted to test only displaying grid-view to understand customer feedback. 

 

2. Compare: This was an uncommon feature amongst our competitors, and also received little engagement on our site. Definitely an item worth testing off. 

 

3. Badges: A major painpoint across our entire site was badging. There were over a dozen badges, all using different styles and sizes. Each badge was associated with a marketing campaign. Each campaign had it’s own branding. Alas.. zero consistency. In addition, they were png assets slapped over the product image. These assets did not scale elegantly across breakpoints, and had the potential to cover half the product image. Ugh! 

 

4- 6. Product info: The listing card had become extremely polluted over the years. It was unclear why customers would need information like product numbers, video links, and easy pay offers at this level of search.

 

7. Add to cart and speed buy: We had recently run an A/B test with and without these buttons on page, and saw no impact to conversion (which means no one was using them at this level). Our hypothesis was that customers weren’t ready to purchase without clicking into product details to learn more about the product. This was also an uncommon feature in the industry (not to mention extremely distracting).

 

8. Top-level pagination: The option to scroll pages at the top of search was odd on mobile. Customers hadn’t even looked at a listing, and we were already offering them options to go to the next page. 

 

9. Filter menu: The largest area of opportunity was with the filter menu, especially on mobile. It was appended to the top of the page (very easy to miss), and was extremely difficult to use. Every selection would refresh the page and close the menu. Customers couldn’t multi-select or toggle the menu while searching products. It was almost impossible to dismiss selected filters using the hacked filter toggles. The desktop experience wasn’t much better. 

 

We knew we could fix many of these issues in the MVP release, while also enhancing the UI with our new foundational design elements. 

Teardowns

Product listing cards

Filter menus

Takeaways

  • Listings mainly consisted: price + original price, description, ratings, badging, color options (sometimes)
  • Interactive hover states were used to show additional product info (alternate images, colors, etc)
  • Images were large
  • Mobile filters were contained in a menu overlay
  • In the mobile filter overlay, you could multi-select, and either apply or cancel your selections
  • View configurations (grid vs list) were not widely used
  • There were no add to cart buttons on search results
  • Badges were simple and out of the way
  • Navigation at the top of the page was usually a simple “next” or “previous” link, where navigation at the bottom showed all pages (1, 2, 3, 4…)
  • Filter toggles were commonly displayed directly above results

Define

Hypothesis

By designing a mobile-first filter experience, simplifying the page components & product tile, and enhancing the UI & interaction patterns, we will see increased engagement and funnel progression while decreasing bounce rates.

Scope

Countries

  • United States
  • UK
  • Germany

Platforms

  • Responsive web

Language

  • English
  • German

Metrics for success

  • Increased funnel progression
  • Reduced bounce-rate 
  • Increased engagement with filter menu per session (mobile vs desktop)
  • Increased spend per session

Team

  • UX designer (me)
  • UX researcher
  • Product manager
  • Front-end devs

Develop

Explorations

Wireframes

Wires - Desktop
Wires - Mobile
The UX researcher and myself teamed up to starting wireframing an ideal listing and filter experience based off our discovery work.

 

Our overall goal was simplicity. Let’s make it as simple as possible for customers to browse products, and give them the tools necessary to easily narrow down their search – specifically on mobile (but also desktop).

 

These wireframes show a few ways we planned to achieve that goal:

 

  • Remove unnecessary features like compare (list view was still on the fence) and add to cart. 
  • Remove unnecessary product information like product numbers and promotional messaging.
  • Give customers a more usable filter experience that catered to both quick filters on page and detailed filter options in a menu.
  • Allow both single and multi-select filter experiences. 
  • Align sort and filter into one area vs scattering them on different parts of the page.

Design foundation

QVC_Design_Foundation
As I mentioned, we worked closesly with the hompeage and product detail teams to align to new foundational design styles and re-use any existing components. This was the extent of the foundational system (we tripled the amount of components available by the end of this project!). 

Product listing cards

Listing cards explorations
These were a few of the top contenders in our product tile explorations. A few areas we focused on was auto promotional text, badges, product info, images, and hover states. 

 

Auto-promo text
Auto-promo text was essentially a category that products could be assigned. Some products could have more than one category, but we currently only displayed one.

 

We explored using icons rather than plain text. This would a key on the page to tell customers what the icons meant, or a hover state on the icons themselves (which would only work on desktop). We opted for plain text again (v3 & v4).

 

Badges
Like I mentioned, our badges were inconsistent and cluttered. My explorations revolves around simplification and consistency.

 

The ideal variant was variant 4, because it moved the badge up on the card into its own space (not overlapping the image). These would be HTML badges vs static PNGs, which allowed for scalability across breakpoints.

 

The dev team said it would be a post-MVP feature to build HTML badges though, so we also designed a fallback version (variant 3) that was a PNG “pill” asset. We tucked this badge into the top-left corner, and added an opacity to allow the underlying image to be visible.

 

We color-coded all badges based on their category type to create a consistent library. The colors were picked in collaboration with our Brand team, to align with promotional material on other QVC platforms.
I was also responsible for building a Sketch template for our marketing and production teams to use when adding new badges in the short term.

 

Product information
The information of the product was kept fairly similar between the old and new listings. The only major change in this area was removing “QVC Price” and “Clearance Price” labels (in our effort to simplify). We figured customers would understand the crossed out price was the original price, and the non-crossed out price was the actual cost of the product.

 

We also updated the font colors and weights to align to our new foundational patterns.

 

Product images
With updated padding and grid dimensions, we boosted our product images by 25% on desktop and 30% on mobile! This was a huge win for our customers.

 

Another exciting feature that we tested was pulling a secondary photo from the product on hover (desktop only) Surprisingly, not all products had more than 1 image though, so we deprecated this feature until we had more opportunity to explore all edge cases.

 

Hover states
A common trend in our competitive analysis was the use of fun interactive hover states (desktop only) that created a more engaging shopping experience. We figured we would test out a version that added a drop shadow on hover to one of our live product modules, to see how it performed. That test was a huge winner, so we went ahead with our plan to add it to the listing redesign.

Filter menu

Filter_Variants_1_3
Filter_Variants_4_6__
Filter_Variants_7_9
Filter_Variants_10_
The pièce de résistance of the product listing redesign – the filter menu & control bar on listings. We nailed down the features we wanted in the wireframe phase, but the fun part was exploring different interface styles and interaction patterns between said features.

 

Halfway through our explorations, we conducted a multi-variant user study via usertesting.com to get customer feedback. We tested variants 4, 5, and 6 on both desktop and mobile.

 

Our learning from that test were very useful.

 

  • Customers had no preference b/n a white or grey listings background. We had hypothesized that a grey background (which would be a new treatment) would help customers scan listings easier – especially on mobile when the listings were extra long. 
  • A clear-all filter toggle was a useful feature, but was better off being an independent button from the other filter toggles. It was easy to miss otherwise.
  • The mobile filter menu was a big hit. Customers loved having the ability to multi-select. They breezed through our questions asking them to select and de-select different filters. 
  • Customers understood that pressing “done” would close the menu and apply the filters. They also wanted to tap outside of the menu to go back to the results. 
  • Having the filter toggle visible on both the listing and in the menu was helpful for customers to filter down either way.
  • Customers didn’t find the list view or grid view very helpful. 
  • When customers pressed “done”, they expected to be taken to the top of the listings page.

 

We made updates based on these learnings, and landed on Variant 10 for launch. Instead of going with a grey background, we used dividers between listings (on mobile only). There was a lot of white space used to keep a clean UI, and only essential copy and features were shown. We shrunk the width of the mobile menu to allow more of the listings to be visible in the background, so customers could see that the results were indeed updating and also to allow for a larger scrim tap area.

Deliver

Solution

Listings

Final_Full
cards

Filter menu

Final_Filter

New design components

New_Components

Component annotations

Click to enlarge

Retro

There were many “firsts” for me in this project:

 

  • First time working with search results
  • First time creating multi-variant user tests
  • First time working with motion 
  • First time redesigning an entire page template

 

Given all those firsts, I’m very satisfied with how this project turned out. I think our team did a decent job balancing customer and business problems. Even though our leadership directed us to keep feature enhancements to a minimum, and even though our timeline was extremely limited, we managed to craft a redesign that did way more than just apply a new UI. Our mobile customers were finally able to browse and filter our products with ease. It was actually FUN and EASY to search for products now!

 

The metrics showed higher engagement and funnel progression almost immediately after launch. Even after 3 years, our listing and filter design is still live on QVC’s US, UK, and DE markets 😎

 

There are still a few items I would change if I could go back in time. I would have loved to do more low-fidelity wireframe explorations before diving into hi-fi mocks. I also think we should done more testing to understand exactly why customers weren’t using the “compare” feature or grid/list view toggles, rather than just removing these features from the MVP. The last item would have been testing a quick view option to preview additional product information on listings. This had been discussed but inevitably deemed out of scope. 

Related projects