Web Receipt Clarity

Project Overview

First, a Survey

We placed a short survey on the receipt page to find out why these customers who'd just successfully completed a purchase were unlikely to come back and make future purchases.

The Questions

The survey was simple: Rate your experience 1-5 then tell us a bit more if you'd like.

The Results

Average score: 2.8/5

Only 18% of respondents gave us the top score.

A surprising thing emerged in the sentiment analysis of users' text submissions: much of the dissatisfaction was due to post-purchase frustrations. It wasn't the process of buying music that was causing users pain - it was the things they tried to do after completing their purchase - right here on the receipt page. Here's a representative list of those responses:

• I can't find my way to print!!
• How do I get it to print my purchase?
• I bought a PDF. Where is it? How do I download?
• Where do I download the PDF? I purchased the PDF but I don't know how to access it?
• Can't find how to download PDF
• I can't download the music I purchased.
• Did not give me prompt to print
• Where is my music?
• I paid for my music and still do not have access to it to print it
• Music did not prompt to print, but charged me
• Can not get my music
• Directions to download are needed.
• I couldn't download the PDF file.

Purchase Successful, Now What?

Clearly, the next steps were unclear. Let's take a look at the current receipt page to find out why.

Issues: We see three filled, block level CTA buttons competing for visual priority. There's a QR code to scan, plus a sign-up form. There are overlapping duplicate instructions in each section - they all say I can get to my music via different avenues... It's no wonder people are overwhelmed and confused.

Some User Action Data

People were frustrated by a lack of clear direction toward various post-purchase tasks - print music, download PDF, access it in the mobile app. We needed to make the next step clear. But first we wondered, How should we prioritize the various next steps? We consulted some existing user data.

Print

DL in-app

DL PDFs

Print & DL

It was a pretty even split:

• 27% only printed their purchased music
• 32% only accessed their purchased music in-app
• 28% only downloaded PDFs
• 13% both printed and downloaded their purchased music

With no clear 'most important next step', our task became to create clarity for all possible next steps, in a design that featured a relatively flat hierarchy.

A Clear View of All Actions

We made a matrix to help define which users, purchasing what items, should see which options after purchase.

Simple Reusable Components

We sketched some simple card link components - a short imperative heading, a brief description below it, plus a link URL.

High-fi Mockups

We made some hi-fidelity mockups and I implemented the frontend markup, layout and styles then worked with the other dev on the project to make sure that our conditional logic displayed the right options.

Each option has about equal visual weight. Icons help with scannability. We included a way to get direct help if needed. Most importantly, the user's options render conditionally based on what they purchased.

Results

Since these updates were released, customer sentiment has risen greatly!

Average score: 4.4/5.

61% of respondents gave us the top score.

Note: We replaced the text input feedback box with a user-interview sign-up form, so we haven't been able to analyze sentiment from recent text responses, but I'm willing to bet there are fewer frustrations about how to print, download PDFs and access music post-purchase

Final Thoughts

This simple case study is a testament to the power of subtraction. We reduced the options on the screen to just ones that are relevant based on purchased items. We scaled back the various UI elements and their colorful styling. We focused on brevity in the copy. Things are less chaotic, and customers are less confused. Hopefully they're more likely to return and buy from us again!