Redesign #2 - Receipts

I recently had to send a parcel to a friend. Straight forward enough process, package the item up, take it to the post office, pay for it to be sent and I’m done.

And that’s what I did, nice and easy.

He then asked for the reference number, so he could use the Royal Mail Track and Trace service to keep tabs on the whereabouts of the parcel as it made his way to him.

I didn’t have the reference number to hand but a quick Google told me I could find it on my receipt.

This is what greeted me…

The Royal Mail receipt I received

You’ve got to be joking.

How do I navigate my way through this?

No visual hierarchy, little to no information hierarchy, and the font makes it difficult to read.

The letter spacing and line spacing is too tight, as such all of the text just blends into one chunk making it hard to pick out what I need.

It’s also not obvious where this receipt is from. If I’m flicking through my wallet trying to find it it’s not going to stand out amongst the many others in there.

And why are there two receipts? I’m more likely to lose or misplace one of them given I now have two to look after.

I needed to find one piece of information, the reference number, I’m not embarrassed to say I searched for 2 minutes before eventually stumbling across it. Can you find it?



Why not something like this?

Cleaner, simpler and much easier (personally) to scan through and pick out what I need quickly.

You’ll see there is a lot less information on mine compared to the receipt I received from Royal Mail. I’ve removed what I consider to be unnecessary information, and stripped it back to the essential pieces of information and data a user would need.

The information hierarchy is clear and presented logically. The big bold titles that come before each section of the receipt allow a user to scan through and identify quickly the part of the receipt they need.

The text is legible. Not too much to say on that point… You can actually read mine.

I’ve kept it black and white as such is the standard of all receipts. Apart from the Royal Mail red strip at the top. This is used to differentiate this receipt from the rest in a users wallet, purse, bag, draw etc. It also adds a bit of the brand to what is typically a standard document. I don’t see it increasing printing costs too much.

And lastly, that key piece of information, the trigger for me to redesign and write this story, the reference number. It’s visually picked out from the rest of the information, it’s clearly labelled and I have provided the URL that the user needs to track their parcel.

Of course this redesign is focussed around the receipt I received from Royal Mail. But the principles I’ve used in the redesign should be used for all receipts. They’re simple to implement and improve the users experience.

The principles:

– Use visual hierarchy to pick out key pieces of information

– Clear information hierarchy. Use bigger and heavier weights of font for titles and important information the user needs

– Generous letter and line spacing

– Consistent and big enough gaps between different parts of the receipt

– Remove all unnecessary information and data. Give the user what they need to complete goals, nothing more

So yeah, there you have it, something else that bugged me and that I questioned why it appears and acts the way it does.

Your thoughts and feedback welcomed.