A B2B web-based user interface designed to assist financial institutions and businesses in assessing, calculating, and managing credit risk.
Client:
CIF
My Role:
UX/UI Designer
Year:
2022
Service Provided:
UI Design, Web App Design, Redesign
The Challenge
As CIF Suite is a data-heavy interface, which involves working with large amounts of data and complex data visualizations, my team and I had to ensure that our designs presents this data in a way that is clear, understandable, and actionable. This meant designing complex charts, graphs, and dashboards that are easy to navigate and interpret.
Process
Information architecture redesign - CIF Suite 2.0 design was based on a new Information Architecture that my team created along with the CIF Suite Data team. The goal was to have a clear structure of the product that is presented in a logical and intuitive way, so that everyone could easily find what they are looking for. This helped us have a clear overview of the complexity of the product we were trying to improve.
Wireframes - After defining the new information architecture we moved to the next step, which was visualising the IA through wireframes. It allowed us to see the previously defined information in a more tangible way and make necessary adjustments. Or main focus here was on functionality and usability of the product.
Design system (MUI) - For our final designs we used Material UI, a comprehensive library of components that features implementation of Google's Material Design system. I was in charge of identifying the necessary components from that library and adapting them to the needs of our product. For the dashboard visuals I used Recharts, a charting library built on React components that developers could implement easily and efficiently.
Hi-fi designs - With the design system in place, we jumped straight to designing high-fidelity screens which would represent the final look of CIF Suite 2.0. This is where we continuously collaborated with developers to make sure that the final designs are implemented correctly.
Outcome
Unfortunately, this project was unexpectedly cancelled during final stages of our design process. This news hit hard, as my team and I were really invested in this project and wanted to see it go live. Even though the outcome was not the one we were expecting, I learned a lot throughout this process. This was my first B2B project, which I feel like required a more efficient and streamlined experience when compared to other B2C projects I’ve worked on. Also, by working with stakeholders and developers, I got to learn more about different approaches of solving complex business problems.
Next Steps (if project was to continue)
Incorporate illustrations/animations into the design system.
Test the high-fidelity designs with our users and iterate where necessary.
Continue doing design reviews with developers to make sure the design is being implemented as intended.
Measure the KPIs of the final product after it’s been released.