Document Viewer: Redesigning the user interaction with documents and data at Foods Connected
My role
User research, prototyping, UI design, Product design, Redesign
Results
50% reduction in task time and 93% less tab switching
Increased user satisfaction
Foods Connected’s specification and document management system was creating significant friction in daily workflows. Users, ranging from suppliers to internal specification reviewers, were forced to navigate through multiple disconnected tabs and pages to complete routine tasks. The core issue was the “open in a new tab” workflow that separated critical information across different pages, forcing users to constantly switch contexts and lose their place
The existing system lacked cohesion, consistency, and crucial context during critical moments of the specification editing, consulting and approval process. Every time users needed to reference related information, view update requests, or access specification data, they had to navigate away from their current task breaking concentration and increasing cognitive load.
Understanding the Problem
The data revealed a clear pattern: users spent 40% of their time navigating between tabs rather than completing their actual work. The tab-based architecture created artificial boundaries between related information, forcing users to maintain mental models of information spread across multiple pages.
Suppliers editing specifications couldn’t see update requests simultaneously. The Updates History was only visible in view mode at the bottom of the page and was not accessible in the editing mode. Users had to switch between the “View” tab and “Edit” tab repeatedly, alternating between reading what was requested and making the actual changes. This constant context switching led to errors and frustration.
I proposed replacing the legacy tab-based system with a persistent drawer interface that provides contextual access to information without disrupting the user’s workflow.
To be sure we’re addressing the right problems we designed our process around regular cycles of prototyping and face to face user sessions, validating every step of the way with the input from with our internal support team and end real users. Our starting point was a simple drawer with the basic related information as a sidebar.
This quickly evolved into a new architecture which included a left sidebar with table of contents, a main drawer body viewer in the centre and a right sidebar with the document’s contextual information
This single-page architecture means users never lose context. The table of contents provides quick navigation within long specifications, while the sidebar keeps all supporting information immediately accessible.
The sidebar eliminates the need for separate tabs for metadata, history, actions, and related content by intelligently surfacing what’s relevant when it’s relevant.
The table of contents sidebar with jump links to major sections was introduced to tackle the challenge of lengthy specifications, giving users a persistent, quick view of the document structure and the ability to jump directly to any section without excessive scrolling.
Users would read an update request in the sidebar, make the change in the main view, then check it off in the sidebar before moving to the next request. The workflow became linear instead of fragmented.
We also observed that users loved the “active section” highlighting that showed where they were as they scrolled. The table of contents provided orientation that tabs never could.
Having gone through a series of iterations we landed on two collapsible sidebars to allow users hide the side information and focus on the main document
This project reinforced the importance of systematic research in validating design decisions. By establishing clear success criteria, measuring against baselines, and remaining open to iterative refinement, we transformed a frustrating tab-based legacy system into an efficient, context-preserving user experience.
The drawer design didn’t just improve metrics, it fundamentally changed how users interact with one of Foods Connected’s core products. The combination of a table of contents and persistent sidebar eliminated the cognitive burden of tab switching, reduced errors, and restored users’ confidence in the system.
