Redesigning a national bank's complicated, data-heavy dashboard into a streamlined, modern one.
Duration:
3 months
Industry:
Banking
Platforms:
Web
Areas:
Research, UX, UI, Testing
Background
A national bank did not have any visibility of the status of their servers and other infrastructure assets.
Because of this, their tech support team received a high volume of questions regarding the status of their systems.
They had began to create a self-service dashboard for users to obtain this information, but it was almost impossible to navigate and understand.
Problem Statement
How might we redesign the bank’s dashboard so that it is easy to navigate and clearly shows the status of its infrastructure at a quick glance?
Conducting Market Research
To start the process off, I began by conducting market research on best practices when it came to dashboard design, as well as what leading companies were doing. I was able to find examples from technology and financial services companies that helped provide me with design inspiration.
Assessing the Current State
Since the client had already began developing a dashboard, they needed me to quickly get up to speed and provide some tactical recommendations for their developers to implement.
I decided that the best way to do this was to conduct a UX heuristic analysis to identify any major usability/accessibility issues and provide recommendations on how to improve them.
Throughout this exercise, I identified 23 usability issues and recommendations to improve upon them.
Key Issues
Accessibility: There were many accessibility issues, primarily that the majority of the tool was difficult to read due to low text contrast.
Consistency: There were many inconsistencies when it came to font, colors, layout, icons, etc. It was clear that no design system was used.
Data Design: Many of the charts and graphs lacked key elements to facilitate interpretation, such as legends, labels, or using the appropriate chart type to convey data.
Recommendations
Remediate accessibility issues by using appropriate color contrast and adding labels next to icons to increase clarity.
Create and leverage a design system to ensure a consistent experience across the application.
Incorporate data design best practices, such as adding labels and using appropriate graph types for certain data (e.g., use a line graph to represent data over time).
Applying Improvements from Heuristic Analysis
After presenting my findings to the client, they agreed with the recommendations and wanted to apply them. I went ahead and improved the quick fixes, including creating a small design system for the application.
I recommended that we should proceed to conduct usability tests to validate whether the designs were easy to use or if there were any other improvements that could be made. The client agreed, so I proceeded to create a testing plan.
Usability Testing
I then proceeded to write a testing script and administer the usability tests.
Number of participants: 5
Moderated usability tests
Key Questions:
Is the redesigned tool easy to navigate?
Are users able to interpret the data visualizations?
Is there anything missing that would make this tool more useful to users?
High-Fidelity Wireframing
I then incorporated the results of the usability test into the finalized wireframes.
Outcomes
Finalized high-fidelity designs.
Provided development specification for clarity.
Included a comparison page to show the before and after screens to developer.
Participated in daily standups to address developer questions throughout the development process.
Provided design QA feedback to developers.
Lessons Learned & Next Steps
Had to quickly get up to speed and provide tactical UX recommendations since the developers had already started the development process.
Since developers could not implement every single one of my recommendations at once, had to prioritize the design enhancements based on impact.
More usability testing could be conducted to identify additional improvements after iterating on the latest designs.
