Designing Scannr — A Digital Journey to Paperless Living
A UI/UX Case study on designing for OCR Technology
Ever kept that receipt for a “maybe” occasion? We’ve all been there. And who could blame you really, you might just have to return that item to the store, be audited by the IRS, or better still; asked to provide proof of purchase for a warranty.
We all feel the need to hoard receipts for various reasons. A lot of us more than others apparently. And if that is the case, you might also think to ask yourself, “How often am I able to find that receipt when I need it?”.
Scannr is a mobile app that takes you on a digital journey to paperless living. No kidding! It takes your physical data and turns it into something tangible that you can read, modify, and create content out of — by digitizing it.
All these, while ensuring that the data is made available to you whenever you need it in real-time. Pretty cool, right? Now let’s back it up a little.
”It all started as a fun growth project to work on over the weekends..”
Discovering a Problem
Scannr came about as an idea for a side project. I wanted to work on something exciting. Preferably a new technology that I hadn’t yet interacted with. I chose OCR technology after being inspired by this thinkpiece article written by Fu’ad.
The idea is, what happens when you take 18,000 days of print, archive digitally, and make them available at the speed of a web search?
Asides from it being a clever way to essentially save the planet — by reducing the world’s dependency on paper — I was interested in the problem he had highlighted and the sheer idea of digitising documents.
How might the average person digitise their documents?
- In a way that is seamless in comparison to the current solutions for it.
- In a way that would ensure that their information could always be readily accessible to them?
I decided to find out. But since this was relatively new terrain, I had to take time to understand the context around the problems I was hoping to solve.
Starting with the Basics
To kick-off, I started out doing a bunch of desk research; reading articles, and watching videos to get a better sense of what OCR was — how exactly does this technology work?
Would it actually solve the problem here?
Creating a digital solution for an existing problem also meant that I needed to find out how people were currently solving it for themselves. This would allow me to explore a better solution around it.
A major constraint, however, was the fact that due to the pandemic, I had limited reach. This meant that I could only interact with a handful of people virtually.
Who needs Scannr to digitise their documents?
I set the criteria for people that recognised the need to digitise their documents and had previously tried out a few solutions. Most of which were also OCR enabled. This allowed me to hold a couple of interviews with potential users.
I approached the interviews by asking these people about how they handled their documents. I was curious as to why digitisation was not more of a widespread practice.
My main aim was to understand what their motivations, triggers and abilities were. From this, I hoped to gain insight into the basic decision-making process as they figured out what and when to digitise their documents.
Synthesizing the data from the interviews enabled me to identify the following user behaviour patterns:
I was also able to get leads on other competitive apps that these people were either currently using, or had previously tried before.
Comparing existing solutions
I carried out a competitive analysis of other existing OCR apps and took the time to analyze how their processes worked by doing detailed landscape assessments.
What have other people been able to accomplish with this?
Trying out firsthand experiences with some of these applications enabled me to note down the things they had done right and connected with my current understanding of why they had done it, or how they had gone about it.
I also noted down the functions that could be improved on and market opportunities in which they were currently lagging.
Finding new patterns
As part of the research, I asked people how they had tried to digitize their documents using offline and digital methods in the past.
This revealed two major categories of potential users:
- The first-time novice user
- Experienced users that had tried other OCR apps before i.e like CamScanner
The users that had prior experience with OCR apps had expressed that they were either not impressed, or had been entirely put off by the inaccuracy of the scan results.
This inspired a new opportunity which I mapped out with the use of a customer journey map, along with the rest of the data from the interviews.
Solving for Inclusion
During the interviews, I also discovered that a lot of people didn’t necessarily prioritize having phones with great cameras. Yet OCR relies heavily on the quality of the document or the camera being used.
For a larger market reach, this meant I had to factor that into the design of the application.
I wanted to make sure that the users would still get to meet their goal regardless of the initial camera quality. This inspired a new solution that I implemented as a user flow for the logic of the application.
Big, starts small
Due to the limited data sources, I eventually realized I couldn’t start out tackling the very broad problem of digitizing documents.
I needed to make necessary tradeoffs for a simpler version that satisfied the needs of a minimum viable product, so I narrowed it down to the next best thing — Receipts.
A receipt is a financial reporting document that represents proof of a financial transaction. The average person is issued a receipt in business-to-business dealings, stock market transactions, etc.
Each time they make a financial transaction, it generates a paper trail on a weekly basis.
The frequency of use of receipts recorded from the average person during the interviews meant that I already had a substantial amount of data to work with.
Likewise, reframing the problem enabled me to close the knowledge gap about how and when this solution would be used.
Leading with content
Research determines content, and content determines the design. In that order. This is what drove my content strategy and copy-first approach for this design.
The personas had my attention on:
I considered what the personas would want to do with their receipts and how best to ensure that they could easily find them amongst the documents they have saved on the app.
Scenario: Derin needs to confirm his warranty at a store he recently bought a product from. What factors are likely to be considered inorder for him to accomplish this task?
1. Vendor’s name
2. Receipt number
This enabled me to make some necessary adjustments to the user flows and informed the user stories for the application.
As a user...
Do you copy?
Design is only good if it works. This sounds obvious but it meant I had to aggressively test out my assumptions for this project.
I created prototypes and tested the usability of the design on real users. The tests required them to carry out tasks on Scannr. A few people reported that the flows had left them confused.
This took me back to the drawing board and inspired a new solution to be designed as a feature — a correlation flow.
The second round of testing yielded more positive results. I was able to evolve the product through multiple iterations and feedback gotten from peers.
The digital journey to paperless receipts
Scannr is perfect for capturing, storing and categorizing billing expenses, while easily saving the scanned bill to the Cloud.
Get started as easy as pie
It only takes a minute to get you started. Less, if you’re already signed in with a Google or Facebook account on your device.
Initiate and engage your document in split seconds
From top to bottom, Scannr is built to help you stay efficient. Fire it up and get ready to go digital in just split seconds!
Directly influence the results of your scan
You no longer have to wonder what goes on behind-the-scenes. Scannr gives you a piece of all the action, by keeping you in control of the final outcome of your document.
Easily correct possible machine learning errors
Humans aren’t perfect, and neither are algorithms. Easily correct any of Scannr’s errors and watch it get better every time.
Stay organized with Categories
Scannr helps you sort through your saved data by keeping them organized in various categories.
Transfer or maintain access to all your valuable data from any device
Why use paper when your data can always be right above you? — Scannr helps you store your valuable receipts in the clouds or transfer it across multiple digital formats.
This was a really exciting and fun project for me to work on as it provides real value, involved a ton of research, and detailed interaction work.
I learnt the following important takeaways from this project concerning product and business processes:
- Always factor inclusion in your designs. No one should automatically be unable to use your product before they even get to decide for themselves.
- Start small. It’s okay to start the journey to save the world from paper dependency from a single feature. Prioritise experience over features.
- Do not be overly precious about an idea. I had to go through multiple iterations of Scannr to arrive at a version that works, and it wasn’t a perfect replica of the original idea.
- Great designs have to be able to pair intuition with logic. I came to understand that all ideas are assumptions and therefore, all assumptions have to be tested to see how well they scale in real-time.
There’s a lot of opportunities and improvements that could be made to this. For one, the cloud storage option presents a way to monetize the application and further develop the product from a business model perspective.
I hope to keep iterating through a public version of this product, but for now, I’m glad I started small.
Hi, I’m Lola and I create exceptional experiences that align your business strategy with your customers’ needs. I also write to help people build, launch, and scale amazing products. If you’d like to reach out, follow me on Twitter to continue the conversation. You can also check out more of my work on my portfolio.