May 2017

TV shopping meets iOS 10

A redesign of QVC’s iOS homepage with a fresh aesthetic & digital strategy

QVC iOS App

Overview

The state of QVC apps in 2016 was a bit frightening. We had a 5-year-old iPhone app, a relatively-new iPad app that lived in it’s own little world, and an Android app that barely functioned.. all built and ran by different teams.

 

In the summer of 2016, leadership decided it was time to get our house in order.. to finally be mobile-first. The goal was to create a universal design & content strategy that worked for ALL apps and ALL countries, in turn creating a universal design system, reducing workload for our content teams in the different markets, and streamlining development.

The Constraints

I usually hate dwelling on the negative stuff. This project was heavily influenced by the powers that be though, so it is critical to note.

 

 1. Agile teams

 

Lots of cooks in the kitchen, all headed in different directions. That pretty much sums it up.

 

 2. Leadership strategy

 

The teams were given at the onset, to align with the modular redesign work from responsive web. They wanted the same modular toolkit, just customized for native apps This was meant to reduce workload for the content production teams, but also meant less opportunity to come up with a new app strategy.

 

 3. iPhone, iPad, or Android?

 

The biggest question of all… which platform would we focus on first? Leadership desperately wanted to fix the iPad conumdrum by crafting a universal iOS design, so we could sunset the old iPad app. iOS apps also brought in more revenue than Android at the time. Leadership made the call to start with iOS, and then retrofit Android using Material standards.

Research & Analysis

Audit of current app

The original iPhone app was built in the early 2010’s.. in an age of endless table views, sliders, and text-in-image galore. The app was inaccessible beyond repair, not to mention abnormally static and void of user deligh.
QVC iOS App - Old
A customer research analysis of the homepage gave us some great insights right off the bat:

 

  1. No-one was engaging with the promo-slider past slide 1-2.

     

  2. The “Item On Air” link was the most-engaged with element on the page. This took users to the “QVC TV” page with a live video stream of the show, and the current/recent products on air.

     

  3. Users found little value in the stacked table images.

     

Guiding questions

After the research phase, we began crafting some guiding principles for the new app. Those principles were derived from the following questions:

 

  1. How could we tie the imagery and text together, in a way that allows the imagery & products to speak for themselves?

     

  2. Would it be possible to incorporate elements of the live video stream into the homepage, and make it easier for users to see the current product on-air (i.e. Facebook Live)?

     

  3. This app needed more interactive elements. More motion would guarantee increased engagement (in the right context).. and just make it a more delightful experience.

     

  4. Native vs. brand-right? Figuring out how to strike the perfect balance of QVC branding and native iOS standards. App users have different expectations than web.

     

3 months of research-whiteboard-design-critique, 2 rounds of remote user-testing, 6-12 months of development, and 90 days of beta-testing later… here is what we delivered…

The Design “System”

QVC iOS App - Color Palette
QVC iOS App - Font Styles
QVC iOS App -App Aesthetic

The Modules

1. On Air – App Only

on air module - qvc ios app
OnAir2

Interactive prototype made with Principle

2. Search/Quicklinks – App Only

quick links - qvc ios app

3. Product Carousel

product carousel - qvc ios app
Cards

Interactive prototype made with Principle

4. Shop By Category

category - qvc ios app

5. Story

story module - qvc ios app
Story

Interactive prototype made with Principle

6. Today’s Special Value

tsv - qvc ios app

7. Content Module – 3 Block

media 3-block - qvc ios app
Bubbles

Interactive prototype made with Principle

8. Content Module – 4 Block

media 4-block - qvc ios app

9. Tall Container Strip

tall container - qvc ios app
TallContainer

Interactive prototype made with Principle

10. Lifestyle Carousel

lifestyle - qvc ios app

11. CTA Image

CTA - qvc ios app

12. Shop By Brand

shop by brand - qvc ios app

13. Image/Text Flex

flex - qvc ios app

Search & Nav – UI Refresh Only

QVC iOS App - Search and Nav

Demo

Design specs

🖖