BACON

Bacon is a financial app focused on two things: cash flow and bill pay. Getting a grip on cashflow helps customers create budgets and save for future purchases. The app is set to launch in Summer 2016. 

Year: 2015 - 2016
Role: Senior Designer
Team: Alec Eriksson (Creative Director)
Platform: iOS Phone

 

bacon12bacon12

Past

In the Past view, users get a look into their spending habits. They can view overall spending by month and can drill down into the details of specific transactions.

Present

In the Present view, users can see their overall current balances, including available cash and credit. This is also where users will add their bills and set them to auto-pay on a specific date.

Future

In the Future view, users create savings goals for future purchases. They can choose to manually transfer money from their cashflow accounts, or they can create auto-pay savings goals.

Bill Pay

Users can set up their bills to auto-pay so they never have to worry about late payments again. Bills can also be added to the timeline without auto-pay, requiring users to come back to the app and pay them manually. In-app notifications remind users when it's time to pay a bill. 

Bills are displayed as "bubbles" and their size is directly related to the amount of the bill. Tapping on a bill expands the bubble, allowing the user to edit bill information and view payment history.

Quartz Composer & Origami

I spent a solid week focused on learning the ins and outs of both QC and Facebook's Origami framework. After I got the hang of it, quickly protyping ideas and interactions has become so much easier. I used to spend a lot of time in After Effects, but now I find myself mocking things up in QC first. Having the ability to see your design on the device and be able to interact with it live is a game changer. Also, thanks Facebook for making your tool open source.

The Quartz prototype that sold the idea

Swipe Up 

The app has three main sections: Past, Present, and Future. To navigate to these sections, the user swipes left and right at the top level. To get more detail on the section they're currently in, they swipe up on the card (or tap the arrow). In the Present, this reveals all your accounts and bills that are due in the next 30 days. If multiple banking accounts are added to the app, the user swipes left and right between them. 

Animation created in After Effects

Bubble Expansion

I wanted the bubbles to feel alive, so making them grow and contract when tapped felt like the right interaction, instead of simply being a link to another view. When a user taps on a bubble, they are presented with more information and the option to expand into full details. Tapping "edit" would take the user into the full detail view of the selected bill. Tapping the bubble again, or outside of the bubble, would collapse the bubble back to its original state.

Created with Quartz Composer

Drag-to-Pay

When a bubble is in its expanded state, users can pay the bill by dragging the bubble up to the top of the screen. This keeps the theme of having the bubbles feel alive.

Created with Quartz Composer

Payment Confirmation 

This is the confirmation animation after a bill has successfully been paid. Again, I wanted the bubbles to feel alive, so I included lots of animation. Also, I took the opportunity to upsell the user on premium features with the space at the top of the screen.

Animation created in After Effects