Ahmad Bayrakdar
Hire me

Smart Lab — Laboratory Information System

A Windows desktop system that runs a medical lab end to end: reception, analyzers, results, billing and reports.

Role
UX designer & lead full-stack engineer
Timeline
2020 – 2023
Client
Proitx
Type
Employment
Category
Desktop & Mobile
Figma design

OverviewWhat this project is

Smart Lab is a desktop application that medical laboratories use to run their day: registering patients and visits, printing barcoded tubes, receiving results from analyzers, validating and printing reports, and tracking payments, insurance, expenses and stock. It works in Arabic, English and Turkish.

ContextThe problem

The previous version had grown screen by screen. Reception needed many clicks to register a visit and find earlier results, settings were scattered, and analyzer results were typed in by hand. The company needed a faster, consistent interface and a codebase that could keep growing.

ContributionMy role & responsibilities

I owned the redesign end to end: I mapped the lab workflow with the team, designed the new interface in Figma (reception, results entry, work tables, control panel, printed A4 reports) and led the rebuild of the Vue frontend and the backend services behind it.

  • Workflow mapping and UX design with lab staff
  • Design system and all key screens in Figma, RTL first
  • Vue 2 + Vuetify architecture: routing, Vuex stores, vue-i18n (ar/en/tr)
  • Node.js/Express + Sequelize API for patients, visits, tests, accounting and settings
  • Analyzer integration and Windows packaging with Electron

ScopeKey features

  • Reception: search by name, code or barcode; visit history; one-screen registration
  • Results entry with reference ranges by sex and age, notes and validation
  • Work tables per lab section showing ready and pending tests
  • Analyzer connections (e.g. Mindray, Immulite) configured from the control panel
  • Invoices, receipts, partial payments, insurance companies and associations
  • Expenses, daily accounts, statistics dashboard and inventory
  • Per-page permissions (view, add, edit, delete) for each role
  • Printed A4 reports; results shared as PDF or via WhatsApp
  • Scheduled compressed database backups with restore

SystemArchitecture

Electron shell → Vue 2 SPA (Vuetify · Vuex · vue-i18n)
      ↓ HTTP on localhost / LAN
Node.js + Express API (~60 controllers, Sequelize models)
      ↓
MySQL on the lab PC or a LAN server
Analyzers → ASTM / vendor parsers → results tables

EngineeringChallenges & solutions

Challenge

Every analyzer model sends results in its own format.

Solution

Per-device parsers (ASTM and vendor formats) behind one interface, configured from the control panel, so a new analyzer is added without touching the results screens.

Challenge

Reception must stay fast during the morning rush, with Arabic text mixed with Latin test names.

Solution

A single reception screen — patient list, search and visit form side by side — keyboard friendly, RTL first, with bilingual test names.

Challenge

Labs run on local PCs where losing data is not an option.

Solution

Local MySQL with scheduled compressed backups and a restore tool in the control panel.

Challenge

Shipping a web stack as a desktop product.

Solution

The Vue app and the Node backend are packaged together with Electron into a Windows installer.

OutcomeResults

  • Used by 20+ laboratories (company figure).

StackTech stack

Technology

  • Vue 2
  • Vuetify
  • Vuex
  • vue-i18n
  • Electron
  • Node.js
  • Express
  • Sequelize
  • MySQL
  • Figma

Tags

  • desktop
  • healthcare
  • RTL
  • hardware integration
  • UI/UX

NotesAdditional notes

Smart Lab is owned by the client; screens shown are design files and screenshots without patient data. Source code is private.

Interested in working together?

Get in touch