E-receipt App

This case study was born from an idea for a side project. I wanted to work on something involving technologies I hadn't worked with before and showed a lot of potential like QR codes and OCR. I combined them in a little coding project using Swift, which I also wanted to learn as a new way of creating more realistic prototypes. Therefore this case study focused on the experimental approach and rapid prototyping.

Strategies:

Research, UX Design, Prototyping

Duration:

Dec 2020 - Feb 2021

Tools:

Figma, Swift

Context

I started by doing desk research about technologies like QR codes and OCR to better understand how they work as well as their strengths and limitations.

Understanding QR codes and OCR technology

A QR code (Quick Response code) is a two-dimensional barcode that stores information like texts or links in the form of black and white squares. You can scan the code with a camera or app and quickly retrieve the data. QR codes are practical because they are easy to use and versatile.

OCR (Optical Character Recognition) is used to convert text from images or scans into editable documents. The algorithm recognizes letters by comparing them with stored patterns and then puts them together to form words and sentences. The result is an editable text that can be reused.

Finding synergies

By mind mapping all collected details I found parallels on how both technologies can make a valuable contribution with reference to current issues. These are as follows: COVID, eco-friendliness, and security/convenience. Thus, I focused on these aspects for the MVP.

Mindmap showing benefits and use cases for QR codes
Concerning QR codes, the aspect of security or convenience but also eco-friendliness was most frequently encountered.

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.

Mindmap showing beenefits and use cases for OCR
Concerning OCR, the aspect of security or convenience was most frequently encountered.

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.

Objectives

This case study was a personal project. However, my desk research revealed great synergies and benefits for real current problems. So if this was a real project, I would try to achieve the following objectives:

01 Promote environmental awareness

Encourage eco-conscious behavior by displaying the environmental benefits of using the app, with a goal of having 80% of users view their environmental impact summary at least once a month.

02 Retention rate

Maintain a 60% retention rate over six months by providing features that consistently add value to the users' daily spending and budgeting habits.

03 Task success

Ease of use performing certain actions with the app is crucial for its acceptance. Thus, performing the core functions like scanning of receipts, automatic extraction and categorization of expenses and organizing documents should score at least the average SEQ score of 5.5.

04 Time on task

The average time it takes a user to successfully scan a receipt and categorize the expenses if not automatically added to the correct category by default should be less than 10 seconds.

Discovery

The next step was an online questionnaire to find out more about digitalization in people's everyday life.

37 users

I posted my survey on an online platform to reach a total of 37 users.

Current use of print and digital receipts

The first part focused on print and digital receipts, e.g. what's their prefered type of receipt and if they would like retailers to offer digital receipts.

Digital documents

The second part focused on digitizing documents in general and what aspects users deem relevant in this context, e.g. what type of documents do they currently scan and what is important for them when doing so.

In summary, the vast majority of users were interested in a solution for scanning and storing e-receipts and digitizing documents. Based on the results I derived the following 3 themes in connection with e-receipts and the digitization of documents: convenience, quick overview and smart functions.

Extract from the survey results.

Click here to view the user research as PDF.

Ideation

Due to limited data sources and time, I could not approach the very comprehensive issue of digitizing documents. To develop a simplified MVP, I had to compromise and 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.

Wireframes showing first design ideas for scanning documents and qr codes
First design ideas for scanning QR codes, showing spendings and creating folders to cluster scans.

With 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:

01 Overview over expenses

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.

02 Easily store and export scans

As a user I want to store and export my scanned receipt so that I can attach them to my travel expenses.

03 Ease of use

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.

04 Quick access to scans

As a user I want to quickly find my desired files so that I can used them for job applications, taxes or warranty issues.

05 Custom organization

As a user I can create folders and categorize my scans so that I get a better overview over my purchases.

Findings & Strategies

Finding 01: Users seek 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 the participants use a printer to digitize their documents, they desire a solution that can be used easily (31 responses) and quickly used on the go (24 responses).

Strategy 01: Simple and convenient to use in everyday life

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 scan in hectic situations, like at the checkout in the supermarket and scanning an e-receipt via a QR code happens within seconds.

The amount is added to the users’ current expenses and the digital receipt appears in the recent scans. In the home screen users get informed about their current monthly expenses. In the Spendings tab, they can see exactly which categories their spending is broken down into as a percentage.

Monthly expenses can be viewed directly in the Home tab, the Spendings tab delivers a more detailed overview of users' spendings.

Finding 02: Provide quick overview to elevate users

Users 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 with a quick overview of all their documents (28 responses) and lets them categorize and organize their scans (25 responses).

Strategy 02: Organization made easy

In case some details have not been scanned and detected properly, users can edit and correct them and add them to custom folders for better organization. Additionally adding tags allows users to get a better overview about the different areas they spent money on. Receipts scanned via QR codes can also be displayed and exported for later use, such as tax returns.

Finding 03: Smart 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).

Strategy 03: User engagement via smart add-on functions

From the research findings, I noticed two things. First, users are reluctant to use a solution to digitize documents and second, some do not 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 screens before registration showcase users the benefits of using the app.

To keep users further engaged, I integrated a notification feature. Users get notified how their behavior impacts the environment and encourages them to continue to do so.

Users get notified about their environmental impact by using digital receipts instead of printed ones.

Learnings

01 Well-balanced depth of implementation

Focusing on one essential function and simulating others proved to be an effective strategy for efficient testing. Even though this project was just a personal case study, I learned about the importance of strategic prioritization in feature development to maximize available resources which I will definitely use in real projects.

02 Functional MVP improves quality of feedback

Testing a functional MVP rather than static prototypes significantly enhanced the quality of user feedback. I had the impression that users were more engaged and able to provide actionable insights, such as preferring manual marking for scanned prices over relying solely on OCR results.

03 Rapid prototyping with Swift

I initially started working with Swift through my bachelor thesis and the project helped to improve my Swift skills. It also proved to be relatively easy to create a tangible, interactive experience, as I was able to use native libraries for scanning documents and realized the rest of the MVP by simply inserting images from the high fidelity designs from Figma.


That's the end of this project.
Wanna go to the next?

➔