Transforming Ruleguard’s UX: Building the Dashboard
September 21, 2023
Heuristic Evaluation of the ARM Investment Center website
April 26, 2023Transforming Ruleguard’s UX: Building the Design System
My Role:
UI/UX Designer
Client:
Ruleguard (FKA AxiomHQ)
Project Duration:
Q3 2021
Project Scope:
Web application
Project Summary
Ruleguard is a web-based Regulatory-Technology SAAS product that enables financial institutions to streamline their regulatory and compliance processes and workflows. The London-based Start-up was at a stage of rapid growth and there was a strong need to transform its User Experience to meet up with clients’ and investors’ expectations.
As the sole UI & UX designer, I had the opportunity to fully champion and execute all aspects of the redesign of the User Experience of the Ruleguard platform, starting with building a robust design system from scratch in Figma as the foundation for the product’s Interface.
Project Overview
The project aimed to address the existing design challenges within Ruleguard’s interface such as; lack of consistency, scalability, the absence of a standardised design to development pipeline, and multiple accessibility issues. We also set out to improve the aesthetics and overall user experience while aligning with industry best practices.
The primary goal was to establish a comprehensive and scalable design system that would serve as a foundation for the product’s visual and interactive elements.
Research & Analysis
Extensive research was conducted to understand the needs of the clients & business stakeholders, and to seek avenues and opportunities for improvement.
Some of the research goals were to:
- Identify the pain points and challenges of the Compliance Managers, Risk Managers and Information Security Managers (who formed the core of our user base)
- Determine how the redesign could streamline workflows and enhance the efficiency of their operational tasks
- Explore how well the system could integrate with other tools or platforms commonly used by the users.
- Determine the learning curve for new and existing users transitioning to an updated interface.
Some of the research methodologies I employed were:
- Conducting one-on-one Interviews and Task analysis using Zoom.
- Distributing surveys via Typeforms to gain some quantitative data
- Card sorting to gain insights into Navigation
- Competitor analysis
- Prototyping and Usability testing using Figma
Design System Components
1. Colour scheme
A refined colour palette was developed based on user feedback and current brand identity considerations.
The palette included calming and Prussian blues to convey trust and security respectively, complemented by vibrant orange for highlights and accents.
I ensured the colour selection adhered to accessibility guidelines, ensuring optimal legibility and usability.
2. Typography
To enhance readability and professionalism I opted for the Inter San Serif Typeface. Inter was ideal because of its legibility, neutral design, variety and accessibility considerations.
3. Iconography
We also had to refresh the Icon system because the previous ones lacked consistency amongst other issues. I opted for Google Material Icons primarily because they follow a set of consistent guidelines that will help solve the problem of visual coherence in the product. Other reasons include; recognisability, familiarity and the presence of a rich diverse library.
4. Buttons and Form Inputs
The Buttons and Form inputs underwent a thorough design and testing process to optimise their usability, visual consistency and accessibility.
Button styles were standardised and distinguished by types including primary, secondary, and tertiary actions and variants were designed for all the states including icons, default, hover, pressed, loading, inactive and RAG statuses.
Form inputs were carefully crafted to provide clear labels, appropriate validation feedback, and consistent styling across all states and use cases.
5. Modals
The Modals were designed to provide contextual guidance and reduce cognitive overload for users. Keen attention was also given to each responsive breakpoint to ensure an optimal experience regardless of the user’s viewport.
6. Progress Indicators
The Progress Indicators were utilised to guide users through lengthy processes and manage expectations. They were also designed to cover a wide range of use cases and sizes.
7. Uploads
The Upload component aimed to provide a seamless file transfer experience for users who often times have to upload a wide range of data types across various screen sizes, offering clear feedback on the upload progress.
Developer Handoff
I organised a series of meetings with the Product and Development teams to discuss the design system’s components and guidelines while guiding them through the documentation.
To facilitate implementation, I connected the developers to Figma, granting them direct and easy access to code snippets and UI resources, making it easier for them to integrate the design system into their development workflow. Additionally, we set up a feedback loop where developers could report any issues or suggest improvements in real-time.
Key Learnings
Events throughout the course of the project reinforced the importance of Continuous improvement and Collaboration in the design process. Effective collaboration between the product and development teams was crucial to ensure whatever was being delivered had relevance to the product roadmap and was feasible with the technologies available at the time. Regular communication and feedback loops ensure that everyone is aligned and can address issues promptly.
Also, a design system is a living and breathing document, it is never truly finished. So we made room to ensure that It should be able to evolve with the scope of the product and changes to the user needs.
Furthermore, incorporating feedback from end-users was invaluable. It helped ensure that the design system truly met the needs and expectations of our specific target audience, leading to a better user experience for them.