build/improving-receipt-ux/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65

<!doctype html>
<html lang="en" id="top">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="icon" href="data:,">
	<title>Improving Receipt UX</title>
	<link href="https://bt.ht/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" />
	<style>*{box-sizing:border-box;}body{font-family:sans-serif;margin:0 auto;max-width:650px;padding:1rem;}img{max-width:100%;}pre{overflow:auto;}table{text-align:left;width:100%;}</style>
</head>

<nav>
  <a href="#menu">Menu &darr;</a>
</nav>

<main>
<h1>Improving Receipt UX</h1>
<p>2019-05-15</p>
<p>There was a pretty interesting article posted a couple days ago about <a href="https://www.fastcompany.com/90347782/the-humble-receipt-gets-a-brilliant-redesign">rethinking the standard receipt design</a> that I found quite compelling. Although, as good as the concept is, I think it can be improved (simplified) even further.</p>
<h2>What was the redesign exaclty?</h2>
<p>Overall <a href="https://twitter.com/datatoviz?lang=en">Susie Lu</a> did a wonderful job tackling such an old and forgotten design. She fixed some major pain points with the current receipt layout:</p>
<ul>
<li>Bubble chart to visually indicate total spent per category</li>
<li>Categorized items by percentage of total spent</li>
<li>List individual items in descending order based on cost</li>
<li>Bar charts to compliment the item listing order</li>
</ul>
<p>Curious how her redesign looks? <a href="https://www.fastcompany.com/90347782/the-humble-receipt-gets-a-brilliant-redesign">Take a look at the original article</a></p>
<h2>What did this concept get wrong?</h2>
<p>Simply put: <strong>paper waste</strong>. </p>
<p>Using bubble and bar charts from a visual design perspective is great - but not so eco-friendly in this instance (since we are dealing with physical paper waste). It might seem like a small nitpick but with hundreds of thousands (if not millions) of receipts printed daily, this extra paper space required would add up quickly.</p>
<p>Fortunately, I think with some minor tweaks we can keep the underlying principles of the new redesign, while creating a more eco-friendly layout. We can save more space and therefore save on the overall paper needed.</p>
<h2>Receipt Redesign</h2>
<p>Let's take a look at my redesign concept:</p>
<p><img src="/public/images/receipt-update.webp" alt="Receipt Update">
</p>
<p>With this layout we are able to keep all the key concepts that <a href="https://twitter.com/datatoviz?lang=en">Susie Lu</a> initially introduced with her receipt design while preserving more space.</p>
<ul>
<li>Categories are still listed by percentage of total spent</li>
<li>Individual items are organized in descending order based on cost</li>
<li>Uppercase and lowercase elements are used to distinguish parent / child items instead of additional space or dividers</li>
</ul>
<h2>Final thoughts</h2>
<p>The original redesign from a visual perspective is <em>wonderful</em> but when you start to think about implementing it into the real world, it seems slightly impractical. My redesign concept is far from perfect (I'm sure I've overlooked some use cases) but I think it's a strong step forward for redesigning our archaic receipt layouts.</p>
<footer role="contentinfo">
    <h2>Menu Navigation</h2>
    <ul id="menu">
        <li><a href="/">Home</a></li>
        <li><a href="/projects">Projects</a></li>
        <li><a href="/uses">Uses</a></li>
        <li><a href="/wiki">Wiki</a></li>
        <li><a href="/resume">Resume</a></li>
        <li><a href="/colophon">Colophon</a></li>
        <li><a href="/now">Now</a></li>
        <li><a href="/donate">Donate</a></li>
        <li><a href="/atom.xml">RSS</a></li>
        <li><a href="#top">&uarr; Top of the page</a></li>
    </ul>
    <small>
        Built with <a href="https://git.sr.ht/~bt/barf">barf</a>. <br>
        Maintained with ♥ for the web. <br>
        Proud supporter of <a href="https://usefathom.com/ref/DKHJVX">Fathom</a> &amp; <a href="https://nextdns.io/?from=74d3p3h8">NextDNS</a>. <br>
        The content for this site is <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>.<br> The <a href="https://git.sr.ht/~bt/bt.ht">code for this site</a> is <a href="https://git.sr.ht/~bt/bt.ht/tree/master/item/LICENSE">MIT</a>.
    </small>
</footer>