piggi Bank
App UI Design

Designs for mobile, tablet, and desktop.

Project Summary

Piggi,* my (fictional) client, is a new bank—a self-described "challenger brand looking to make waves in the financial world." They want an intuitive, responsive banking application that will help them stand out from the crowd.

I was to create polished UI mockups for desktop, tablet, and mobile following PIggi's brand principles for tone and personality:

Playful: Using our product should be a joy for users. We’re not afraid to show some personality through color, animation, and shape, but never at the cost of being intuitive.
Clear: We’re dealing with people’s money, so we need to present information in a logical and uncluttered way.
Trustworthy: Users must feel they can trust our product.

*The assignment brief did not provide a name for the bank; our first objective was to come up with a name. I chose PIggi.

Context and Timeframe

UX Design Institute (Professional Certificate in UI Design)
October 2021 - April 2022

What did I do?

I chose the Piggi name and logo, then created high-fidelity mockups of three screens:

my account
account activity
reports: spending

I created versions of these screens for mobile, tablet, and desktop, so there were nine screens in total.

Making a name for yourself

In a real-world project, the bank would already have a name (and probably a logo). In this case, however, that was left up to me. Choosing a name, logo, and logotype for the bank was a critical first step in the project. A good UI design should reflect the brand and its identity. The tone and personality characteristics (playful, clear, trustworthy) provided the framework, so I set about choosing a name, logo, and logotype that captured those qualities.

All the screens I designed (best viewed in full screen mode)

View the Prototype

BEST VIEWED IN FULL SCREEN MODE

This isn't really a prototype. However, by using Figma's prototyping features, I was able to create something that allows you to view the screens as they would appear when scrolling on a device.

Each flow (Mobile, Tablet, Desktop) contains three screens that can be accessed via the "hamburger" menu icon in the upper right or the nav menu on the left (for the desktop version):