Redesigning the PayDay Investor App Experience
November 2, 2020Transforming Ruleguard’s UX: Building the Design System
My Role:
Product 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.
My Role
As the lead designer on this project, 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 in Figma as the foundation for the product’s Interface. I was responsible for:
- Developing the design system vision and strategy
- Collaborating with stakeholders to define design principles and guidelines
- Designing and testing reusable components library and assets
- Ensuring consistency and efficiency across products and services
- Version control, governance and documentation
Project Overview
The project aimed to address the existing design challenges within Ruleguard’s interface such as;
- Lack of consistency in visual design and interaction patterns
- Limited scalability, making it difficult to add new features
- Absence of a standardized design-to-development pipeline
- Multiple accessibility issues, hindering user experience
- Aesthetics and overall user experience not meeting 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. Ultimately, improving the aesthetics and overall user experience while aligning with industry best practices.
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 simplify 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.
To understand client and business stakeholder needs, the following research methodologies were employed:
- One-on-one interviews with Compliance Managers, Risk Managers, and Information Security Managers to identify pain points, challenges, and opportunities for improvement.
- Task analysis to observe users performing tasks and understand workflows, inefficiencies, and areas for enhancement.
- Surveys to gather quantitative data and validate research findings.
- Card sorting exercises to gain insights into navigation and information architecture.
- Competitor analysis to identify best practices and areas for differentiation.
- Prototyping and usability testing to validate design decisions and identify areas for improvement
Accessibility and WCAG Compliance
To ensure that the design system was inclusive and accessible to all users, I followed the Web Content Accessibility Guidelines (WCAG 2.1) established by the World Wide Web Consortium (W3C).
The goal was to achieve Level AA compliance, which provides a high level of accessibility for users with impairments and disabilities.
Working closely with development team, the design system prioritized accessibility through various features, including semantic HTML, high contrast colors, clear typography, accessible iconography, keyboard shortcuts & navigation, responsive design, ARIA attributes, error handling and feedback, and regular accessibility testing and validation.
This ethos was baked into the core of the design system, ensuring inclusivity and accessibility to a wide range of users, providing a solid foundation for building applications and services that meet WCAG 2.1 Level AA standards.
Design System Components
1. Color scheme
A refined color palette was developed based on user feedback and current brand identity considerations.
The palette included calming and Prussian blues to convey the right emotions, trust and security respectively, complemented by vibrant orange for highlights and accents.
I ensured the color selection adhered to accessibility guidelines, ensuring optimal legibility and usability.
Considerations were also made to create balance for similar color tones such as Reds and Greens, indicating their semantics and use cases in the naming convention, description and documentation.
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; recognizability, familiarity and the presence of a rich diverse library.
The icons were also tested with users along with other alternatives to ensure they were right for the specific context.
Documentation the icon names, along with related search terms in the description was essential to improve usability and findability for other designers and the development team.
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, also ensuring progress indicators were accessible and provided alternative text for screen readers.
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 view ports and screen sizes, ensuring clear feedback on upload progress, file validation, and error handling.
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.