← Back to portfolio Case study 02 of 05
Case study · Manufacturing / Enterprise tools

Cutting manufacturing waste with lot number tracking

A web app that generates, tracks, and prints compliant lot numbers for BMSC. It replaced error-prone notebooks and spreadsheets with one shared record.

Client
Beauty Manufacturing Solutions Corp
Role
Product Designer, end‑to‑end
Timeline
12 weeks (8 design + 4 dev)
Platform
Web app, desktop
The problem
A wrong lot number fails quality control and the product can't be salvaged. The whole process ran on notebooks and spreadsheets.
The solution
A guided web app that generates, validates, and prints the right lot number every time, synced to one shared record.

“We turned handwritten lot numbers into a system the floor trusts completely.”

Team
JM
BE
PM
1 designer (me), 1 backend engineer, production stakeholders at BMSC
My scope
Research, information architecture, interaction & visual design, prototyping, usability testing
Tools
Adobe CC Angular MongoDB
Status
Live in production. Running smoothly with zero reported issues since launch
Jump to prototype ↓
01 The challenge

A single wrong digit meant a wasted batch

If a final product ends up with the wrong lot number, it fails quality control. There's no way to fix it after the fact, the product just can't be used. That disrupts production, adds cost, and adds to environmental waste.

1
Unfixable errors
A mismatched lot number can't be corrected after the fact. The batch fails QC and the cost is permanent.
2
All-manual tracking
Notebooks and Excel spreadsheets were the entire system of record for every lot number issued.
3
A workforce used to paper
Years of manual habit meant any new system had to be dead simple, or people would misuse it or revert.
02 Analyze

Understand

What is a lot number?

A product lot number, also known as a lot code or batch number, is the unique ID assigned to a specific batch of product while it's being manufactured.

Analyze Ideate Design Test Development Deployment Understand Problem Definition Targeted State Info Architecture Wireframes Hi-fi Mockups Clickable Prototype Iterations Design Reviews Design Testing Front-end Back-end Test Iterations Update Review / Report Iterations Design Development 8 Weeks 4 Weeks
Design and development process
So, what's the problem?

If a final product ends up with the wrong lot number, it fails quality control checks. There's no fixing it after that, the product can't be used. It disrupts the manufacturing process, adds production cost, and adds to environmental waste.

The challenges

Users had relied on notebooks and Excel spreadsheets to track and store lot-number data for years. The goal was a self-managed tracking system that cuts human error, but people were used to paper. Any new system risked getting misused or ignored if it wasn't dead simple.

Targeted state
Solutions derived after talking to production managers and employees:
✓ {{ item }}
03 Define

A lean canvas to align the team

Before sketching a single screen, I ran a lean canvas with the production and quality-control stakeholders. It kept the project scoped to the real cost driver, mis-issued lot numbers, instead of letting it balloon into a general inventory system.

Problem
  • Wrong lot numbers fail QC with no fix, the batch gets scrapped
  • Notebooks & spreadsheets are the only system of record
  • No audit trail if a mismatch is found downstream
Solution
  • Guided app generates the correct lot number per brand & date
  • Barcode scan + PIN confirmation before anything saves
  • One shared, synced record replaces paper logs
Key metrics
  • % of lots generated through the app vs. manually
  • Scrapped batches per month due to lot errors
  • Time to issue and print a lot number
Unique value proposition
The one lot number, generated the right way, every time.
Turns an error-prone manual step into a guided, self-checking action any operator can trust on the first try.
Unfair advantage
  • Built with the floor operators, not just management
  • Julian-date & destination logic encode BMSC's own rules
  • Already trusted: live in production, zero incidents
Channels
  • Shared desktop/tablet stations on the production floor
  • Manager walkthroughs during shift handoff
  • Printed quick-reference card at each station
Customer segments
  • Production-floor operators issuing lot numbers per batch
  • Quality-control staff auditing lot records
  • Production managers reporting on waste & throughput
Cost structure
One backend engineer + one designer over 12 weeks, MongoDB Cloud hosting, and shared floor hardware already owned by BMSC. No new devices purchased.
Revenue / return
Internal tool, not sold. Return here is cost avoided: a 55% cut in waste from lot-number errors against a one-time 12-week build.
04 Ideate

Sketching the flow before the pixels

User flow

Once I understood the frustrations of the manual system, we designed every part of the experience to be as contextual as possible: a branch for lot numbers based on the Julian date, and a PIN confirmation before anything saves.

Entry point Select product Product's lot number based on Julian date? Generate the code Yes Scan product SKU Enter PIN code to confirm? Save & track the action to the database Correct False: try again Scan / Print
Wireframes

The UI stayed deliberately simple. Most of the floor staff weren't especially tech-savvy, so every screen had to be obvious at a glance.

entry point
brand A
brand D
brand C
pin code page
05 Design

Mockups

Every brand needed its own entry, but the same guided pattern: pick a brand, review or generate the lot number, confirm, then print.

Select a brand to start generating.
Brand A: lot number generated with barcode, ready to print.
Brand D: shows the last lot issued before generating the next.
Brand C: a destination toggle changes the lot format.
A PIN-gated warning before any irreversible action.
Prototype
06 Testing & development

From tested design to shipped tool

Design testing

A week of user testing on the Lot Number Generator turned up real friction points. I simplified the layout, bumped up font sizes, and reorganized elements so navigation made more sense. Small changes, but they made the tool noticeably easier to use.

Front-end & back-end

After talking it through with our backend engineer, we landed on Angular for the front-end and MongoDB Cloud for the database, mainly for data security and sync across stations.

Functionality testing, review, report

Testing turned up a handful of bugs, including a couple of lot numbers generating wrong and some minor interface glitches. We fixed those and shipped it. It's been running since with zero reported issues.

07 The payoff

Less waste, one trusted system

{{ wasteLabel }}
100%
Of lot numbers now stored and tracked by the automated system
55%
Reduction in company waste from lot-number errors
0
Reported issues since launch
The application in action at the company's manufacturing facility