Skip to content
KR.
← All work

VOUND · Saved Tenders · 2026

A tender queue that says what to do next

I redesigned Saved Tenders for VOUND: the screen where an architecture or engineering firm keeps the public tenders it is weighing up, and decides as a team which ones to bid for.

It is a design prototype, drawn in June 2026 at desktop, tablet and phone widths, in light and dark, and in German and English.

Role
Designer — product UI and UX, and the design system
Scope
Tokens, components, the queue in three views, tender detail, states
Platforms
Desktop (1440), tablet (834), phone (375) · light and dark · DE and EN
Status
Design prototype, June 2026
VOUND's saved-tenders queue: a sidebar with Projects active, a toolbar with search, Updates 5, filter, sort, columns, save view and a table, board and calendar switch, saved-view tabs with counts, and a table of nine tenders with deadline, status, next step and updates; two rows are blocked, with their reasons in red, and two deadlines are marked Today and Overdue
Design file: the saved-tenders queue in English. A design prototype; the tenders are sample data.

01 · The project

The project

VOUND is AI software for German architecture and engineering firms. It finds public tenders across procurement platforms, reads their documents, extracts the requirements and matches them against a firm's own references. Saved Tenders — «Gespeicherte Ausschreibungen» — is where the tenders a firm keeps end up, and where the deciding happens.

The file is built as a system: a page of tokens, a component library with live variant sets, the queue in three views in both languages, the tender detail, tablet and phone layouts, and a board of the states that sit on top of the work.

02 · Design decisions

Design decisions

  1. 01

    Every row ends in its next step

    The queue is a table of the tenders a firm has kept: the name, the deadline, the status, the next step and any updates nobody has reviewed. The next step has its own column — review the update, get team feedback, wait for the CEO's decision, assign an owner — so the list reads as work to do rather than as a record.

    Above it, saved views split the same twelve tenders into worklists with live counts: my tenders, due soon, with new updates, awaiting decision, in progress, rejected with updates. A blocked tender says why under its status, in red: the references for the lab planning are missing.

    The saved-tenders queue in German: the sidebar with Projekte active, a toolbar with search, Updates 5, filter, sort, columns and save view, saved-view tabs with counts, and a table of nine tenders with deadline, status, next step and update columns; two rows are blocked, with their reasons in red under the status

    Design file · The queue in German. The English version is the first screen at the top of this page; the tenders are sample data.

  2. 02

    One queue, three ways to look at it

    The same tenders can be read as a table, as a planning board grouped by status — new, to review, in progress, awaiting decision — or as a calendar of deadlines, with today marked and each tender's dot in its status colour. The switch between the three sits in the same place on every screen.

    The board cards carry only what a column needs: the buyer, the days left, the owner, and the count of new updates. An unassigned tender says so on its card.

    The planning board: “12 tenders · grouped by status”, with columns for New, To review, In progress and Awaiting decision; each card shows the tender, its buyer, the days left, an owner or “Unassigned”, and a lime count of new updates
    Planning board
    The calendar for June 2026, “Deadlines by date · 5 tenders this month”: today, the 22nd, circled in black on a pale lime cell, and each deadline as a chip with its status dot
    Deadline calendar

    Design file · The planning board and the June calendar, in English.

  3. 03

    Colour is kept for alarms

    Nine statuses share one grey chip and differ by a dot: amber where a tender waits on someone, green where it is moving or won, grey where it was rejected or lost. Only Blocked turns the chip red. Deadlines follow the same rule: a grey clock while there is time, an amber one in the last days, and a red chip only for today and overdue.

    The brand's lime is spent on one thing at a time — the most important action, such as AI Chat on a tender — and on the count of new updates. Confirming is ink, secondary actions are outlined, and rejecting is red.

    Nine status chips in German, grey with a coloured dot, and Blockiert alone in red; below, deadline signals — Überfällig and Heute as red chips, “in 2 Tagen” with an amber clock, “in 41 Tagen” with a grey one — and update counts, “2 neu” and “1 neu”
    Status chips · deadline and update signals
    The button set: KI-Chat and Benachrichtigen in lime, Zur Entscheidung in ink, Neu bewerten outlined, Als nicht relevant markieren in red on pale red, a text button, and icon buttons with an Updates count in lime
    Buttons

    Design file · The component library: status chips and deadline signals, then the buttons. The file's own line: “Colour is an alarm, not a category.”

  4. 04

    The tender opens over the queue

    Opening a tender slides its detail over the queue instead of replacing it. The top of the panel answers what to do now: a readiness banner with the days left, the next step, two AI actions — match references, three of five matched, and check completeness — then status, next step, owner and team as rows that can each be edited. The team votes, and three buttons decide: mark for decision, re-evaluate, or mark as not relevant.

    Further down, each update says what changed and by how much — the deadline brought forward three days, from 27 June to 24 June at 12:00 — and is marked as checked once someone has read it. Internal comments, the key facts, the requirements and the source documents follow.

    A tender's detail slid over the dimmed English queue: Share free and a lime AI Chat button, the tender's name and buyer, “Ready to apply” with 2 DAYS LEFT in red, the next step, Reference match 3 of 5 and AI check, editable rows for status, next step, owner and team, votes of 2, 2 and 0, three decision buttons, and the status history
    Detail over the queue · EN
    Further down the German panel: a critical update, “Deadline geändert — Abgabefrist wurde um drei Tage vorgezogen”, from 27.06.2026 to 24.06.2026 at 12:00, with Als geprüft and Neu bewerten; an important requirement update; an internal comment from Anna Keller; a note field with a lime add button; and the key facts — deadline, volume 1.800.000,00 €, procedure, LPH 1-8, service type, building type, relevance 86 and campaign 74
    Updates and key facts · DE

    Design file · The detail over the English queue, and the German panel from its updates to the key facts.

  5. 05

    The moments that sit on top of the work

    A command palette (⌘K) switches views, opens the updates, turns on dark mode or English, and jumps to a tender by name. The updates digest lists each tender with something new, and what it was.

    The states board draws what the queue does when it is not simply full: the filter, column and save-view popovers — a saved view is shared with the team or kept personal — an empty search, a module still in development, and a blocked tender, whose blocker sits above the next step in its detail. Every surface also has a dark counterpart.

    On dark plates, the German command palette with its views, actions — open updates, dark design, switch to English — and tenders; beside it the updates digest, “Neue Aktualisierungen 4”, listing four tenders and what changed in each
    Command palette · updates digest
    The German queue and a tender preview in dark mode: the same rows, chips and red deadline cells on near-black surfaces, with the lime decision button
    Dark mode
    A blocked tender's detail: a red blocker banner, “Referenzen für Laborplanung fehlen”, above the next step, Verantwortlichen zuweisen, with the owner shown as Unbesetzt in red
    Blocked tender
    Three popovers: a filter by status, team, owner and updates; a list of visible columns with checkboxes; and a save-view form with a name and a choice between Team and Persönlich
    Filter · columns · save view
    The empty state, “Keine Treffer”, asking to reset the search or the filters, with a button to reset filters
    Empty search

    Design file · The States board: the command palette and the updates digest, dark mode, a blocked tender, the popovers and an empty search.

  6. 06

    Two languages, and the same queue on a phone

    Every screen is drawn in German and in English, with the switch in the sidebar beside the dark-mode toggle.

    On a tablet the table keeps four columns and drops the next step. On a phone each tender becomes a card with its status, its deadline and the updates waiting on it, and the detail stacks into one column with the same rows and the same three decisions.

    The queue at 834: the VOUND tile and title, search, an updates bell with 5, filter and the view switch, the saved-view tabs on two lines, and the table with name, deadline, status and updates
    Tablet · 834
    The queue at 375: a card of controls — search, updates, filter, sort, columns, save view, the DE and EN switch, dark mode and the view switch — then the saved views as a two-column grid, and the first tender as a card with its status, deadline, buyer and a red panel of two new updates
    Phone · the queue
    A tender at 375: AI Chat, the name and buyer, Ready to apply with two days, the next step, the two AI actions, the editable rows, votes and three decision buttons, then the status history and the key facts
    Phone · a tender

    Design file · The queue at 834, and the queue and a tender at 375, in English.

03 · What I delivered

What I delivered

A token foundation and a component library with variant sets; the saved-tenders queue as a table, a planning board and a deadline calendar, each in German and English; the tender detail; tablet and phone layouts; and the overlays and states — command palette, updates digest, filters, columns, saved views, dark mode, an empty search, a module in development and a blocked tender.

04 · What I would revisit

What I would revisit

The red I kept for alarms reads 4.83:1 on white but only 4.23:1 on its own pale chip, so the two most urgent labels in the queue — Today and Overdue — fall just under the 4.5:1 a label that size needs. I would darken the chip's text a step and keep the pale ground.

The second fix is length. Long German names are cut off at the column's edge without an ellipsis — “Energetische Sanierung Berufsschule, Dortmu” — and in the English detail the decision button clips its own label to “lark for decision”. I would let names run to two lines, and size the buttons on the longer of the two languages.

Project status

A design prototype for VOUND, dated June 2026. It is not known to have shipped, so nothing here links to the product. The tenders, buyers, people and dates are the file's sample data.

05 · Explore the system

Explore the system

Quiet Ledger, the file's name for its tokens: a rationed, mostly monochrome system in which ink carries the structure, the lime is kept for the single most important action, and status colour appears only as a signal.

Type
Geist
Spacing
4-pt grid, 4 to 64
Radius
9 · 12 · 16 · 22 · pill
Icons
Lucide, 2px stroke
Colour and typography6 colours · Geist, 4 weights · 2 brand sheets
Lime
#CEF24EThe single most important action. Ink on it reads 15.39:1; on white the lime itself is 1.28:1, so it is never text.
Olive
#586916The lime's text colour, for counts such as “2 new” on the pale lime. 5.63:1 there.
Red
#DC2626Blocked, today and overdue. 4.83:1 on white, but 4.23:1 on its own pale chip — see What I would revisit.
Amber
#F59E0BA signal dot and the near-deadline clock. 2.15:1 on white, so it never carries words.
Page
#F6F6F7The ground under the white surfaces.
  • Ink#0B0B0DStructure and text: headings, the active view, the confirm button. 19.66:1 on white.

Hex values and type styles from the file's Foundations page and the screens' fills; ratios measured against white unless another ground is named.

Geist

  • Regular
  • Medium
  • SemiBold
  • Bold

One family across the product, with tight tracking on display sizes and tabular numerals in tables and dates — the file's own rule.

Display · Bold 56

Ausschreibung

Heading 1 · SemiBold 32

Gespeicherte Ausschreibungen

Body medium · 14

Verantwortlich · Anna Keller

  • The Foundations page, “Quiet Ledger — design tokens”: surfaces, ink, lines, the ink accent, the brand lime, semantic colours and signal dots as swatches with their hexes; the Geist type scale from Display 56 Bold to Caption 12; spacing from 4 to 64; radii; four shadows; and a grid of Lucide icons

    Foundations

    Colour, type, spacing, radius, elevation and the icon set, as the file draws them.

  • The Component library page: buttons, status chips, deadline and update signals, saved-view tabs, controls, AI actions with relevance and campaign scores, decision and votes, navigation, and the detail atoms

    Component library

    The building blocks of the queue, in German. The chips, buttons and tabs are live variant sets in the file.

Contact

Want to discuss a similar project?

Ask me about this project
Next projectCazam