2015-2016

QVC module design system

How QVC aligned 8 websites across the globe, using one universal design system

QVC Modules

Overview

In mid-2015, QVC found itself in an interesting predicament. They had 8 different websites running in 8 different countries, all built and managed in different ways. To solve the inconsistencies and extreme difficulty for updates, digital leadership decided it was time to align all websites under one “modular toolbox” (essentially a design system). All tech resources were dedicated to creating these new modules, which would be used to rebuild thousands of pages across the QVC ecosystem.

 

Our job was to work with the business & dev teams to audit the existing CMS, decide what could be re-purposed and what needed to be created fresh, and use our existing foundational elements (typography, color, space, etc) to build re-usable components & modules.

 

I was on the “Homepage & Search” agile team at the time, so my focus was on designing modules to fit the needs of all pages within that realm – homepage, category pages, seasonal promotions, and navigation.

 

The 6 new modules that came out of our audit process were: editorial, product gallery, browse by category, promo countdown, flex, and footer.

The Modules

1. Editorial module

Editorial Module
Story Module - 320
Story Module - 640
Story Module - 960
This module was meant to be the perfect tool for CTA messages. It was rigid in it’s guidelines, to ensure messages were consistent and clear for the user.

2. Product gallery module

Gallery Module
Gallery Module - 320
Gallery Module - 640
Gallery Module - 1200
Before this module was created, site managers were only able to feature products in carousel format (endless horizontal scrolling). Users were rarely engaging with the carousel though. The gallery module made it much easier for users to see all products, and also introduced a simplified product tile with HOVER STATES!

3. Browse by category module

Browse By Category Module
Category-Module---320
Category-Module---800
Category-Module---1200
A concerning trend had shown high bounce rates on first-level category pages (fashion, shoes, jewelry, etc). This could be attributed to many things, but our assumption (validated via user testing) was that users lacked a clear sense of direction once landing on these pages. Our solve was to create a visual “browse by category” module that clearly presented the user with options on where to go next. Bounce rates decreased as users were now able to dive deeper into the funnel.

4. Promo countdown module

Featured Product Module
Featured Product Module - Spec 1
Featured Product Module - Spec 2
Featured Product Module - Spec 3
Designed specifically for special events, such as Black Friday, the “promo countdown module” shows a new featured product every hour. The user can add to cart or speed buy directly from this module, or wait an hour to see the next product. The first time we used this module was the 2015 Black Friday weekend, in which we broke the record for digital sales over that 3-day period and contributed to the highest-revenue Black Friday weekend in QVC’s history. Much of that success was tied to the new format for launching products via this module.

5. Flex module

Flex Module
Flex Module - 320
Flex Module - 640
Flex Module - 1200
After releasing the editorial module, stakeholders consistently tried to break the guidelines. They wanted more options; more text, more image sizes, more control over headers/CTAs. We didn’t want to break the integrity of the editorial module though, so we created a new module entirely – the flex module.

6. Footer (module?)

Footer Module
Footer Module - 320
Footer Module - 1200
Ok, it might be stretch to classify the footer as a “module”. The re-design did fall under my team’s jurisdiction though. In early 2017, we finally seized the opportunity to update the 5-year old footer. We incorporated new “widget” areas that looked great at any breakpoint. More importantly, we re-prioritized the information based off usability metrics from our old footer. The stats showed the top-clicked links to be live chat, phone number, email submission, and Q-card (QVC credit card). We made these areas easier to find, while re-organizing other footer links for easy scan-ability.

⚙️