The brief
Mobile Banking is a case study I completed for my UI Diploma at the UX Design Institute (Glasgow Caledonian University) in 2022. 
The objective was to create a fresh new interface for a responsive banking application for three screens on desktop,
tablet and mobile (nine screens in total). 
Process : I received very basic wireframes in black and white, which I had to redesign, keeping in mind the brand principles  (playful, clear, and trustworthy). I worked through the UI design by 1. creating a moodboard; 2. Choosing a colour palette and fonts; 3. Generating icons; 4. Creating UI components and 5. Designing the wireframes. 
1. Moodboards and references
I started the redesigning process by creating the moodboard, searching for inspiration and conducting a reflexion around design standards. I wanted to understand what is the biggest trend in visual design and user flow in mobile banking. On my mood board, I put the design examples that correspond at least to one of the brand principles. I gathered inspiration from sites like Dribbble, Pinterest and Behance. 
2. Colour palette & fonts
I used purple as the main colour (primary and primary dark) and light green and orange tones for complementary colours. I believe they are clear, playful and cheerful. The purple is associated with trustworthiness, while the green is associated with clearness and the orange corresponds to playfulness. I used these colours with white and light purple backgrounds to make the design as clear as possible and avoid overloading with colours. I used grey black for the font,  so it isn't entirely black colour. Also, from a strict visual aspect these 3 bold colours work really well together unexpectedly and stimulate the user. I chose some gradients based on the main and the complementary colours to apply to visuals and give a bit more depth and playfulness to the design. Otherwise, it would be too flat. I chose the sans-serif font, Noto Sans which seems pretty clear and modern. 
3. Icons
I created icons based on the inspiration I gathered in the first step. I used simple, clear and modern icons with not much detail. I applied the primary and primary dark colours to them. 
4. UI Components
I explored different designs of patterns, shapes, buttons, form fields, tables, menus and graphs which eventually became my UI components. I created a global style based on the chosen colour palette and the font, which I applied to the UI components. 
5. Wireframes
I received basic wireframes to redesign. I started redesigning the mobile screen first, then the tablet screen and to finish with the desktop. I worked on the layout and the main lines first, including the main navigation bar. After that, I added shapes, buttons and content. I applied the global style to the wireframe. My designs changed several times, sometimes I erased everything to start again from scratch. I also changed the brightness or the saturation of the colour palette. 
My accounts
Current account
My spending
↑Back to Top