e-Receipt App

Reducing paper waste and keep track of your spending.

Strategies:

Research, UX Design, Prototyping

Tools:

Figma, Swift

Time Period:

December 2020 - February 2021

Overview Problem Research Ideation Prototype Evolve Learnings

Overview

This case study was born out of an idea for a side project. I wanted to work on something new and exciting. Preferably involving technologies that I hadn't worked with before, but that showed a lot of potentials. After some pondering, I set my mind on QR codes and OCR. I combined them in a Swift project, which I also wanted to get to know betters as a new way of creating more real prototypes.

Therefore, I would like to emphasize that the experimental approach and fast prototyping were the focus of this case study.

Problem

Understanding OCR and QR technology

I kicked off my project by doing some desk research about both technologies. It helped me to getter a better sense of how QR codes and OCR work, but also showed me their strengths and limitations.

What is QR?

The first QR (Quick Response) code system was developed in Japan in 1994. The aim was to make it easier for workers to access information about products to efficiently track them in the manufacturing process. But how do QR codes work? A QR reader first identifies three outer squares to orient itself. Once it has identified these three shapes, it can read the inner squares and patterns that contain the actual information. These can be URLs, emails, pre-written SMS, images, texts, geolocations, and more.

This mindmap summarizes all collected details like benefits and use cases of QR codes.

What is OCR?

In short, using OCR (Optical Character Recognition), a computer can convert the text of images or scanned files to an editable document. How is this done? The OCR algorithm breaks down scanned text into individual letters and compares the scanned characters with integrated patterns of letters and numbers. If both are very similar, the algorithm decides that it must probably be this specific letter. Finally, the recognized letters are recombined as words and placed back into their place in the sentence. They can then be assembled into an editable document, or entered in text input fields.

This mindmap summarizes all collected details like benefits and use cases of OCR.

I summarized all the collected information in a mind map. Thus, I found parallels on how both technologies can make a valuable contribution with reference to current issues. These are as follows: Corona, eco-friendliness, and security/convenience. By doing so, I set constraints for myself to work on the project in a more focused way.

QR codes can counteract mandatory receipting and its harmful effects on the environment. Current hygiene measures such as keeping your distance and avoiding contact, like in the supermarket, can also be more effectively enabled with this technology. OCR allows users to get more out of their receipts, as it extracts content in seconds and could thus provide an overview of expenses, for instance.

Research

Collecting User Insights

To begin, I conducted an online survey aimed at gaining more insight into digitization in everyday life. Part one of the questionnaire focused on print and digital receipts, whereas the second part focused on digitizing documents in general and what aspects they deem relevant in this context.

Example questions concerning receipts with responses from all 37 participants.
Example questions concerning receipts with responses from all 37 participants.

Why do people prefer print receipts?

Why do people prefer digital receipts?

I also aimed to find out people's current process of digitizing documents. Thus, I was able to identify key insights that people deem essential when it comes to digitizing documents.

  1. Convenience.
    Participants stated that not losing a digital receipt (13 responses) and that they do not fade over time (15 responses) is why they prefer digital receipts over printed ones. They further consider digital receipts to be easier to store (20 responses) and better for the environment (23 responses). As the majority of my participants use a printer to digitize their documents, they desire a solution that can be used easily (31 responses) and quickly to use on the go (24 responses).
  2. Quick overview.
    Users answered that they mostly scan documents like application documents, financial documents, insurance policies, tickets, and more. Therefore, they need a way to find the required documents as fast as possible. They also clearly stated that they desire a solution that provides them a quick overview of all their documents (28 responses) and lets them categorize and organize their scans (25 responses).
  3. Protected and secure saving.
    The answers of the respondents showed that the majority lose or throw away nearly half (8 responses), up to three quarters (9 responses), or almost all of their receipts (12 responses). As mentioned before, users scan a lot of sensitive files. Therefore, it is not surprising that users mentioned security concerns as a reason for not using a solution to digitize documents (4 responses). They also wished a password-protected application (22 responses). To support them in digitizing their files, they desire a way of protected and secure saving.
  4. Smart add-on functions.
    In addition to the scan function, it should also be possible to export and print the files. In some cases, users need a physical copy (22 responses). They would also like to get more out of the scanned documents, such as calculating expenses based on the scanned receipts (15 responses).

Ideation

Start Your Paperless Journey

Due to limited data sources and time, I realized that I could not approach the very comprehensive issue of digitizing documents. To develop a simplified MVP, I had to compromise. So I decided to focus only on QR codes and e-receipts for now. With this given constraint, I observed my behavior and others' behavior while shopping and afterward in addition to the previous research. I captured the results of these two research methods in a user journey.

This images displays the user journey of the proto persona while grocery shopping.
I used a user journey map to combine the survey findings and my observations from grocery shopping. Thus I could brainstorm opportunities that deem useful in this context.

With the user journey, the research findings, and my observations in mind, I formulated the needs and wishes into user goals. These subsequently provided me with a guideline for concept development. The following are a few examples in no particular order.

  1. As a user, I want to see my expenses from invoices or receipts so that I gain a better overview of my cash and card payments.
  2. As a user I want to store and export my scanned receipt so that I can attach them to my travel expenses.
  3. As a user I want to quickly scan and save my receipt so that I can avoid getting stressed at the checkout while putting my groceries in the shopping cart.
  4. As a user I want to quickly find my desired files so that I can used them for job applications/ taxes/warranty issues.
  5. As a user I can create folders and categorize my scans so that I get a better overview over my purchases.
Sketches for an e-receipt app

I then created the first wireframes and wrote down some crucial things that needed to be integrated into the design. Besides obvious features like a scan function and listing of expenses, I thought about how to get users more engaged to be more paperless in their daily life. The onboarding process should explain the benefits of the app to users even before they register. Notifications should remind the user repeatedly of their achievements in their paperless journey and thus encourage them further.

Prototype

Onboarding

From the research findings, I noticed two things. First, users are reluctant to use a solution to digitize documents, and second, some don't see any added value in it either. In most cases, users only find out what functions and features an app offers after registering. Hence, I wanted to illustrate the benefits of the app even before registration.

The onboarding process integrated into the login and register screen

Scanning QR Codes

The scan function is one of the essential features of the app. The buttons in the home screen provide access to the different types of scans. This allows users to quickly access scans in hectic situations, like at the checkout in the supermarket.

Scanning an e-receipt via a QR code happens within seconds. The amount is added to the current expenses, and the digital receipt appears in the recent scans.

Scanning Documents

Besides QR codes, the MVP also scans documents effortlessly, such as invoices like in this example.

Viewing e-Receipts

All scanned documents or e-receipts can be assigned to categories, allowing for better maintenance. Also, users can create folders for better organization and search through all scans.

Besides the details of a receipt, such as amount, store, date, and assigned category, users can also see the digital receipt. This contains mandatory information such as the date of issue, transaction start and end, and the serial number of the POS system.

Overview of Expenses

Users can immediately see their current expenses for the month. They also see what categories comprise them.

Look through the MVP

As mentioned before, to keep users engaged, I integrated a notification feature. Here, users get notified of how their behavior impacts the environment and encourages to continue to do so. In the settings tab, users can change different settings like changing their password or mail.

Feedback

The initial feedback from users on the MVP was positive. However, only logging in, scanning an e-receipt via QR code, and calling up this receipt have been tested so far. Regarding the other screens, I merely requested input from participants to see what they think of them and what functions they expect them to offer.

Evolve

Next Steps

  1. Integrate more functions like creating folders and permanent data storage.
  2. OCR with open source models showed rather mediocre results. It might be a better option to let users mark the price on the scanned file so that the OCR model can deliver better results.
  3. Test other digram types for visualizing the users' spending to see which one works best with a lot of data and with a few.

Learnings

Key Takeaways

  1. I built a convincing MVP in a relatively short time, even though not all functions are 100% implemented yet. Nevertheless, I improved my Swift knowledge and will do so in the future!
  2. I experienced that it was easier for users to give feedback with such an MVP than with paper or other high-fidelity prototypes. To save time it is sufficient to first implement and test only one essential function and only simulate the others.

Next case study:

Student Project

move