Taipower Laboratory Information Management System (LIMS)

Background & Challenge

This is the front-end prototype for the laboratory information management system of Taipower Research Institute’s chemical testing division, spanning case, test, result, report, resource, and customer-service modules — more than 250 pages in total. The division’s daily work revolves around large volumes of experimental data and dense paper-based audit forms, and the client’s core requirement came down to a single sentence: “Let us see as much data as possible on one screen.” I was responsible for the UI/UX design and front-end implementation of the entire interface, hand-coded in HTML / CSS / SCSS with jQuery, on top of Bootstrap 5 and Tabler as the base component libraries.

Throughout the project I designed around one guiding principle: give the space back to the data, and give the choice back to the user.

Design Decisions

The LIMS home page in its default dual-card layout, with the case list on the left and personal case progress on the right, separated by a draggable divider — The LIMS home page: the default dual-card layout — case list on the left, personal case progress on the right.

The dual-card layout after dragging the divider, with the case list widened on the left and personal case progress narrowed on the right — Flexible dual-card layout: drag the divider to resize — the left/right ratio is the user's call.

Design decision

Faithfully translating complex paper forms to the web

I converted a large set of paper-based audit and test forms into HTML: the scientific data tables on test-result pages (multi-level headers, calibration curves and QC verdicts, with heavy use of colspan / rowspan), the multi-tier headers of on-site sampling records, and the multi-level expandable lists for customer-service tracking (fold-tables, where a main row expands into a nested sub-table).

The merged cells and hierarchy of an audit form carry the logic of how it is read — they cannot be simplified away. Only after faithfully reproducing the structure did I layer on what the web does best: readability, interaction, responsiveness, and inline editing. Pages with especially heavy content were split into several forms with tabs to reduce per-page cognitive load.

Scientific data table on the test-result page, with multi-level header sections for calibration curves, spiked-standard analysis, recovery rates, and sample analysis — Scientific data table: calibration curves, QC verdicts, and multi-level headers rebuilt in HTML.

Two further layout decisions serve the same goal: maximizing the height of the data area.

Outcome & Reflections

The final delivery covered the modules above — a front-end prototype of more than 250 pages — plus a design guideline document unifying empty states, dialogs, and toast behavior. Due to a non-disclosure agreement, every screen shown on this page has been de-identified.

This project taught me to treat information density as a design problem in its own right: not shrinking text to cram more in, but using flexible layouts and componentization so users decide how much they want to see at any given moment. It also confirmed that at the scale of 250+ pages, a systematic style architecture is not a matter of engineering efficiency — it is the precondition for design consistency to survive.