Risika Dashboard

UI Design, Design Systems
What is it?
The Risika dashboard is a versatile digital platform that empowers businesses with comprehensive tools and insights for managing financial risk and credit-related decisions.

It provides essential features such as credit ratings, real-time monitoring of companies, recommendations and sales enablement through advanced data models and machine learning. This multifaceted dashboard equips finance and sales teams to make informed decisions, assess financial risks, and leverage data-driven models to enhance overall business performance.
What was my role?
I joined Risika as their first in-house designer and took on several key responsibilities. My journey began by creating a foundational design library through reverse engineering, documenting the existing design elements. I then focused on theming and enhancing UI components, both existing ones and custom-designed elements. This work aimed to unify the user interface and set a consistent design system for the product.

In addition to design work, I played a role in initiating and fostering collaboration between design and front-end development. This dialogue laid the groundwork for improved teamwork and potential future integrations, enhancing overall efficiency within the team.
The Problem

When I joined Risika, I encountered a fully functional product that, despite its capabilities, faced some user interface and user experience challenges. Prior to my arrival, the platform had operated without an in-house designer, which had led to certain issues, especially concerning the utilisation of the Material-UI (MUI) framework. One noteworthy challenge was the inconsistent use of components for similar functionalities across different pages.

Another issue I observed was the multitude of text styles and colours employed across various sections of the platform. Rather than adhering to a consistent and well-defined set of design principles, the platform exhibited a mishmash of visual elements. This not only hindered readability but also created a sense of disconnectedness between different parts of the platform. What's more, these UI issues had tangible impacts on usability and accessibility, which called for immediate attention.
Key Pain Points

Inconsistent UI components
The platform lacked standardised UI components, resulting in varying user experiences and functionalities across different sections.

Inconsistent text styles
Numerous text styles were in use, deviating from a unified set of guidelines and impairing overall coherence.

Inconsistent colours
A wide range of colours was employed, exacerbating the platform's visual identity fragmentation and causing confusion among users.

Visual bugs and other issues
Visual bugs and unresolved issues further compounded the user experience, introducing friction and frustration into the product.

Lack of a design library
There wasn't a design library in place to serve as a source of truth, leading to inconsistencies and challenges in maintaining a cohesive interface.
Approaches and Challenges

1. From the ground up: Designing and building our own design system from scratch

2. Moving to a new library: Finding another React framework like Chakra UI, Bootstrap, Tailwind

3. Sticking with Material UI: Keeping on using Google’s React component library but in a more efficient and streamlined way

Ultimately, the decision on which approach to pursue was the result of extensive negotiations led by me, involving discussions with the Head of Product and front-end developers. Considering the business priorities and available resources, we opted to harness theming within Material UI to significantly enhance and standardise the platform's interface. This decision struck a balance between efficiency, customisation, and alignment with the current project landscape.
Work lane #1: Foundations

In this work-stream, I embarked on the foundational task of creating a design library that mirrored the current live platform, exactly as it was. This reverse design/engineering process provided a clear picture of both the strengths and weaknesses of the existing design. While it was somewhat frustrating to recreate the issues, it was an essential step. This library encompassed stylesguides, components and pages. I named this library Risika DS v1.0, signifying its role as the initial version of a comprehensive design system.
Work lane #2: Theming

Within this work-stream, I focused on establishing a limited set of style guides and rules, which I then applied to the existing components and pages. Although it might appear as mere retouching, it led to significant improvements in several components. In addition, I streamlined minor UI aspects, such as spacings, alignments, and labels, to achieve quick wins and enhance the overall user experience.

While creating this 'single source of truth' for design on Figma, I meticulously implemented Auto-Layout properties on the components and pages, to increase design velocity when editing or creating designs. I established detailed but easy-to-use component variant structures to speed up design and development processes.

This work laid a foundational basis and set the stage for more substantial enhancements and streamlined development. It played a pivotal role in standardising components by eliminating redundant elements for the same functionalities. I designated this phase as Risika DS v1.1.
Work lane #3: Custom Components

In this work lane, I had the opportunity to create custom components entirely from scratch. This approach provided the flexibility to implement best practices, particularly when the default Material-UI components fell short, and theming alone couldn't suffice.

These custom components were not only used in the Credit Automator project but also seamlessly integrated into the broader product, such as the Advanced Credit Policy feature, which we concurrently developed. This step marked a significant stride towards our proprietary design system, and the theme was inherently applied to these custom components, making them an integral part of Risika DS v1.1.
I created a detailed audit spreadsheet to keep track of our progress and document the components and pages within the design libraries. This practical document allowed me to identify what had undergone theming, what was custom-built, and what needed removal. Additionally, the audit supported the other designer's work and contributed to a smoother handover process.
The Outcome
The establishment of a comprehensive and consistent design library yielded substantial benefits:

Enhanced design velocity
The design team's productivity surged, with design velocity doubling when crafting new features and user journeys.

Visual consistency
The library fostered visual consistency across various user journeys, products, and communication channels.

Shared language
It introduced a shared language among cross-functional teams, effectively preventing miscommunications between designers and developers.

Initiated collaboration
The library sparked the beginnings of regular collaboration between design and front-end development. It laid the groundwork for the potential integration of tools like Storybook in the future.

Improved scalability
The library provided a scalable foundation for design assets and patterns, accommodating the platform's growth seamlessly.

Resource allocation
The initiative freed up design resources, allowing designers redirect their focus towards addressing more complex design challenges and innovation.

Onboarding efficiency
The streamlined library expedited onboarding for new team members, enabling them to quickly integrate into the design and development processes

Efficient bug fixing
Addressing and rectifying bugs became more efficient and precise, contributing to a smoother user experience.

Enhanced UX and customer satisfaction
The resulting design improvements directly translated into an enhanced user experience, leading to higher levels of customer satisfaction.

In summary, the creation of a comprehensive and consistent design library delivered a multitude of benefits, ranging from improved efficiency and collaboration to heightened customer satisfaction and enhanced scalability. These results underscore the critical role that a unified design system plays in the success of a digital product.