recpt

Native IOS and Android App - UI Design

Overview
recpt is a receipt tracking app that automatically adds your transactions to the credit cards you have added to your account. No more taking photos of your receipts, add a credit card, and let the app do the work for you. Each transaction includes an itemized breakdown. Create groups for travel, sales meetings, or everyday expenses. After transactions have been added to each group, export as an excel spreadsheet for taxes or submit to your employer. An initiative app that is simple to use, but takes security at the same priority as simplicity. Available on IOS and Android.

Credits
I had the pleasure of creating this project during my time at CareerFoundry and was responsible for the entire design process. I started with the user-centered design process together with the principles of Design Thinking and finished it off by user tested and updating the designs.

Purpose and Context
The project is the brainchild of a few friends that travel a lot for their careers and they were looking for a better receipt tracking app. Not being able to find exactly what they needed, it was decided that they would build their own app. This project was the perfect opportunity to create a native app during my time at CareerFoundry.

Duration
The duration of this project was one month. The research phase lasted one week. This included competitor research, user flows, and low fidelity wireframes. The last five weeks were the design process. It started with digital wireframes, style guidelines, and user testing. Then it was moving on following IOS and Android app guidelines to finish designing each app.

Tools & Skills
•Data Analysis
•User Psychology
•User Testing
•Prototyping
•Wire-framing
•Pen and Paper
•Adobe XD
•Adobe Illustrator
•Mock Ups
•Observation and Understanding

Competition
Smart Receipt is one of the most downloaded receipt tracking app on iTunes and the Google Play store. Like most receipt tracking apps, each receipt has to put input manually by taking a photo and adding more information. The navigation and icons are confusing to follow and there are too many options within each section.

I took a look at Quickbook to see how they handled adding a card to an account and security. This app can handle a lot of accounts and do many things, but is simple to navigate. Adding expenses to different groups is also simple, but each transaction will have to edited manually to add an itemized receipt. Each time a user logged in there are multiple steps to take to maintain that security, including facial recognition or a fingerprint.

Flow Chart
The IOS flow uses a bottom tab bar to go in-between a users wallet, groups, profile, and settings. In the header of the app the user can add new cards, new groups, and export.

The flow of the Android app will go mostly go off of the navigation dropdown menu. In the navigation a user can add a card, add a group, and make changes to their profile. Outside of this navigation there are two tab bars which the user can switch between their wallet and groups.

Android Wire Frames

The Android wireframes started off with cards for each individual transaction, but then moved towards a single card the was divided into sections for each transaction. The wallet page change the most through the designs. It started with credit cards laid out over the tops of each other, but then moved to cards showing off an image of a credit card with the information below.

IOS Wire Frames

Same with Android, IOS used individual cards to separate out each transaction but the moved to a singular card that had the ability to drop down to show more information. The wallet screen stayed relatively the same throughout the design process with adding a few tweaks along the way.

Style Guide

The RECPT brand is strong with security and simplicity at its for front. The recpt lettering within the logo is bold with the lines from the “p” and the “t” cut off at the same angle. This angle is used throughout the apps design for a background gradient image. Green is the primary color to symbolize money and transactions, and yellow is the secondary color that brings joy to the user because of how easy the app is to use.

Security
recpt takes security as just much as a priority as its simplicity. Once a profile is created, users must log in every time they open the app. This log-in process can be done with Face ID or Touch ID, depending on what the devices offer.

Objective
The objective of this project was to create a native receipt tracking app that is intuitive, simple, and secure. The biggest problem with current receipt tracking apps is the inability to automatically add receipts. All current apps must scan receipts and then input more information. That is where RECPT is different, it will automatically add an itemized receipt to the cards you add to your account. These transactions can also be added to groups the user creates and then exported as an excel spreadsheet. The biggest problem I will have to solve while creating RECPT is creating a seamless app for both IOS and Android devices. Each app must follow their respected guidelines, including layout design, fonts, and navigation. I used my research and tools to follow the material and human interface design to make sure each app follow the correct guidelines.

Android and IOS Mock Ups

Summary
RECPT has successfully gone from an idea among friends to a full design native app for both IOS and Android. A user can add credit cards to their account so RECPT starts tracking transactions. On the next version of this app, I would change the navigation to make it even simpler. The IOS navigation would look like the Android tabs for wallets and groups.

When I started the app I was looking at building a simple and secure receipt tracking and the final results successfully showcased one each prototype. Take a look at the prototypes for both IOS and Android.

Take a look at my other work.

Responsive E-Commerce Website - UI Design