Case Study: Overhauling QVC’s Android App

Image for post
Image for post

2015 was the year of Android at QVC

QVC saw more customers and sales growth on Android than any other platform. All despite neglecting the app’s UI for over a year. We wanted to overhaul the app to serve this growing market.

Goals

  • Optimize app for both Smartphone & Tablet screen sizes
  • Add “Sort” and “Refine” product search functionality
  • Add a “Gallery” product view with larger images
  • Introduce Google Material Design
  • Implement current company brand standards
  • Improve UX whenever possible

Team Roles

  • Ben Kennerly/author (UI Designer)
  • 1 Information architect
  • 1 Project manager
  • 1 In-house developer
  • Several offsite developers
  • 2 Junior Designers (joined late in project)

Original Design

Image for post
Image for post
Original Android App home screen and product detail page

A Work in Progress…

I didn’t create QVC’s original app design. I only worked on one small Android experience prior to this project. The existing app aesthetic was a mix of Android Holo and skeuomorphism with a dash of iOS design convention. The app was text-heavy. It had no optimized tablet experience.

Process

We had our work cut out for us. No UX person focused on QVC’s Android app in the previous year. Now we needed to update the UI on every (100+) single page. And our challenge grew…

Global App

QVC is a global company. Our apps are built in the U.S. and modified for release in other countries. QVC’s U.S., U.K., and German apps all share similar codebases. This relationship gets tricky.

Image for post
Image for post

Kickoff Meeting

Our global team of designers, developers, and project managers met for a kick-off meeting. We used this 4-hour session to define project goals, share concerns, and create a timeline.

Scrum

QVC previously practiced Waterfall development methodology. We switched to Scrum on this project to improve our workflow with the offsite development team based in Ukraine.

Image for post
Image for post

Wireframes

Image for post
Image for post
Tablet Wireframe created by our UX Architect

Mock-up

Image for post
Image for post
Hi-fidelity Home Screen Mock-up

Google Material Design

Image for post
Image for post
Image for post
Image for post
Using Apple’s Terminal to install Android 5.0, Lollipop onto a Nexus 7 Tablet

Tools

Image for post
Image for post
Image for post
Image for post

Developer Deliverables

I worked with our onsite developer throughout the project to validate my technical assumptions. I made preliminary designs with notations to ensure they met our offsite development team’s needs. We sent PDFs of all final screen mock-ups.

Image for post
Image for post
  1. Size Annotations
  2. Color & Font Annotations

Usability Testing

Our usability tests from the start of the project found existing app pain points. You always learn something during these sessions. It’s amazing to see customers navigate haphazardly and miss buttons you thought were obvious. This was an eye-opening experience.

Image for post
Image for post

Challenges

We had several challenges along the way.

Scrum

This was our first project using Scrum. Ceremonies like daily stand-ups sometimes felt forced. Maybe we included too many people. That said I love Agile 1000% more than Waterfall! You can’t throw design over a fence and expect good outcomes. I think a strong advocate who deeply understands the process could improve our results.

Offsite Contractors

Working with remote teams is always harder than face-to-face. Our six-hour time difference definitely put stress on both teams. An un-answered question could cost one team a day’s worth of productivity without careful planning.

Devices

We lacked proper Android devices running 5.0 Lollipop until the very end of the project. Most design inspiration therefore came from static online resources. How objects interact and move in relation to their surroundings is a big part of Material. Motion design took a backseat while designing and I never got it back. This remains a big opportunity for the next version.

Lessons Learned

Every day was a learning experience.

Communication

Design is 20% deskwork. The other 80% is communication. If you think a designer’s job is to stare at a monitor you’re doing it wrong! I spent most days talking with stakeholders to ensure we were on the same page. This can be challenging in a large company. Our onsite developers aren’t seated next to the designers, which slowed communication.

Design for Your Audience

QVC’s core customers are often non-tech savvy older woman. I had to design with them in mind. As a 20-something male attached to his smartphone, this fact was easy to forget.

Tools, Not Rules

Our app design had to balance user needs with Google Material design. While Material is clean and modern, its visual appearance has usability issues. Material removes visual signifiers that help non-tech savvy users understand how a product works. Our team had frequent discussions about when to stick with Material Guidelines when they clashed with user needs.

Results

We knew there was a big opportunity to improve our app for the growing Android market. QVC’s new Play Store reviews and metrics didn’t disappoint. Aside from issues found in the usability studies, customers liked the new experience. Overall:

  • Conversion rate doubled
  • Google Play Store rating improved to 4.3/5 Stars
Image for post
Image for post

Written by

Product Designer. San Francisco Bay Area.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store