PRODUCT DESIGN

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?”.

Introducing Scannr

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

The Backstory

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?

1. In a way that is seamless in comparison to the current solutions for it.
2. 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

Understanding OCR

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?

A video explaining the technology behind the wheel: Document scanners make use of optical character recognition for turning characters on-page to live text. After the OCR component of the scanner does its work, the ultimate result can be in the form of searchable and live text in PDF or a word document.

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.

Gathering Insights

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.

Excerpts from the virtual interview held with one of the respondents.

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.

I tried to ask more open questions about their previous experiences in order to get more reliable insights.

Synthesizing the data from the interviews enabled me to identify the following user behaviour patterns:

Key insights directly from the users.

I was also able to get leads on other competitive apps that these people were either currently using, or had previously tried before.

Exploring Alternatives

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.

Creating Personas

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.

I used a customer journey map to organize the themes gotten from research and mapped out the flow of the users’ interaction with the application

Interesting Finds

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.

Distortion Correction — This technology is a “behind the scenes” feature and you won’t even know that it’s there. But, Distortion Correction does ensure you a more perfect scan that previous versions because it corrects for things like book spines, or crinkles in papers.

Narrowing Expectations

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.

Embracing Structure

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 reflected on the issues users had with existing apps and focused on designing for a time-saving approach.

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

3. Items

4. Date..

This enabled me to make some necessary adjustments to the user flows and informed the user stories for the application.

As a user...

User stories highlighting the use cases for the application. I explored multiple ways to simplify the process. I wanted to make the app easy for people to adopt, especially since this was supposed to be a habit replacing tool.

Testing, Testing

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.

“I don’t understand what to do after tapping on the first item on the screen.”

This took me back to the drawing board and inspired a new solution to be designed as a feature — a correlation flow.

The idea was to break down the process into stages and offer the user more control over the outcome of the documents, by using the principles of 3D direct manipulation and immediate visible feedback.

The second round of testing yielded more positive results. I was able to evolve the product through multiple iterations and feedback gotten from peers.

Introducing Scannr

The digital journey to paperless receipts

Onboarding screens to highlight the exciting features to new users

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

Sign up feature

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

Initiation and Capturing feature

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

Extraction feature

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

Correlation feature

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

Add Category feature

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

Save/Export feature —Keeping your data right above your head and at the tip of your fingers

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.

Outcome

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:

1. Always factor inclusion in your designs. No one should automatically be unable to use your product before they even get to decide for themselves.
2. Start small. It’s okay to start the journey to save the world from paper dependency from a single feature. Prioritise experience over features.
3. 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.
4. 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.

What’s next?

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.