02 — UI Design · NTU Course Project · 2025

ChemPion

A lab's entire chemical inventory — visible at a glance, manageable by anyone.

Role
UI Designer & Developer
Tools
HTML · CSS · JavaScript
Deliverable
Interactive Dashboard
Context
NTU Course Project

Live Demo

The dashboard, fully interactive.

Five sections — inventory, cost tracking, alerts, usage analytics, CSV export. Everything accessible without writing a single line of code.

Try the sidebar, search, filters, and the Add Chemical form.

ChemPion — interactive dashboard prototype.

Design Decision 01

Status as the first thing you see

When I observed how lab staff actually checked inventory, their first question was never "show me everything" — it was "is anything wrong?" This led to the decision to make status the dominant visual element. Color-coded pills (green, amber, red) let users scan urgency before reading a single number.

The color system mirrors how researchers physically scan shelves — checking labels for expiry dates and low quantities. The dashboard digitizes that same instinct.

Design Decision 02

Actions in the interface, not in the code

The original system required Python knowledge to add or update chemicals. But the people who manage inventory day-to-day are lab assistants and graduate students — not developers. The redesign replaced every code-level action with a form-based UI, removing the technical barrier entirely.

Before — to add a chemical

df.loc[len(df)] = [
  "Ethanol", "C₂H₅OH",
  "Organic", 5, "L", 450,
  "2026-08-15"
]

After — to add a chemical

Click + Add Chemical
Fill the form.
Done.

Design Decision 03

Four numbers that answer the real question

The dashboard opens with four KPI cards: total chemicals, total value, expiring soon, and low stock. This layout was chosen because conversations with lab members revealed that their inventory check always starts with the same question: "do I need to order anything?" Four cards answer that without scrolling.

Earlier iterations showed six or eight metrics. Reducing to four forced prioritization — only the numbers that drive action made the cut.

Design Process

How I got from notebook to dashboard.

The design started by mapping the existing workflow: how lab members currently check stock, what triggers a reorder, and where the Jupyter notebook breaks down. Three patterns emerged from these conversations.

01
Scan first, detail second. People glance at the overview before drilling into specifics. The layout needed a clear hierarchy — summary on top, table below.
02
Alerts beat data. Knowing that 3 chemicals are out of stock matters more than knowing the lab has 47 chemicals total. Urgency needed to be visually dominant.
03
One screen, not five tabs. Lab staff check inventory between experiments — they need fast answers, not navigation. The sidebar groups everything into one scrollable flow.

These patterns informed the layout: KPI cards at the top for instant status, a filterable table for detail, and a persistent sidebar for switching between views without losing context.

The Problem

A tool built for one, used by all.

ChemPion started as a Jupyter notebook — a developer's tool for tracking lab chemicals. Functional if you knew Python. Inaccessible if you didn't. The data was all there. The interface wasn't designed for the people who needed it most.

01
No overview. Checking stock meant running a cell and reading raw output. Critical alerts — low stock, expiry — were buried in code.
02
No visual hierarchy. A chemical running out looked identical to one with years of shelf life. Status was invisible.
03
No actions. Adding, updating, exporting — all required editing code directly. Non-developers couldn't use it at all.

Result

From notebook to dashboard.

The same data, redesigned for the entire lab. Five fully functional sections, real-time search and filtering, form-based workflows for all common actions, and one-click CSV export.

5
Functional sections in the dashboard
0
Lines of code needed by lab staff
CSV
One-click export of full inventory
← PreviousFinding Next →Smangus