MeopBank
BANK DASHBOARD REDESIGN
I am leading a project to improve and optimize an existing web application dashboard designed for banking experiences. The initial design was created by a UX designer, and my role is to refine and enhance the overall user experience.
Why Redesign? 🤔
The current design presents opportunities for improvement in terms of visual aesthetics, information presentation, accessibility, and user-centricity. Below are key areas where enhancements can be made to elevate the overall user experience:
Visual Aesthetics: The current design does not meet the desired level of visual perfection. Aesthetic improvements should be considered to create a more visually appealing and engaging user interface.
Information Presentation: Information is currently not optimally displayed within the design. Enhancements are needed to ensure that information is presented in a clear, organized, and user-friendly manner, making it easier for users to digest and interact with the content.
Accessibility: The existing design falls short in terms of accessibility. It's imperative to make accessibility a top priority, adhering to best practices and standards to ensure that all users, including those with disabilities, can seamlessly access and navigate the platform.
User-Centric Approach: The current design lacks consistency in information presentation. A user-centric approach should be adopted to ensure that all content and messaging are aligned with user expectations, needs, and preferences.
Problems 🐞
From a user's perspective, we can observe that users cannot obtain the required information accurately. The design lacks proper color balance, resulting in a subpar user experience and accessibility issues from a visual standpoint.
Let's start with colour 🎨
The current design features an improper and unbalanced use of colour palettes, resulting in visual chaos. In addition, it has created a confusing and cluttered visual experience for users, which may lead to a lack of engagement and difficulty navigating the platform. Therefore, revising the colour palettes and implementing a balanced colour scheme will improve the overall design and user experience.
Colour fixed with 60 - 30 - 10 rules -
I have followed the 60-30-10 rule for applying colours in my redesign, which has led to a significant improvement in the visual hierarchy of the platform. This rule provides a balanced and harmonious approach to colour usage, resulting in a more aesthetically pleasing and user-friendly design. Furthermore, by adhering to this rule, I have created a better sense of visual organization and hierarchy, making it easier for users to navigate the platform and enhancing their overall experience.
Layout inconsistently -
In addition to the colour issues, it is evident that the content cards lack consistency in colour style. There are inconsistencies in the alignment and size of elements between the cards, and some areas with empty spaces have been left unattended. These factors lead to a further decline in the visual hierarchy and negatively affect the interface's overall perception. Therefore, it is recommended to ensure that the content cards adhere to a consistent colour style and that the alignment and sizing of elements are uniform across all cards. It will create a more cohesive and organized design, improving the overall user experience.
Remove layout inconsistently -
In response to these issues, my next steps involve unifying the style of the content cards and arranging any unnecessary empty spaces. That will help to create a more cohesive and organized design, improving the overall user experience. By ensuring that the elements within each content card are consistent in size and alignment, users can navigate the platform more easily, leading to increased engagement and satisfaction. Additionally, arranging empty spaces will help improve the visual hierarchy, further enhancing the overall perception of the interface.
Split view -
Let's split the view to focus on the details more effectively.
Let's focus on navigation -
Next, I shifted my focus towards the main navigation bar. Upon inspection, I noticed inconsistencies in the spacing and alignment of the menu items. Additionally, the active tab's font size was larger than the other items, causing further visual disruption.
While it can be beneficial to highlight the active state, this design choice can increase visual chaos, particularly when combined with other issues, such as misaligned menu items. Furthermore, we need to address the colour contrast of the inactive tabs, as this can impact accessibility for users.
By making these necessary changes, we can improve the overall design and create a more streamlined and accessible user experience for all users.
Making navigation more useful -
Following the alignment and contrast corrections, I modified the service logo's size and weight to complement the other design changes better. By ensuring that all elements are harmoniously integrated, we can create a more cohesive and visually appealing interface.
In addition, by paying attention to even the smallest details, we can significantly improve the overall design and enhance the user experience.
Let's make the card layout more useful -
After addressing the issues with the main navigation, my attention turned to the large black element referencing "accounts and cards." However, upon closer inspection, it became apparent that this element has little to do with these features.
This design flaw could lead to confusion and frustration among users, which we want to avoid. Therefore, I set out to revamp this element and create a more meaningful and relevant design.
After making the card layout more useful -
Once I understood the purpose of the "accounts and cards" section, I decided to populate it with images of actual cards and information that someone might expect to find within a banking app.
I also applied a unified colour palette and style to the content cards to ensure consistency. These changes resulted in a more cohesive and user-friendly design for the section.
Try to emphasize how it may work in real life -
The cards located below the big black element represent stocks. However, they also needed to be more consistent in design and functionality.
To improve their usability, I ensured that the user's portfolio data would populate these cards and provide quick actions for the user.
Additionally, I included the ability for the user to customize their dashboard contents through the app's settings.
Consider the context in which your design will be used and how it will function in the real world. This approach will assist you in filling your designs with genuine content and avoiding an artificial appearance.
Improving minor details -
Regarding minor details, it's important to consider how numbers should be represented in different currencies. For example, some currencies have specific formatting rules that must be followed.
In this case, it's important to note that there should be no space between the currency symbol and the value, and commas and dots should be used appropriately. I made sure to incorporate these details in my redesign.
Improving the next part of the design -
Let's move on to the next section of the design. Once again, I prioritized consistency in the style of content cards and ensured proper alignment of elements within them.
Removing unnecessary white space -
In addition to unifying the style of content cards and aligning the elements inside them, I also adjusted the colours and sizes of the elements, resulting in a more user-friendly experience. For example, the left design has significant unnecessary white space. Still, with these changes, I could introduce two additional elements on the basic view of the list, along with a summary of monthly transactions at the bottom. These updates made the section much more helpful for potential users.
I got a chance to add more information -
As part of the design, I had ample space, which allowed me to display more information to the users.
Learning -
In design, minor details can enhance the user experience and make the design more modern and valuable.
THANK YOU