Case Study: Bringing Structure to a 40-Week Tender Process

Client: Procure (buyers’ organisation for supermarkets)
Project type: Greenfield procurement application
Role: UX/UI Designer (also responsible for Business Analysis)
Domain: Tendering, Procurement
Impact: Designed a digital tender process from scratch, replacing a workflow of emails, Excel, Word, and phone calls

Context & Challenge

Procure organises collective tenders on behalf of its member supermarkets, aiming to secure the best possible terms across various product categories. Despite the strategic value of these tenders, there was no digital system in place to support the process. Everything happened via email, spreadsheets, Word documents, and phone calls.

Stakeholders indicated that a full tender cycle could take 40 weeks or more, although the actual steps and delays were never formally tracked. The target for the new system was to shorten this cycle to 24 weeks—but crucially, Procure could not clearly describe their own internal process.

One of the biggest challenges was that Procure itself didn’t have a shared or documented understanding of how tenders were run. Much of the process had to be discovered and defined as we went along.

1 Situation image

Before the platform was built, tenders were coordinated through disconnected tools and informal communication.

My Role & Approach

I joined the SCRUM team as a UX/UI Designer but quickly took on Business Analysis responsibilities as well. Since no BA was assigned to the project, I took the lead in making sense of the domain, capturing workflows, and helping the team and stakeholders align.

Process discovery
I conducted interviews with Procure employees and analysed existing documents and tools. Through iterative sessions, I developed the first-ever visualisation of the tender process.

This helped clarify:

  • Key activities like preparation, member input, supplier input, evaluation, and awarding
  • Common bottlenecks, such as unclear responsibilities and lack of shared timelines
  • Where member organisations (external stakeholders) and suppliers fit into the picture
Intial process visualisation

First visualisation of the tender process, structured by role and phase. Created through stakeholder interviews and document analysis.

Structuring the domain

To support the UI design and product backlog, I worked on defining essential domain concepts, such as:

  • Tender: The full purchasing process initiated by Procure
  • Round: A phase within a tender (e.g. first offer, best-and-final offer)
  • Scenario: A calculated setup used to compare offers from suppliers
  • Evaluation & validation: Decision-making and approval steps before awarding
  • Clarifying these concepts allowed the development team to design a flexible architecture, and helped stakeholders use consistent language when describing their needs.

Requirement Gathering & Feedback Loops

Based on the tender flow visualisation, we could identify key users who were owners of specific phases. I conducted focused sessions with each owner (often joined by a colleague), where we gathered detailed requirements for their part of the process.

I then translated these needs into wireframes or functional concepts, and validated them directly with those users. These review cycles were short and practical, which helped us quickly move from assumptions to solutions.

In every Sprint Review, I presented my UX work to a broader stakeholder group. This gave other users visibility into ongoing work and the opportunity to ask questions or raise concerns early in the process.

In addition, the QA tester and I prepared and facilitated User Acceptance Testing (UAT) sessions every sprint. During these sessions:

  • Users were trained in setting up test data and test scenarios
  • We actively observed how they interacted with the product
  • These became informal usability sessions, where I could instantly identify UI or interaction issues and refine the design accordingly

This continuous feedback loop helped us evolve the product in a user-centered way, even within the agile delivery rhythm.

 

 

3 Figma – User flows-2

User flows clarified role-specific tasks and decision points throughout the tender process.

UX & UI Design

With a clearer understanding of the process, I designed the application from the ground up, including:

  • Flows for creating tenders, managing rounds, and submitting offers
  • Member input modules that allow supermarket members to enter expected volumes and perform volume exchanges
  • Supplier input interface that replaced Excel-based submissions with structured digital forms
  • Clear task overviews and consistent feedback messages, reducing confusion around responsibilities and next steps

Every part of the interface was designed to bring clarity to a process that was previously opaque and fragmented.

 

Evolution of the design for task overviews — from lo-fi wireframe to implemented UI.

Evolution of the design for working on a volume commitment — from lo-fi wireframe to implemented UI.

To support consistency and speed during design and development, I introduced a small set of flexible page templates. These templates served as the foundation for most of the application’s views, helping us maintain clarity across modules while streamlining both wireframing and implementation.

Three base templates used throughout the portal to ensure consistent navigation and interaction patterns.

I also designed a reusable action wizard, which guided users through multi-step tasks in a structured and predictable way. The wizard made progress visible, reduced cognitive load, and ensured that key actions (like validations or data submissions) became measurable in both the UI and the underlying system logic.

6 – Action Wizard

Action wizard templates guided users through multi-step tasks, making progress and completion measurable.

Design System Contributions

  • Created reusable, accessible components for use in a low-code (OutSystems) environment
  • Defined interaction patterns for forms, buttons, and system messages
  • Supported implementation by providing specs and accessibility guidance
  • Introduced layout templates and a task wizard pattern to promote consistency across the application
7 – Steps section3

Reusable step-by-step component with all system states, built to support task clarity across use cases.

Outcome & Reflections

The result is a robust, role-based application that replaces unstructured workflows with a central, trackable system. While the goal of reducing the tender process to 24 weeks has not yet been formally measured, Procure now has a clear, shared process and a dedicated system to support it.

“We now have one place to run tenders and track what’s going on. That clarity alone has changed how we work.” – Stakeholder at Procure

Key Learnings

  • In greenfield projects, uncovering and structuring the business process is as critical as designing the interface—especially when no one has the full picture.
  • UX design and business analysis go hand-in-hand when the user journey must be invented, not just improved.
  • Replacing email- and Excel-driven workflows with structured interaction design can dramatically increase accountability, clarity, and collaboration in complex B2B environments.

More projects

Best Furry FriendUX / UI design

Fit InUX / UI design

CoopUX / UI design

Windstreken stalPackaging

Food CabinetEditorial design

Food CabinetUI Design

World Food Day 2019Branding / Event

De ZoutfabriekBranding

Maksiem for H&MGraduation project

Food in MotionBranding

Borre leesclubEditorial design

BionextBranding

World Food DayBranding / Event

Bouwkunst academie RotterdamEditiorial design

Hogeschool RotterdamEditorial design

AEGIR-MarineBranding

CellsIllustration

Photography series, Barbie!Self initiated project

AEGIR-MarineBook design

HelveticaPoster design