What Is Qvc App Design

Case Study: Overhauling QVC's Android App

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)

QVC worked with an outside group of developers based in Ukraine. They put one developer and project manager on site for the entirety of the project.

Original Design

Original Android App home screen and product detail page

A Work in Progress…

I didn't create QVC's original app desig n . 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.

QVC U.S. shepherds the company's brand, UX, and design for all other markets. Most designers work in West Chester, PA. But each satellite market also has 2–3 UX designers. The U.S. team synthesizes stylistic UI variances that aren't driven by business concerns. Fortunately, consistency is an easy sell for our developers.

But it's not all international politics. Some market variances have legitimate content and style deviations.

One reason to design "Mobile first" is to ensure content fits on the smallest screen. It's easier to scale up to larger screens after designing a smartphone screen. Our shared UI must account for longer German words. We used this same strategy to ensure German words fit by designing "German first".

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.

Moving to Scrum wasn't easy. Many stakeholders only knew Waterfall. Design revisions during the development phase took some project managers out of their comfort zone. We went through growing pains but progressed.

Our team used JIRA as a digital sprint board. JIRA logs and tracks development progress. You can attach assets and files to specific tasks so developers can easily find them. You can send developers messages linked to specific tasks. This makes remote communication across time zones easier.

We used JIRA to manage development sprints. Sprints divide larger goals into smaller tasks. New sprints ran every two weeks. Sprints allow product managers to chart progress with higher accuracy. I found JIRA easy to use after a quick five-minute tutorial.

Wireframes

Tablet Wireframe created by our UX Architect

Designers and developers worked closely to create paper sketches of the new tablet view. Our UX Architect used these sketches to create wireframes in Axure. Wireframes helped clarify layouts shared with our global team.

A wireframe's low-fidelity is great for quick ideation but leaves many questions open. They're just a sketch of how the layout could look. I refactored and resized all elements while creating hi-fidelity mock-ups.

Mock-up

Developers are a designer's best friend. I worked with them all along the way to ensure my designs were technically viable. When designs felt non-native to Android they put me back on course.

Google Material Design

QVC's old Android app was a mash-up of different styles. I wanted to create a native-feeling app. We needed to capture Android's new platform aesthetic called Material Design. Realizing this goal was challenging.

QVC had a very slim budget for mobile testing devices. I often used personal iOS devices to review mock-ups at scale. I only had access to an old Android phone that couldn't run Android 5.0, Lollipop. This meant I couldn't view real Material apps for most of the project.

I learned Google's design language using their extensive online documentation and YouTube lectures. Big shout out to Material Up for their daily dose of Android inspiration. UI Oh My gives side-by-side examples of app designs with Android design conventions vs. iOS counterparts.

I finally gained access to a Nexus 7 tablet late in the project. The tablet was a few years old, but could handle Lollipop. I installed a factory image from Google using Terminal and a USB cable. Only took 4-hours of tinkering on a Saturday afternoon… Now I could try Lollipop for real!

Using Apple's Terminal to install Android 5.0, Lollipop onto a Nexus 7 Tablet

Tools

Sketch is unbeatable for mobile app design. Multi-resolution asset creation, artboards, symbols, and character styles are just some of Sketch's baked-in benefits. Sketch's amazing plugin community makes it truly shine. Check out the Sketch Android Assets plugin, which streamlines the organization of Android's five separate resolutions. After exporting final assets, use ImageOptim. This simple drag-and-drop tool compresses assets with no loss in quality!

Sketch Mirror is another great tool. This iPhone app (no Android yet) displays Sketch artboards live on an iPhone while you work. Great for assessing scale of type and UI elements. Anything that shortens the design feedback loop is great!

I do wish Sketch had better collaboration features. When my workload increased two junior designers joined the project. We couldn't work from the same Sketch file without over-writing each other's work. Therefore, each designer maintained their own Sketch document. We kept one master style guide with all common character styles and assets. This step took extra time to keep our latest files synced.

InVision App was indispensable. InVision is user-friendly prototyping tool. Just drop-in static .jpegs and link them with InVision to create a prototype. No coding needed! InVision can even auto-import your latest Sketch artboards after each CMD+S.

I used InVision to review my designs on various mobile screen sizes. I shared these prototypes with stakeholders throughout the company. InVision works universally on Android, iOS and web. The only downside is you need separate InVision projects for each screen size and device-orientation.

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.

The PDF's contained 3 separate pages for each screen (see left).

Final Design (clean)
Size Annotations
Color & Font Annotations

We sent these guidelines for small, medium, and large screen devices. Each size had a landscape and portrait orientation. Six views total.

We made annotations using a plugin called Sketch Measure. The plugin worked well but was still time-consuming.

Today there's a new tool called Zeplin that speeds up the annotation process. Developers can view native Sketch files on Windows or Mac and retrieve all style information. Zeplin was released after our project was in progress. I haven't used the tool yet, but hear great things!

You always need more communication after sending files. I had extensive reviews with the development lead prior to official sprint reviews with the larger team.

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.

Our UX researcher began a new usability study as the project neared completion. We used UserTesting.com to gain feedback on several key areas in the app. UserTesting allowed us to record design feedback from real customers without needing a testing facility (fancy labs are overrated).

First Usability Issue: The navigation drawer was a new addition to our app. The drawer allows navigation without going to a separate page. Product categories lived in this drawer. We added a hamburger icon to access the drawer. I had doubts.

Testing found both the new categories location and the hamburger icon confused customers. I recommended changing the hamburger icon to the word "menu" to increase recognition. I lost that battle. Material Design does feature the hamburger icon despite it's known issues…

Our developer came up with a nice solution to help solve the problem. The navigation drawer would already be open the first two times the app loads. This shows customers to the new menu location immediately.

Second Usability Issue: Material Design guidelines discard the bottom navigation bar and move the buttons (Search, Watch QVC TV, Cart) to the top. I found this strange. The buttons become difficult to tap when using a smartphone with one hand. Squeezing more buttons into the top-navigation makes them compete with other UI elements.

We got some negative comments about this change without any probing during the usability study. We conformed to Google's guidelines despite our concerns. Development couldn't make major changes this late in the project. And now Google's recommending navigation at the bottom again…

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.

Offsite developers rotated throughout the project. Each development lead had different expectations for design deliverables. This required continual coordination with our onsite developer from the Ukraine team.

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.

Remember, your silly questions aren't stupid! Someone else is wondering too! Stay silent and problems will arise at a critical juncture when nobody's around to answer them. Just Ask!

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.

QVC has a small physical store at it's headquarters. Customers come to purchase popular items and souvenirs. I frequently walked past this store for one reason. I always saw a line of customers at the store. Each time I was immediately reminded our audience wasn't the millennial hipsters seen in our office.

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.

It's important to remember that guidelines are tools, not rules. Guidelines attempt to solve a broad problem for a large audience. If the guideline doesn't make sense for your unique problem, toss it out!

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:

Daily app usage increased
Conversion rate doubled
Google Play Store rating improved to 4.3/5 Stars