Bringing Design System Standards to Mexico's National Pharmaceutical Network

Responsive UI Development for a National Pharmaceutical SSO Platform

Maypo is Mexico's third-largest pharmaceutical logistics firm, distributing highly specialized medications (including cold-chain cancer drugs requiring strict temperature control) across 900+ hospitals for the country's second-largest government health network.

Their platform handled authentication and access control for medical personnel across that network, but had been built for desktop only, leaving doctors making rounds, nurses moving between wards, and pharmacists at dispensary counters without access to tools they needed constantly.

I adapted the platform for tablet and mobile as UI/UX Developer: rethinking information architecture for touch, replacing hover-dependent affordances with touch-native equivalents, and sizing tap targets for clinical use where users may be gloved or working in low-light conditions, giving a clinical workforce access to critical pharmaceutical tools on the devices they actually carried.

The Problem

Adapting an established desktop interface for mobile isn't a cosmetic exercise but a structural one. The decisions that make a desktop layout work (dense information display, hover states, precise cursor interactions) are exactly the decisions that make a mobile layout fail. Four areas required deliberate rethinking:

• Information architecture for touch. Navigation and key features designed for a mouse-driven desktop had to be re-evaluated for thumb-reach zones, tap targets, and the reduced screen real estate of a tablet or phone. What was intuitive on a 27-inch monitor wasn't automatically intuitive on a 10-inch tablet in a clinical corridor.

• Component responsiveness. Existing UI components were redesigned to scale correctly across breakpoints, maintaining visual consistency while adapting layout, spacing, and sizing to each device context.

• Touch-native interactions. Hover-dependent affordances were replaced with touch-appropriate equivalents. Tap targets were sized for clinical use where users may be gloved, hurried, or operating in low-light conditions.

• Performance under real-world conditions. A hospital's network is not a controlled environment. The adapted interface needed to remain fast and functional across the variable connectivity conditions medical professionals encounter throughout a working shift.

What I did

Working within LKMX's development team on the SSO platform, I ensured UI component consistency across the responsive adaptation by auditing components against LKMX's design system standards, fixing spacing variables and breakpoints that didn't translate correctly to smaller screens, correcting button sizes and tap target dimensions for clinical use, and resolving content alignment issues across device contexts.

The focus was precision: ensuring every component behaved according to the design system's specifications in a clinical environment where inconsistencies create friction for medical professionals who can't afford it.

Key Mockups

Outcome

• Access to critical pharmaceutical management tools on the devices they actually carried.

• For a workforce that operates across wards, corridors, dispensaries, and on-call rooms (not at fixed desks) that access isn't a convenience. It's a meaningful improvement in how clinical and administrative work gets done.

Built in 2020 for internal use across Mexico's second-largest government health network. Not publicly available.