Background & Crisis Response: Front-End UX Hacking on Live Physician Payment Screens
e-casebook operates as a specialized medical platform where pharmaceutical companies and medical device manufacturers sponsor live-streamed lectures and educational events for physicians. During a live, high-stakes medical conference, our Customer Support (CS) team received urgent complaints from attending physicians stating they could not figure out how to select their registration plans or navigate the pricing options.
Because the conference was actively running in real time, we had zero margin to wait for heavy engineering sprints. After syncing with the CS team, I immediately formulated a tactical front-end fix via CSS overrides to solve the visual issue without consuming backend development hours. I reviewed the solution with my design manager, secured an immediate green light, and then coordinated with engineering for an accelerated production deployment to fix the UI issue without friction.
The original interface simply listed four tier options using unstyled, bare radio buttons. The options lacked borders, visual groupings, or any signifiers indicating they were clickable components. To resolve this, I wrote custom CSS to turn the raw bulleted items into clean, scannable "card-style modules." I then added active states that changed background colors upon interaction. This allowed users to instantly confirm their selected tier visually, resolving the checkout block and stabilizing the transaction funnel right away.
Collaborative Process: Optimizing Engineer-Driven Layouts
Within the e-casebook ecosystem, our development loop runs on an "engineer-driven, constraint-first" model rather than a traditional designer-led approach. This structure is intentional: engineers possess the deepest understanding of complex medical compliance laws and backend database dependencies. Whether assembling internal streaming administration backends or building fast, modular feature tools like on-the-fly "tagging managers," engineering ships a fully operational, functionally sound layout first.
My core value lies in taking these technically sound, engineer-built views and refining them into intuitive human experiences—without breaking any underlying code dependencies or database schema constraints.
- Information Architecture & Grouping: I take dense, multi-step forms ordered by database architecture and reorganize them into intuitive, logical flows that match human mental models.
- Microcopy & Micro-interactions: I insert contextual inline hints to prevent user input errors, transforming rigid system validation messages into clear, conversational labels.
- Brand Alignment & System Consistency: When rapid tools skip layout polish, I review and standardize interface color values and input components to ensure absolute alignment with our brand guidelines.
By respecting technical boundaries and focusing heavily on polish rather than disruptive layout overhauls, I protect engineering velocity while ensuring product quality. This pragmatic tuning loop is what keeps our lean team agile.
Organization & Role: The Realities of a "Hybrid" Position in a 40-Person Team
Operating inside a lean team of roughly 40 professionals, our design org consists of just two people: my design manager and myself. We balance everything from core product UI/UX architecture to client-facing B2B graphic production—such as creating promotional key visuals (KVs) for global pharmaceutical marketing events.
I view this dual responsibility pragmatically rather than hiding behind buzzwords like "cross-functional synergy." This hybrid role is a natural byproduct of our current company scale; as the organization expands, these disciplines will naturally separate into specialized positions.
To maintain absolute alignment and product integrity, we enforce a structured design governance loop—ensuring all user interface adjustments and brand assets receive a final review and green light from my manager before being shipped to engineering production or presented to corporate clients. This workflow enables precise quality control even within a fast-moving environment.
Additionally, maintaining this full-spectrum view inside a compact environment yields high execution speed and flawless asset delivery. Because I map out the platform interfaces myself, I know the exact pixel constraints and responsive safe zones of our banner placements on Day 1. There is zero friction or back-and-forth communication regarding export specifications; we bypass asset validation loops completely and ship client marketing materials directly to production with maximum speed.
Retrospective & Outlook: Solving Real-World Problems within System Constraints
Iterating on a live product while balancing corporate marketing needs has taught me that impactful product design isn't about maintaining pristine Figma files; it is about shipping practical fixes within fixed operational, technical, and resource boundaries.
When an event is live and users hit a wall, a perfect vector mockup doesn't solve the actual problem. Success often comes down to writing a few lines of responsive CSS or tweaking input microcopy on an engineer-built interface. Moving forward, I will continue to evaluate our technical architecture and company growth stage objectively, choosing execution speed, rapid internal manager alignment, and real-world results over dogmatic design processes to move the product forward.