~uglyduck/uglyduck.srht.site

ref: 327101a41134614ca313db49525e7846b6b7efed uglyduck.srht.site/_site/improving-receipt-ux/index.html -rw-r--r-- 5.2 KiB
327101a4 — Bradley Taunt Slowly running through past articles to ensure proper layout and styling 6 months ago
                                                                                
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
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
<!DOCTYPE html>
<html lang="en">

  <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>
    
      Improving Receipt UX &middot; Ugly Duck
    
  </title>
  <meta name="description" content="A personal guideline I follow is to always gut half the elements on a form">
  <link rel="shortcut icon" href="/favicon.png">
  <link rel="alternate" type="application/atom+xml" title="Ugly Duck" href="/feed.xml">
  <link rel="stylesheet" href="/style.css">
</head>


  <body>
    <header role="banner">
    <hr>
<nav role="navigation">
    <a href="/">Home</a>
    <span>&middot;</span>
    <a href="/about">About</a>
    <span>&middot;</span>
    <a href="/projects">Projects</a>
    <span>&middot;</span>
    <a href="/articles">Articles</a>
    <span>&middot;</span>
    <a href="/uses">Things I Use</a>
    <span>&middot;</span>
    <a href="/privacy">Privacy</a>
    <span>&middot;</span>
    <a href="https://en.liberapay.com/uglyduck/">Support</a>
    <span>&middot;</span>
    <a href="/feed.xml">RSS</a>
</nav>
<hr>

</header>

    <main id="main" role="main">
      <header>
        <h1>Improving Receipt UX</h1>
      </header>
      <hr>
      <article class="">
        <p><em>Posted on <time datetime="2019-05-14T20:00:00-04:00">May 14, 2019</time></em></p>
        <hr>
        <p><em>There was a pretty interesting article posted a couple days ago</em> 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 id="what-was-the-redesign-exaclty">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 id="what-did-this-concept-get-wrong">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 id="receipt-redesign">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 id="final-thoughts">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>

      </article>
      <br>
      <footer role="contentinfo" id="menu">
    <hr>
<nav role="navigation">
    <a href="/">Home</a>
    <span>&middot;</span>
    <a href="/about">About</a>
    <span>&middot;</span>
    <a href="/projects">Projects</a>
    <span>&middot;</span>
    <a href="/articles">Articles</a>
    <span>&middot;</span>
    <a href="/uses">Things I Use</a>
    <span>&middot;</span>
    <a href="/privacy">Privacy</a>
    <span>&middot;</span>
    <a href="https://en.liberapay.com/uglyduck/">Support</a>
    <span>&middot;</span>
    <a href="/feed.xml">RSS</a>
</nav>
<hr>

    <small>
        Keep this website ad-free by supporting via <a href="https://en.liberapay.com/uglyduck/">Liberapay</a>.<br>
        Built with <a href="https://jekyllrb.com/">Jekyll</a> & hosted on <a href="https://netlify.com">Netlify</a>.<br>
        Maintained with &hearts; for the web.<br>
        Honorary member of <a href="https://1mb.club">1MB Club</a> &amp; <a href="https://xhtml.club">XHTML Club</a>
    </small>
    <hr>
    <small>The most recent revision of this page was made on <b>November 11, 2021</b></small>
</footer>

    </main>
    
  </body>
</html>