Impact Snapshot

WinPharma operates on a mixed legacy stack with offline/VPN Windows clients and different levels of React experience across teams. The landscape spans four product lines plus a shared admin console. We had to support 24/7 pharmacy workflows and strict health-data compliance while unifying the UX without forcing a hard single-stack migration.

Standardize interfaces and speed up delivery across all product lines, reducing release defects and support costs, and helping teams of different maturity levels (online and offline) ship reliable, high-quality features.

Built a design system with dual delivery: tokens, iconography, Storybook, Figma Code Connect, and two component channels — modern React components for web apps and HTML wrappers for legacy/offline clients. Added a wrapper layer so non-React teams could reuse the same visuals and behavior. Launched an icon pipeline (SVG → React/NPM), a naming red-policy, living docs, lint rules, and enablement sessions, then scaled the system across four product lines and the admin console. In parallel, modernized the admin console (filters + pharmacy list) and formalized editorial and UX guidelines for core workflows.

• Handoff & defects: after standardizing tokens and patterns, minor mismatches and handoff fixes dropped significantly (-4–8 h/month).

• Speed for non-React teams: HTML wrappers and stable backend-to-front contracts accelerated delivery for teams not using React (-2–4 h/month).

• Icon pipeline: the export and publishing flow is stable now — no more manual searching, naming inconsistencies, or duplicate assets.
  

• Docs & process: living documentation, lint rules, and Storybook reduced uncertainty and recurring “how do we do this” loops.
  

• Consistency: shared editorial rules and UX guidelines lowered the volume of small fixes and alignment issues across products.