Ultimate Bank
Project: Banking app
Role: UX designer
Duration: Dec - Feb 2023
Responsibilities
Conducting competitive analysis, paper and digital wireframing, low and high-fidelity prototyping and iterating on designs.
Project vision
The Ultimate Bank app aims to revolutionize the banking experience for customers by offering a seamless and user-friendly mobile banking solution. The app will provide customers with all the essential banking services they need, while also incorporating innovative feature to make banking easier, faster and more convenient. The goal is to make managing finances as easy as pressing a button, by providing a clean and intuitive interface. The Ultimate Bank app will offer a comprehensive banking solution that is designed to simplify the lives of customers, making banking accessible to everyone.
The goal
My goal is to create an application that is easy to use. All important functions should be located at the bottom of the screen or should be easily triggered using gestures. It will also be important for the application to properly present these functions to its users. My goal is also to discover all the interesting features and drawbacks from the competition and attempt to implement them in this application.
Competitive analysis
I conducted a competitive analysis to find valuable insights into the strengths and weaknesses of similar mobile banking apps in the market. In my analysis of the banking industry, I compared several key features of my competitors to determine how Ultimate Bank could set itself apart. By analyzing these features, I was able to identify areas where Ultimate Bank could improve upon and provide a more comprehensive and user-friendly experience for its users.
With Envelope (Pockets), you can create financial goals, such as saving money for holidays, and capitalize on them in a savings account.
There is a call-to-action button in the tips section of the Air Bank app. This allows you to easily try out the tip. For example, you can go directly into the dark mode settings.
In most mobile banking apps, you can view important information about your card, such as the card number, expiration date, and CVV number. This information is securely stored within the app, providing you with easy access when you need it.
User flow
I proposed a user flow for making a payment, where you can try my new feature - import payment data from an image or a screenshot.
First ideation
Before moving on to high-fidelity wireframes, I created a few paper wireframes to roughly sketch out the appearance of the app. The use of paper wireframes has the advantage that you can make any changes quickly. During the sketching process, I followed the Gestalt principles to create the best possible user experience.
Low-fidelity prototype
My low-fidelity prototype provided a rough representation of the key features and functionality, serving as a valuable tool for testing and refining initial concepts.
View Banking app’s low-fidelity prototype
View Banking app’s low-fidelity prototype
Final design
The menu is arranged in a way that optimizes user convenience and efficiency, with items divided into multiple categories. This reduction of choices follows Hick's law and makes it simpler for the user to make a selection.
The home screen features all crucial functions in an editable format. You can open the payment sidebar (left), more (right) or payment history (down) with just a finger gesture.
All payment method in the sidebar. You can find there my new feature - Import, that allows you to import payment data from images or screenshots.
Understanding how to use the app is key. The tips section provides users with helpful information and tips on using the app, and the new button allows users to quickly navigate to the specific tip they are interested in.
I use red and green indicators to clearly communicate the status of an account number. If the account number is correct, I display a green indicator. If the account number is incorrect, I display a red indicator. Blue line is for focus status.
The card number can be copied immediately. By flipping the card over, important information can be displayed.
High-fidelity prototype
My high-fidelity prototype was a highly detailed and accurate representation of the final product, allowing for thorough testing and user feedback.
View Banking app’s high-fidelity prototype
View Banking app’s high-fidelity prototype
Style guide
I have created a style guide for my mobile banking app that emphasizes a color palette of rich blues, airy whites, and pops of bright blue. Dark blue color conveys a sense of stability and trust to users. I have also added a touch of modernity and excitement with the light blue color. I believe these colors come together to create a visually appealing and user-friendly design that conveys professionalism and innovation in the world of finance.
Takeaways
Developing my mobile banking app was an eye-opening experience. One of the key lessons I learned was the importance of following Jakob's Law, which states that users prefer your site to work the way they expect. This was evident in the research phase, where I found that users had a strong preference for common UI elements and functionality that was consistent with other banking apps they had used. Overall, working on this mobile banking app project has taught me the significance of user-centered design principles in creating a seamless and satisfying user experience.