Skip to main content

Cambrion

Redesigning an AI-Driven Document Processing Interface: Creating a Visual Symphony Between Schema and Source Material

· By Dimitri Reifschneider · 6 min read

Company

The startup offers tailored solutions that transform how organisations handle data, documents, and digital workflows. From intelligent document processing and automation, to making unstructured data usable at scale. Users can create pipelines to process documents and extract information from unstructured data with full control over the results. The company offers an API interface for developers but also an interface to manage extractions, pipelines and preferences.

Work

Starting off from an existing application the challenge was clear from the start: I needed to translate the current capabilities from the API to an usable interface that would allow users to effectively test and refine their document processing pipelines. The interface had to support various user needs including data visualisation, document previewing, and real-time schema adjustments.

When I embarked on this project, I inherited an existing application with functional but rudimentary design elements. Our challenge was to transform this foundation into something extraordinary – a sophisticated interface where users could intuitively adapt schemas while developing a profound sense of trust with the AI-powered system.

The redesign demanded a delicate balance between technological capability and human-centered design principles. I prioritised maintaining existing functionality while rapidly iterating on key components. The library shadcn proved invaluable, allowing me to visualise progress quickly by leveraging an established UI library commonly used in SaaS applications. By focussing on intuitive schema adaptations, we aimed to demystify the AI processes happening behind the scenes, allowing users to confidently modify data structures while maintaining visual connection to their original documents.

Initial user interface showing a wizard on the detail page guiding through the steps

The image illustrates the initial interface. In the first step, users upload documents and provide instructions. The model then calculates extraction fields that can be modified in the subsequent step. The system can differentiate between simple fields and hierarchical structures. Transparency is essential—users must understand the background processes at all times. The interface also needed to support model and result testing. However, testing functionality was hidden in this UI and lacked adequate space for displaying results. Another issue was that users weren't clearly informed that schemas required saving before execution.

Early version of the UI including extraction results

In the early version shown above, users could see extraction results and model configuration options on the right side panel, but the interface suffered from poor information architecture and unclear visual hierarchy. The extraction fields were presented in a technical format that made it difficult for users to understand what data was being captured or how to modify the extraction parameters. Critical functionality like testing and result validation was buried within the interface, creating confusion about the system's capabilities. This cluttered presentation highlighted the need for a more intuitive design approach that would better communicate the AI extraction process to users.

Cambrion's document upload interface, which is the first step in their AI-powered extraction pipeline creation process

The clean, modern interface features a split-screen layout with a document preview panel on the left and a configuration area on the right. Users can upload their documents and provide specific instructions about what information they want extracted. The UI includes clear guidance reducing the creation to only one step instead of a two-step wizard.

Once documents are uploaded and instructions provided, Cambrion's AI model analyses the documents and automatically creates an initial extraction schema with suggested fields. This creates a starting point that users can refine in the next step.

In the background, a list of previously created pipelines is visible, allowing users to access and manage their existing document processing workflows. This dashboard-style view helps users keep track of all their extraction projects in one place. The interface exemplifies Cambrion's focus on making complex AI document processing accessible through intuitive design, with clear visual hierarchy guiding users through what could otherwise be a technically challenging process.

The split-screen layout provides an intuitive workflow where users can view their document processing results in real-time

On the left side, users can see the extracted data presented in a structured format alongside the original document for immediate verification. The right panel features the schema editor where users can modify extraction parameters, add or remove fields, change the order by drag-and-drop and fine-tune the AI's understanding of document structure.

The interface enables users to make schema adjustments while simultaneously viewing how those changes affect extraction results. This real-time feedback loop is crucial for optimising document processing accuracy. Users can quickly identify where extraction may be failing, adjust parameters accordingly, and immediately validate the improvements. The design maintains a clear visual connection between the source document and the structured data being extracted, which helps users understand and trust the AI's processing capabilities.

Key features visible in this view include field configuration options, extraction confidence indicators, and the ability to navigate between different sections of complex documents. The clean, organised layout helps users manage what could otherwise be an overwhelming amount of technical information, making sophisticated AI document processing accessible to users with varying levels of technical expertise.

This presentation helps users validate that complex nested information has been correctly identified and organised

The hierarchical tables clearly distinguish between parent and child data elements, showing how the AI has interpreted the document's structure based on the configured schema. Each extracted field is displayed with its corresponding value from the document, maintaining the relationships between different data points.

Learning

Throughout this project, I learned that building trust is fundamental when designing AI-powered interfaces. Users need to clearly understand what's happening at each step, especially when AI is making decisions on their behalf. The visual connection between original documents and extracted data proved crucial for establishing this trust.

I also discovered the importance of balancing rapid delivery with maintaining quality. By leveraging existing UI libraries like shadcn, we could quickly iterate on designs while ensuring a professional aesthetic. This allowed us to focus our energy on the core functionality and user experience rather than building UI components from scratch.

The step-by-step approach to development proved valuable, addressing the most critical user needs first before expanding functionality. Starting with the essential document upload and basic extraction capabilities gave users immediate value while allowing us to gather feedback for subsequent iterations on more complex features like schema editing and result visualisation.

Transparency in design decisions was another key learning - users needed to understand not just what the system was doing, but why, particularly when AI extraction results didn't match expectations. This informed our approach to error states and confidence indicators throughout the interface.

Result

The redesigned interface represents a significant leap forward in usability and visual coherence. By prioritising transparency and user understanding, the new UI builds trust between users and the AI-powered system. The clean, modern aesthetic combines with thoughtful information architecture to create a workspace where complex AI operations become intuitive and accessible.

Users can now clearly trace the connection between their original documents and the structured data being extracted, thanks to the improved side-by-side visualisation. The schema configuration area has been completely reimagined with a focus on clarity and control, allowing users to confidently modify extraction parameters while immediately seeing the impact of their changes.

The new design addresses previous pain points by bringing critical functionality to the forefront, particularly around testing and result validation. Clear visual hierarchy guides users through the document processing workflow, while thoughtful micro-interactions provide feedback at each step. Status indicators and confidence metrics are now prominently displayed, helping users understand the AI's decision-making process.

Perhaps most importantly, the redesigned interface succeeds in demystifying complex AI operations. Users no longer feel like they're interacting with a "black box" – instead, they can see and understand how the system processes their documents, building the confidence needed to integrate Cambrion's powerful capabilities into their daily workflows.

About the author

Dimitri Reifschneider Dimitri Reifschneider
Updated on Sep 29, 2025