Isora – governance, risk, and compliance assessment platform

The development phase of Isora GRC was driven by precision, collaboration, and scalability. From dissecting outdated API documentation to building a fully interactive Storybook and crafting an accessible, high-performance frontend, every step focused on ensuring the product’s reliability and longevity.

By integrating Vite, React, and Radix Primitives, we ensured seamless, accessible interfaces, while tools like Recharts brought complex data to life through interactive visualizations. Challenges, such as backend limitations and design adjustments, were met with flexibility and creative problem-solving, ensuring the final product aligned with both technical constraints and design intent.

This comprehensive approach not only delivered a polished product but also set the foundation for rapid scaling and future feature development.

APIs & back-end analysis

At the start of development, one of the primary challenges was dealing with outdated and incomplete API documentation. The existing Redoc documentation was unreliable, as the client lacked the resources to update or maintain it. This meant our developers couldn’t rely solely on the available documentation and had to manually inspect API endpoints to fully understand the system’s behavior and dependencies.

The project’s business logic was intricate, with complex relationships between different API services. This required deep exploration and hands-on testing to accurately map out how the various services interacted. A clear understanding of these interdependencies was essential for building robust frontend components and ensuring that new features, such as the questionnaire builder, integrated smoothly with the existing backend architecture.

Building the Storybook

To streamline development and maintain consistency, we chose to implement Storybook specifically for shared and ordinary components. Shared components included small, reusable UI elements like buttons, icons, and selects, while ordinary components encompassed larger structures built from these smaller pieces, such as headers and footers.

This approach allowed us to create a comprehensive library of interactive, fully testable components with various states, ensuring that each piece of the interface could be previewed and refined independently. While building Storybook required an upfront investment of time, it proved invaluable for the long-term health of the project by enhancing maintainability and accelerating future feature development.

Occasionally, discrepancies emerged between the design in Figma and the actual implementation in Storybook, but this process helped us catch and resolve issues early. The result was a synchronized design and development environment, ensuring that the final product closely aligned with the original design vision.

Front-end development

Frontend development progressed in parallel with the creation of Storybook, ensuring that component design and implementation stayed closely aligned. Our focus extended beyond visual accuracy—we prioritized accessibility (a11y), performance, and overall code quality from the outset.

To maintain high standards, we established a robust development pipeline, integrating linters and CI/CD workflows to catch errors early and streamline deployments. The frontend was built using Vite for its speed and lightweight bundling, while React served as the core library, providing the flexibility needed to handle the project’s complexity. For accessible, customizable components, we relied on Radix Primitives, which ensured that all UI elements met accessibility standards by default.

The project’s design presented unique challenges that required creative solutions. In certain cases, backend limitations forced us to slightly adjust the design during development. These adaptations were handled through brainstorming sessions with the design team, allowing us to preserve the overall intent while ensuring feasibility within the existing backend constraints.

Recharts integration

Throughout the project, we leveraged several third-party libraries to enhance functionality and streamline development. Among them, Recharts stood out as one of the most impactful tools.

Recharts is a powerful charting library designed specifically for React applications. Its extensive collection of pre-built chart types, coupled with the flexibility to create custom solutions, made it an ideal fit for visualizing complex data within Isora GRC. By integrating Recharts, we provided users with clear, interactive data representations that seamlessly aligned with the product’s overall design and functionality.

The adaptability of Recharts allowed us to handle diverse charting needs without compromising performance or accessibility, reinforcing the platform’s analytical capabilities and delivering valuable insights to users in a visually engaging format.

The redesign of Isora GRC not only transformed the product but also gained recognition on a global stage. The project was submitted to the prestigious UX Design Awards, where it secured a nomination, highlighting its excellence in user experience design. This acknowledgment from industry experts validated the product’s improved usability and accessibility, positioning it as a benchmark within the professional community.

The recognition further solidified Isora GRC’s reputation as an innovative and user-focused solution in the competitive GRC space, paving the way for sustained growth and engagement.