Transaccts PWA

Scope

Transaccts initially wanted to test out their idea with a Progressive Web App. This would allow any user on any device to access the product. I also had to keep in mind that if successful, Transaccts would eventually become native iOS and Android apps. Starting off with a platform agnostic UI while keeping in mind best practices for iOS and Android platforms was an important consideration.

Research & Discovery

Initial research uncovered very few direct competitors in the market. We drew out user flows and created personas for how a core user might use the product: upload a picture of a receipt, confirm itemized lists and corresponding transaction amounts, then wait for their submission to be approved.

Early designs focused around presenting a feed of information and easy-to-parse detail pages.

Mobile Overview

An overview of all the screens accessible via mobile devices.

Desktop Overview

Being a PWA, functional parity is kept between desktop and mobile.

Automagic and Usability

When the Transaccts team started building the app, we made the conscious decision to automate one of the core features with OCR. Once an image was uploaded to the server, we would use software to parse the image and pull off relevant data - products, product categories, and prices.

Due to the non-technical nature of the core customer persona, I decided obfuscating this process was the best route to go down - creating an "automagic" experience that ended up delighting users.

Finally, as a core feature, I decided that creating a persistent "Add Receipt" button would be a boon to users. Being able to quickly open the app and upload a receipt with as few clicks as possible also proved to be a major selling point for the product.

Add Transaction

Adding a transaction is as simple as pressing a button.

Upload Image

After an image is uploaded, it's scanned with OCR technology.

Reporting

Viewing transaction details via the calendar.

Liked what you saw? Browse more work.