Regulatory Library Redesign: Enhancing UI/UX and Underlying Technology to Bring Regulatory Library Into the 21st century

Regulatory Library (formerly known as gComply) is a web app that provides users with access to a variety of regulatory documents and information to help companies follow and incorporate regulatory compliance into their products. However, the existing UI and experience was outdated, and the app’s underlying technology didn’t fully support modern web development standards. We took on the challenge of redesigning the app to update its UI and overall improve the user journey, migrate it to the Angular framework, and introduce handy table and spreadsheet features using Kendo UI. Despite having limited resources, we applied "guerrilla research" methods to gather valuable insights from our users and refine our designs.

Challenge

The existing Regulatory Library website had several pain points that needed to be addressed:

  • Outdated User Interface and User flow: The app’s design was cluttered and difficult to navigate, leading to a frustrating user experience.

  • Lack of Modern Technology: The underlying technology was outdated, making it difficult to maintain and scale.

  • Complex Data Management: The app was table-intensive, with many large datasets that required better handling for users to efficiently navigate and manage them.

  • Limited Research and Resources: We faced constraints in terms of both funding and bandwidth, meaning we had to work within a limited scope for user research and testing.

Our goals were clear:

  1. Update the User Interface and User flow: Make the app more user-friendly and visually appealing.

  2. Migrate to Angular: Leverage the benefits of Angular for improved performance, maintainability, and scalability.

  3. Implement Kendo UI: Use Kendo UI to create powerful, flexible tables and spreadsheet features that could handle the large datasets efficiently.

Process

Guerrilla Research: Understanding User Needs

Due to budget constraints, we couldn’t conduct traditional in-depth user research. Instead, we used guerrilla research methods to gather valuable insights quickly:

  • Client Surveys: We surveyed a variety of our clients to understand how they used the Regulatory Library, what features were most important to them, and what pain points they encountered as daily users of the app.

  • Quick Interviews: We held informal, short interviews with a small sample of users to dive deeper into their challenges and preferences.

The feedback we gathered revealed a few key issues:

  • Navigating Large Tables: Users struggled with the complexity of the app’s data-heavy tables, which made finding and sorting information difficult.

  • UI Confusion: The interface was outdated and not intuitive, especially for new users.

  • Performance Issues: Users experienced slow performance when working with large datasets.

Prototyping and Design Iteration

Based on the insights from our guerrilla research, we moved quickly into creating high-fidelity mockups and prototypes. These were designed with the goal of simplifying the user interface and improving the data management experience:

  • Simplified Navigation: We streamlined the interface, reducing clutter and reorganizing content into a more logical structure.

  • Kendo UI Integration: To address the issues with large data tables, we integrated Kendo UI, which allowed us to implement features like sorting, filtering, paging, and inline editing, making it easier for users to interact with the data.

  • Modernized UI: We updated the visual design to be cleaner and more intuitive, while aligning it with current design standards for web apps.

We then tested these mockups with the same clients who had provided feedback in the surveys. Their feedback helped us make key iterations:

  • Improved Table Features: We made adjustments to the Kendo UI tables based on client input, ensuring they had the flexibility and functionality needed to work with large datasets.

  • Refinement of User Flow: We tweaked the user flow to make interactions more intuitive and responsive, addressing pain points related to navigation and task completion.

Impact

The redesign of the Regulatory Library led to several significant improvements:

  • Improved Usability: The updated interface was more intuitive, allowing users to quickly find and interact with the regulatory information they needed.

  • Enhanced Performance: The Angular framework and Kendo UI integration provided a noticeable performance boost, especially with large datasets, resulting in faster load times and smoother user interactions.

  • Positive User Feedback: Clients who tested the redesigned app appreciated the improvements in table functionality, ease of navigation, and overall user experience.

  • Streamlined Workflow: The new design helped users accomplish tasks faster, improving productivity and satisfaction.

Takeaways

  • Guerrilla Research Can Yield Valuable Insights: Even with limited resources, quick surveys and informal interviews can provide meaningful data to guide design decisions.

  • React and Kendo UI are Powerful Tools: Migrating to Angular provided performance gains and scalability, while Kendo UI’s robust table features made data management much easier for users.

  • Iterative Testing is Key: Rapid prototyping and testing with real users ensured that the redesign addressed pain points and met client needs.

By redesigning the Regulatory Library and updating its underlying technology, we successfully created a more modern, efficient, and user-friendly web app that provided a better experience for our clients—helping them navigate complex regulatory data with ease.

Figma Designs

The below Figma embed is a walkthrough of all the different screens in Regulatory Library. The screens were designed mobile first, however the app was only developed for larger screens (tablet and desktop).