< BACK

Piggybank App

CONCEPT

So I decided to map out the main problems I had with my recent banking/finance app. After I identified these main pillars, I did a little of cascading of fundamental actions in each one.

BRANDING

For the branding concept I started drawing out some coins/pigs, after that I experimented drawing some airport control towers, simulating your control tower app for finance. After a few drawings, the piggy tail popped out. Since the piggy tail is a bit script-ish, I decided to go full on script logo. After writing a few "Piggy Bank" with the brush tool, I noticed I was starting to lose some time in the whole drawing/digitalizing process. So I picked a similar font for the sake of the exercise.

USER EXPERIENCE

Mobile Sketches

Mobile First Approach

The whole UX was done in pencil and paper. The approach was mobile first, after the mobile UX was done, I decided to go on for the iPad landscape escalation, which was a bit easier since the core functionalities were already laid out on the mobile version.

iPad UX

For the iPad version I decided to eliminate the most of the taps as possible, this by putting straight up the money transaction column, right next to the report and under the general balance for the selected account. Leaving space for the graphic to breathe.

USER INTERFACE

For the home screen after unlocking it, I decided to make the color scheme of the UI match the one of the selected card, avoiding possible confusions while browsing accounts. The browsing of the cards is intended to be easy, letting the user swap between them or just scrolling.

iPad UI

UI Construction

The challenge in here was to relocate the card catalogue, since the mobile version is very explicit about it. So the solution was to have it on the top bar in a dropdown menu, leaving space in the middle fot the distribution of the key pillars of the app.

Final UI for the iPad Landscape View