April 2015

Online shopping shrunk to 42mm

Introducing the QVC app for Apple Watch

QVC Apple Watch app

Overview

When Apple announced the Apple Watch in their mid-2015 keynote, QVC immediately jumped at the opportunity to add a new & innovative digital experience to their global ecosystem. Transforming a large-scale digital platform to a 42mm wearable screen was going to be no simple task though. After several “minimalist” whiteboarding sessions and consumer insight research intake, we were able to narrow the experience down to the customer’s core interests: Today’s Special Value and Item On Air.

Research Phase

How the TSV and Item On Air would manifest themselves in the app was another question. We started thinking on the experience in November of 2014. The Watch release wasn’t set for another 6 months, and Apple was releasing very little SDK information on the device. It was up to our small team (2 designers, 1 dev, and too many PM’s) to be agile as new releases unlocked new capabilities. There was also practically zero online resources for best-practices (or design standards) in the wearable space.

 

Around this time is when Apple announced their new San Francisco font as well. Our iOS apps were definitely not set up to use these yet, and most of our design/dev teams were still learning how the scalable font system would work. This project would pioneer how we use the scalable system font for our future app experiences. No pressure!

Wireframes

We started piecing together journey maps with the Apple Watch features we could pull from Apple’s SDK. There were four distinct cases with which our users could interact with the app:

Case 1: Glance to Home

QVC Apple Watch Wireframe-1
The QVC customer depends on their apps primarily to find out what item is on air and how much it costs. Through “glances”, the customer can now see that information without ever leaving their Watch’s app dock. Click on the glance and they will be taken to the product detail screen. From there, they can go back to QVC home to check out the other deals of the day.

Case 2: Notification to Product

QVC Apple Watch Wireframe-2
Notifications allow the customer to get instant access to the latest promotions, and gives them the choice to dive deeper if interested. Free shipping, daily discounts, and more can be pushed to the customer no matter where they are in their day.

Case 3: App Screen to Home

QVC Apple Watch Wireframe-3
If the customer doesn’t have time to scroll through their glances, or ignore notifications like I tend to do, they can also access the app directly from the Watch home. Today’s Special Value and Item on Air were the promotions chosen for MVP launch. Designing for scalability was paramount here… QVC can add remove new deals at any time. Any future deals can be added to this screen if desired.

Case 4: Handoff to iPhone App

QVC Apple Watch Wireframe-4
We would have LOVED to allow users to buy products directly from the watch. Our apps did not support Apple Pay at the time though, so this was a no-go for MVP. No worries though! We leaned into the hand-off feature of the Apple Watch to work around the problem. If the customer was diggin the product, they could simply handoff to their QVC iPhone app to open up the product details and complete their purchase.

Prototyping

Prototyping for this experience was… difficult. Most online tools had not built a Watch template yet (looking at you, InVision). We desperately needed to see the designs in action, to test and validate our assumptions. The xCode simulator just wasn’t cutting in. Then I had an idea that only a 90’s baby would have… let’s create our very own Apple Watch viewmaster! I created two paper watches, with 38mm and 42mm openings, through which paper “screens” could be inserted and scrolled. It was dope! We all taped it to our wrist and walked around the building testing it with co-workers.

 

A few weeks later, our team was invited to Apple’s top secret lab in Cupertino to test the code on real Apple watches. I still think I like the paper prototype more than the real thing 😃

Launch

QVC Apple Watch App - -Launch
QVC Apple Watch App - Launch2
QVC Apple Watch App - Launch3
QVC Apple Watch App - Launch4
Incredibly, we managed to get the app designed, built, submitted to App Store BEFORE the Watch was even released! It was a big win for QVC.. our app was featured in the Lifestyle category of the App Store. There was a flood of app downloads as the Watch hit the market.

 

It was difficult to determine the immediate impact of the app, because our back-end metrics were a mess. Nevertheless, I loved getting this opportunity to dip into iOS design for the first time. It sparked a fire in me, and inevitably led to me becoming a lead UX designer in the QVC iOS app redesign years later.

Demo

Prototype made with InVision

⌚️