App UI Design
Designs for mobile, tablet, and desktop.
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:
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.
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):
If you don't see the Flows menu on the left in the Figma interface, try reloading this page in your browser.
Alternatively, click the button below: