Visual Design Project
Responsive banking app - Nu banc
March 2022
This is a conceptual assignment that I created as a part of my UX Design Institute UI assignment. Project length March 2022 - September 2022 (part-time). My grade was 65% for this project. I had to develop a responsive banking app that worked across mobile tablets and desktop screens. I also had to include the branding guidelines of secure, clear trustworthy in the visual design, this was specified in the brief.
1
Research and create mood boards
2
Develop mobile, tablet and desktop screens
3
sketch rough ideas for my designs
4
Develop mobile, tablet and desktop screens
Finished Prototype
Brief: Create the UI for a new responsive banking application. Your client is a challenger brand looking to make waves in the financial world. Your design needs to work responsively across desktop, tablet and mobile.
The brand requirements that I was given were playful, trustworthy and secure. I was given basic wireframes to start off with but I had to develop them further. I was given the mobile and desktop screens but was told to make the tablet screens a hybrid of the desktop screens.
The three types of screens I had to design were the My Accounts, Current Account and My Spending.
Tools:
These are the basic wireframes that were supplied to me
Moodboard
These are the mood boards that I created. I took inspiration from mostly Dribble and Behance. I also benched marked other banking applications such as the AIB app, Revolute and Monese.
With my mood boards, I was trying to mix conventional banking app styles along with the more creative material that is found on Dribble and Behance. The traditional banking app styles contributed to the secure branding while integrating creative features styles from Dribble and Behance would enhance the playfulness of the product.
I also made sure to only take inspiration from a design that I found easy to understand how it behaved. I did this so the brand principle of clarity would not be lacking. This meant staying away from the very experiential idea that is often found on Dribble.
Click here for a full view of my mood board
Bank Name
As a part of my assignment, I was required to come up with a name for my bank. After many iterations, I settled on 'Nu Banc'. I picked this name as I felt it was appropriate for a challenger bank name. It was simple and I felt it appealed to a younger audience who might be more likely to use a challenger bank.
I chose this name by creating a mindmap with different words that are associated with finance and technology. I started mixing them until I began to come up with names. I toyed with many names such as 'Node Generation', 'Pro-gro' and 'Cyber Coin' before settling with Nu banc.
This wasn't an important part of the brief so I didn't spend much time ideating with names.
Logo
This is the logo I created for my Bank name. I decided to not use it in my final design as my mentor told me it busied the page.
The logo was inspired by how a front of a bank looks traditionally. Instead of having pillars in the middle, I have replaced them with the name of the bank.
I like this logo because the iconography is obvious enough to signify a bank, this helps with the brand principle of clarity. It also has a mixture of straight and curved edges which contribute to the branding principles of security and playfulness.
This was the ideation process that I went through. I started off by playing around with the Bitcoin and Ethereum cryptocurrency logos. I broke the logos up into their basic shapes and started to mix and match them. I decided, in the end, to use the shape of a bank front and mix it with my bank name, Nu-banc.
This wasn't a part of the brief so I didnt spend much time on this section.
Research
I drew some sketches before moving into digital prototyping. This helped me to start ideating quickly so when I started digital prototyping I had an idea of what I was trying to create. If I was to do this project again I would spend more time creating paper prototypes before I created digital prototypes. I feel these prototypes helped me to start visualising how I might build on what was currently supplied to me.
My Accounts - Mobile Screen iterations
I started off with blue background with white cards on top but the blue was too heavy, I did this as blue is often used to give a sense of trust in UI design. I changed the background colour to grey and added purple accent colour. This helped reduce the heavy saturation of the screens but it was still not there yet. I also added a geometric shape to the top of the screen to convey playfulness. I used the font Nunito, which is a round-shaped font that is often used in UI design and I feel it also contributed to the playfulness of the screen. I used Rubik's for the main heading as this is a font which is straight and added a secure feel to it.
I added a profile pic in the top right corner and added the account name. I feel this helped make the screen more clear and more playful as the user is addressed directly.
I started my assignment by designing my mobile screens first.
I made the background colour white and added a purple drop shadow around the button edges and the Monett effect. I also added a coloured blue line at the bottom of the buttons which I feel enhances the colour pallet and visual hierarchy.
I made the background colour grey with white cards. I changed the colour of my purple accent colour slightly. I reduced the font-weight from bold to regular. The screens were starting to come together now. The two font sizes I used on my final mobile design here were 24pt and 20pt while the size of my tab bar font was 10pt. I made the tab bar icon sizes smaller and inverted the colour pallet. This made the tab bar look less busy.
I took away the logo I designed at this point as it was pointed out to me by my mentor that it just busied the page.
My Accounts - Mobile Screen iterations
I designed the tablet screens after designing the desktop screens. This was so I could make the tablet screens a hybrid of the mobile and desktop screens. I designed the screens so that the breakpoints between mobile to tablet to desktop would feel seamless and natural. I did this by stacking the cards on top of each other when the screen went from desktop to tablet, I also changed the top navigation to bottom navigation. When the screen went down to mobile, I moved most of the content off the screen due to the smaller size. I also move the secondary action button underneath the hero area on the screen. This wasn't an ideal design decision but I didn't have the screen real estate to place it somewhere else.
I started off with a drop-down menu and a list of different months as a method of selecting what you spent in a given month or a week. After gaining some feedback from my mentor I was told to use a calendar view UI element if I was to adopt this approach. I made changes and implemented the calendar view.
I was also told to use up the screen real estate on my transaction card as I was not using all the space. After searching around on dribble I saw a screen that displayed information better than the way I designed it so I appropriated it into my style. I did this because it used the screen real estate better than the current version. I added icons to each transaction but I was told by my mentor that it busied the section and didn't add any value as you need to design an icon for each type of transaction and this is too feasible in the real world. I took the icons away.
For my fonts, I used Lato and Rubik, just like I did on my mobile screens. The different sizes were 40. 32, 28, 24, 20 and 16pt. These were the same sizes I used on my desktop screens. The margin used was 24pt in between my mobile which was 16pt and my desktop which was 32pt.
I finished up the same colour pallet as my mobile screens and went through the same process to get the finished style of a grey background, white cards and purple accent colour. I even tried getting rid of the geometric
For my final touches to this section, I moved the account details away from underneath the hero area of my screen as leaving the hero area in the screen uncluttered is best practice in UI design. This also enhanced the clarity of the screens.
My Spending - Desktop iterations
I created my desktop screens after creating my mobile screens. I started off creating by placing my mobile components on a desktop screen size and moved the tab bar to the top of the page.
I added icons and increased the size of my components to try and use up more of the screen real estate. Yet, I felt it still wasn't enough so I added another section to my design that could only be seen on desktop and tablet, this was the 'Spending last 7 days' component which shows you how you have spent your money in the last 7 days in different percentages. I thought this feature would be appropriate for a challenger bank brand as it felt it was a modern and data-driven approach to banking.
I still needed to use up more screen real estate according to my mentor so I added another savings goal. I thought this was a simple solution to this problem without adding another feature.
It was at this point I felt the screen real estate was being adequately used up. I was finally able to concentrate and the visuals of my desktop screens. I applied the same styling techniques I had for my mobile screens. I tried a white background with blue cards and stronger blue accent colour before inverting the white cards and blue background colour. I then finished off with a grey background white cards and a purple accent colour. I added the traffic light system of alerts to the 'Spending last 7 days' section as I felt it improved the colour pallet and made the screen more playful. It was also an excuse to increase the size of that card. so that it was as long as the card above it. This helped with keeping elements in line.
I started off with the fonts Rubik for the heading and Nunito for the body before using Lato instead of Nunito. The font sizes I used for the desktop screens were 40, 32, 28, 24, 20 and 16pt.
If I was to do this project again I would make the margins much wider on my final 'My Spending' screen as I feel there is too much breathing room in the middle. I kept the margin of 32pt to be consistent with the rest of my desktop screens but I feel a break in consistency would have been appropriate, a margin of 48pt might have been more appropriate here.
Typographic scale and colour pallet for all designs
Colour pallet and typographic scale for final designs
.png)
I settled with this colour pallet as I felt the purple gave a sense of trustworthiness to the app. I started off using blue to convey this as blue is often used to convey trust in UI design but as my designs developed I felt that purple was more appropriate for my designs.
I used white to give a sense of clarity and tried to space my components so that they had room to breathe. I used black as my font colour as it I thought it allowed for easy readability which also contributed to the clarity of the app.
Orange was helpful to highlight the alerts in a traffic light system with users' goals set on the app (green, orange, red). this gamification technique helps convey playfulness in the app as it makes the user feel like they are trying to interface with the app in such a way that they feel they can win. This is useful for making users return to the app frequently.
LESSONS LEARNED
I was particularly happy with my mood boards as I felt I did an adequate job taking my inspirations from a variety of sources, this was due to my stronger background in research rather than visual design. Gathering inspiration for some of the mood boards proved more difficult than others but for the brand principles, I felt I researched this well. I liked my colour palette too as I felt It was what I was trying to execute when I was taking inspiration from my mood boards. I felt my purple, white and slight grey gave a nice balance of being trustworthy and clear while the use of white helped with clarity. Despite liking my colour palette I felt that getting this correct took up a lot of my time on this assignment and to some extent other parts of the assignment were lacking because of this such as my grid system. Being quite new to visual design was probably the biggest reason for the length of time I spent on this.
I was least happy with my grid system overall as I felt getting the alignment looking finished was quite difficult to execute. I feel this was because putting most of the elements on cards created a boxy feel to the design but taking some of the components out of their cards was difficult to execute in a way where the design still felt finished. I particularly felt this on the 'My Spending' pages. Getting the spacing and alignment correct across all 3 pages so the breakpoints seem smooth and real was also challenging. I felt I could have been more creative with some of the features I added to the page that would really make this bank stand out from other banks. This was probably due to sticking to a certain design and style too early in the process. I think this would have helped with the principle of playfulness too, something which my designs slightly lack. It also took many iterations to get my components to a place users thought my designs were easy to understand this may have hindered my ability to have fun with the components.
If the brand principles (playful, clear, trustworthy) did not apply I would have not used the principle of playfulness as I feel this isn’t appropriate for a bank where people store their money as I think it creates a slot machine gamification vibe to the app. This might be more appropriate for an app where you just transfer money to other people quickly, not a fully-fledged bank. I would have used the brand principle of modern or futuristic as one of the branding principles instead because if this is to be a challenger bank then this should very clearly highlight to the users that this is the future of banking. This would ultimately highlight the trustworthiness of the app too.