Specialist Laboratory Applications

Initial Situation

The laboratory operated using numerous Excel workbooks, organically grown forms, presentations, and process descriptions. Often, only experienced specialists understood how analyses, forms, materials, localisations, collection sites, profiles, and responsibilities were interconnected. Master data and editorial texts were mixed together, multiple languages and publication statuses ran in parallel, and any change to the catalogue entailed manual effort.

Objective

A system in which each application effectively supports its own business process, whilst all three still function consistently: a single entry point, unified navigation, one language, and identical patterns for import, export, data backup, and help.

Order Forms

From the imported analysis catalogue to the reviewed, published order form.

• Import analysis catalogue and assign analyses to forms, complete with material and advisory codes

• Categories, subcategories, info lines, and reusable modules arranged via drag-and-drop

• Interactive A4 and print sheet previews, PDF export with defined typography

• Form overview designed as a freely positionable canvas

• Status workflow from draft to publication, including publication date

• Colour-coded responsibilities and an editing lock during technical review, featuring a visible rationale and a clear handover to the next step

• Roles for viewing, project management, technical leads, communication, and administration

• Excel export and re-import with a dedicated metadata sheet to ensure positions, statuses, and responsibilities are preserved

Key Decision: Master data, form instances, and metadata are modelled separately. A new catalogue updates the analyses without overwriting additional texts, positions, or workflow statuses.

Profile Database

• Structured maintenance of personal and profile data with search, filters, and flags

• Multilingual content, activities and interests, QR codes, and contact details

• Comparison of data versions and statuses for business cards and profiles

• Excel import and export, CSV for downstream publication

Key Decision: Translations belong to the profile but remain individually verifiable. This ensures it is always clear which language version is at which stage.

Bacteriology

• Templates, areas, localisations, materials, analyses, and collection sites from defined Excel sources

• Multiple data model scenarios, switching between Material → Analysis and Analysis → Material

• Collection sites integrated into localisations, with possible combinations calculated and displayed

• Quality and consistency checks, terminology registry, optimisation checklist, and documented findings

• Lazy loading for large datasets and a guided walkthrough tour

Key Decision: Alternative models are not merely described, but can be operated side by side. Specialists can directly observe what a hierarchy implies for combinations and data quality, allowing them to make decisions based on these insights.

One System Instead of Three Prototypes

All three applications are accessible via a shared portal. Navigation, language switching, visual hierarchy, import and export patterns, local data backups, pre-update backups, loading, error, and status messages, as well as guided tours, follow identical rules. The applications nevertheless remain self-contained and can be developed further independently.

My Role

• Business Concept Design: Analysed requirements, Excel structures, and existing tools, translating them into digital models

• Product Ownership: Prioritised features, identified dependencies, steered progress across numerous iterations

• Requirements Engineering: Clearly defined status transitions, locks, imports, exports, and edge cases

• UX and Design: Progressive disclosure, clear hierarchies, drag-and-drop, canvas layout, print layout, and typography

• Quality Assurance: Reproduced bugs, isolated root causes, conducted round-trip tests, build verifications, and visual inspections

Working with AI

Implementation was carried out using Figma Make (React, TypeScript, Vite, Tailwind CSS). The AI wrote the code, whilst the decisions were mine: defining objectives and data structures, evaluating variants, reviewing results, tracing errors to their root cause, and ensuring consistency across the applications. The applications are actively in use today.

Next Stages of Development

Log-in with technically enforced role permissions, a shared database for multiple users, an approval and audit history, automated testing, and formal validation with the subject-matter experts.