Now that my wordmark and logo colour has changed, there will also be changes to my colour scheme within my bank app user interfaces and other brand applications.

The first thing that I need to re-do/recolour is my bank card. I also did some extra experiments to see whether I should have 3 colours in the gradient, 2 colours in the gradient or no gradient at all ( 1 block colour);

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

In the end, I decide on the 2 colour gradients. The 3 colour gradients only gave 1 card for each style, there is no room for customization. The 1 gradient/ 1 block colour card is not on theme with my brand. The 2 colour gradient is perfect, is on theme with my brand, and also it gives 3 different cards for each style ( orange/pink, orange/blue, pink/blue).

I then tried out some different card designs using 2 colour gradients only;

 

 

 

 

 

 

 

 

 

 

 

 

I really liked all the designs, it was really hard for me to choose which one I should choose. After discussing with my teacher, we decided on the style in columns 1 and column 3.

I didn’t go for the styles in columns 2 and 5, because the styles are a bit too complicated.

The column 3 style will be used exclusively as a physical card. I chose this one above all the rest for its uniqueness and simplicity. The holographic theme fits the Prisma branding. The style in column 4 style also has a holographic effect, but since its colour gradient is at the bottom, it will be harder for the users to tell which card is which when it’s in the wallet.

The column 1 style will be used exclusively for the bank app, since it doesn’t have any shine or holographic style, it is simple and better suited for digital use as realistically the holographic effect will only show when used in physically.

Before I re-colour scheme my UI, I wanted to do a few icons for my bank app. So far I have been using the icons from an icon set found in Figma, but I wanted to practice and do some icons of my own;

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

I keep in mind to make my icons as simple as possible because my Bank app is so colourful already, I didn’t want to overpower the visuals.

When I was ready to re-do my UI again, apart from changing the colour scheme, I was given some extra advice from my teacher. My original app used to colour a bit too liberally, and that really hindered the use of the app because it is visually overloading and made the app appear too childish as well. Thus in my redesign, i kept that in mind;

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

( Top is the original, and the bottom is the redesigned version)

The re-designed version is still very colourful, but the colour is a lot more uniform and clean than the original.

Since I want my app to be very interactive, different cards will have different colour schemes to show the users which card’s transaction summary/spending overview they are looking at. This is not part of our work requirements, but I wanted to see what it could look like;

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

( The user can swipe left or right on the cards at the bottom to switch cards, and each card has a different colour of summary corresponding to the gradient of the card)

I really love the outcome, the colours work really well together!

Another interactive part I added in was the icons, when the user is on a specific page, that section’s icon would turn pink;

 

 

 

 

The last thing that I did for the bank app was to make 3 more case studies of other UI screens and replicate them;

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Finally, that is my bank app prototype complete.