Redesigned RDFox Console

With the release of RDFox v7.2, the console boasts a fresh new look and feel. We’ve revamped the colors, typography and iconography, together with an updated layout to lay the foundations for future console enhancements. Together, they deliver the benefit of a fresh modern user experience. Using the latest front-end development practices, in tandem with the enhanced usability of a streamlined interface, we’re thrilled about this new direction and believe you’ll love it too!  

Why update?

The RDFox console was originally designed with our friends at Fruto to offer a more user-friendly interaction with RDFox. It empowered users to create, manage, query and visualize their semantic data directly within the browser. Over time we've continuously added industry leading features like Explain (which provides an AI audit trail), giving users easy access to their knowledge.

We’re committed to ensuring that the full power of RDFox is readily available within the browser. Focused on delivering a robust, secure and seamless experience between RDFox and the console.  

With each new release of RDFox, the console expanded to accommodate new features within its original interface. Over time, the number of features grew to where accommodations were needed to offer the best-in-class experience to our users. Thus, with the release of RDFox v7.2 we've introduced an expanded visual language and developmental approach to facilitate the continued expansion of RDFox capabilities into the future. If you would like to try RDFox v7.2 for yourself, download it now or request a free trail here.

Evolving the console  

With this update, our goal was to enhance the console experience while being sensitive and considerate to our existing users, ensuring we didn’t break any existing workflows. Realizing that this update is a foundation stone, one of our aims was to create strong fundamentals.  

To achieve this, we meticulously audited all the existing screens and states within the console. Mapping out all the user journeys and listing every interface element to ensure they were captured and accounted for to maintain existing workflows.  

Simultaneously, we conducted a heuristic evaluation of the console to pinpoint any usability and accessibility issues. Supplemented with user feedback, this analysis identified the main areas for improvement. Those identified included enhancing the navigation, increasing accessibility, and feature discovery across the console. With this clear list of enhancements agreed, we could then begin work to address them.

Our approach

We took the approach to create a design system and then scaffold up its implementation across the console—this way we could address the main usability issues first. However, it did mean that we wouldn’t be able to update every interface element with this release. Therefore, the design system and its initial implementation would need to account for mixed visual styles. This presented a challenge whereby the design would be somewhat limited by the existing stylesheet as we wanted to be sure that we would have a somewhat consistent style for elements we weren’t able to update at this point.  

To help frame creating a design system some goals quickly emerged that were key areas to address. From a purely visual perspective we knew we needed to update the colors and typography to be more accessible and work harder at smaller sizes alongside the density of information that can be available within the console.  

We also wanted to create consistent, solid iconography to improve visual communication. These would need to be combined with the updated layouts to improve usability. To use the full power and flexibility of a design system, all these updated elements would need to be turned into front-end components to be used within the console.  

The design elements

Using Figma as our design tool of choice we got to work on updating the design styles to create the design tokens required for our design system.

For the color palette we decided to continue with a dark theme to maintain existing continuity, but with updated shades to improve accessibility that reference our Oxford heritage. Our typography has been updated to Archivo, to also improve accessibility. Being a grotesque sans serif, it provides the required legibility, while having a technical aesthetic to reflect the console as a technical tool. Combined with design tokens to set styles for corner radius, borders, spacing and elevations, the base styles were set before we moved onto the iconography.  

The console has unique concepts related to RDFox, and semantic data, meaning that there wouldn’t be any existing icon sets to meet those needs. We would need to create custom icons. They would need to work at small sizes and be bold enough to be read quickly and clearly to reflect the associated action. To accomplish this, we settled on a rounded outline style to create a custom console icon set that combines unique and established actions to meet our user requirements.

These styles were then used to create components for all the required elements identified from the interface audit and analysis. As part of this, we also identified that in addition to new icons we had an opportunity to add illustrations to communicate larger actions and add a touch of personality to the console experience—something we really enjoyed adding to the user experience.

Building the update

While the initial component design was done in Figma to work out states and usage, it also provided the prefect base and guide from which to update our front-end development processes. Using a combination of Vercel and Next.js, we create react-based components for all the required elements providing us with a reliable and secure front-end architecture. Combined with Storybook, we were able to align all components with their corresponding designs, ensuring all our stated goals of improving accessibility and usability were met at every stage of the update.

With the components in place, the next step was to update the console layout. The primary focus for this update was on adding the Nav bar and updating the data store header. These we called patterns within our design system. With patterns being large pieces of functionality that combine interface components. These patterns would be used to enhance the navigation, and feature discovery across the console while also improving our ability to add further functionality in the future. Due to how we built the design system, we made sure that it would also work alongside existing styles. Therefore, with the partial rollover of the design system with this release, each element feels part of a whole. Following some testing and adjustments to polish the whole experience we were ready to share these improvements.

Moving forward

With the updated navigation and refined visual approach, our next steps are to continue updating the visual interface elements and refining workflows to unify our new approach, along with further improving ease of use. Look out for those in upcoming releases.

As with all product design, our work is never finished. However, so far, the feedback has been overwhelmingly positive from users. If you have any feedback about this update, we’d love to hear from you. Please contact us with any thoughts.  

This is a huge leap forward for the console, aligning it with the latest front-end developments and visual design. We’re very proud of the team effort to make this update possible, and its release successful. We think you’ll love it as well.

If you’d like to try RDFox v7.2 for yourself, download it now or request a free trial here.  

See the documentation for the full v7.2 release notes and the migration guide for information on how to upgrade from an older version of RDFox.