Pharmacy Benefit Management
Orchestrated Enterprise Design Operations
Engineered a centralized, React-based DesignOps ecosystem to bridge the gap between three siloed departments.
Role
Principal Experience Designer
Team
(DevOps & Technical Enablement ) on Application, Architecture. & Administraiton within Enterprise Data Analytics
Tools
Figma
Jira & Confluence
Mural
Microsoft Teams
Github
MUI
p
Duration
1 year
About the Project
Engineering Organizational Alignment
The Strategy:
I identified a significant opportunity to move the company from fragmented design to a unified, code-backed ecosystem. By identifying and connecting three distinct pillars, I moved the organization toward a single source of truth.
The Consumer Team: Holders of the primary branding and MUI-based style guides.
The Client-Facing Data Team: An active product team building in React but isolated from shared resources.
The DevOps Data Office (My Team): Supporting 3,000+ analysts and building internal tools originally limited by a Python-based (Streamlit) & Flask frameworks.
The Hybrid Execution:
Facilitator: nitiated and led structured cross-functional designer syncs and workshops bringing designers together from across the organization.
Designer: Defined the phasing, information architecture, and preliminary UX/UI wireframes for a new, unified data office application.
Developer: Acted as the front-end engineer to build a centralized React component library, setting up Storybook as the living documentation platform.
Teams impacted
35,000+ videos & articles
Available in
20 languages
Teams impacted
3
Context
UX within DevOps
Within a large-scale Pharmacy Benefit Management (PBM) organization, I am embedded in the Data Office specifically within the DevOps team. My role is defined by Technical Enablement and Design Operations:
Standardization: set the UI/UX standards for all Business Intelligence (BI) tools used by our 3,000+ analysts.
Custom Solutions: built in-house products, tools, and solutions that empower leadership and analysts to interact with complex data.
Tool Evaluation & R&D: Evaluate frameworks and BI tools to ensure our technical stack meets enterprise usability needs.
DesignOps Leadership: Enable designers, developers, and analysts to build their own high-quality products by providing the necessary tools, best practices, and standards to ensure speed and consistency across the enterprise.
The Problem: Production velocity was bottlenecked by a fragmented technical ecosystem. Three vital teams were operating in isolation, resulting in redundant design efforts, UI inconsistencies, and severe limitations in internal tool scalability.
"Prior to this initiative, the enterprise was suffering from severe engineering redundancy. Lacking a central source of truth, teams were hard-coding custom UI from scratch for every new application or relying on expensive external contractors for one-off builds. At an average developer cost of $100k–$150k/year, duplicating basic interface components across multiple siloes represented a massive operational deficit in both capital and sprint velocity."
Visual 1: The "Before" Architecture Diagram (The Mess)
Show a clean block diagram or system map of the fragmented ecosystem. Visualizing the three separate pillars (Consumer Team with MUI, Client Team with React, and your DevOps Team with Python/Flask) helps the reviewer instantly grasp the complexity and the waste of redundant effort.
Unified Design Ops: Established the first true UI/UX standardization framework for all Business Intelligence and internal data tools across the DevOps enterprise.
Accelerated Velocity: Reduced development friction by providing pre-coded, accessible components, drastically cutting down the time it takes to spin up new data tools.
True Technical Enablement: Empowered internal developers and data analysts to independently build consistent, high-quality products using the Storybook best practices and standards you authored.
The Process
DesignOps Maturity Framework
[01. AUDIT & ALIGN] ──> [02. ARCHITECT] ──> [03. ITERATE & VALIDATE] ──> [04. DEMOCRATIZE & SCALE]
01 Audit & Align
🧩 Visual 2: The UI Audit Component Matrix
Show a screenshot of a Figma canvas where you gathered button styles, table headers, or input fields from all three teams side-by-side.
What it proves: It visually validates the problem, proving that without a shared system, the enterprise was wasting time rebuilding the exact same core components in slightly different ways.
The Intent: Establish the baseline reality of the organization before you took action. You are proving your ability to diagnose operational friction at scale.
Core Content:
Context: Your unique placement as a UX leader embedded within DevOps and the Data Office at a massive Pharmacy Benefit Management (PBM) corporation.
The Multi-Stack Silos: Detailing the three isolated pillars operating on completely mismatched technology stacks:
Consumer Team: Holding the primary branding guidelines in React / MUI.
Client-Facing Data Team: Operating in isolated React environments.
DevOps Data Office (Your Team): Building internal analytics tools for 3,000+ analysts, constrained by Python (Streamlit) and Flask frameworks.
Visual Artifact: A system architecture map or workflow diagram showing the disconnected development loops and redundant engineering efforts across the three pillars.
he Intent: Prove your leadership and diplomacy. This section demonstrates how you unified the human elements of the organization before writing a single line of code.
Core Content:
Breaking the Silos: How you initiated and structured recurring cross-functional designer and engineer syncs.
The Alignment Strategy: Utilizing alignment workshops (Figma, Mural, Confluence) to align disparate engineering and design leaders on shared KPIs and operational goals.
The Value Prop: How you gained buy-in from all three pillars by demonstrating how a unified system would solve their specific bottlenecks, not just your own team’s.
"Rather than enforcing a disruptive, top-down rewrite that would halt product delivery, I architected a hybrid, multi-tiered technical strategy. We met the engineering teams where they were by first implementing branded design tokens directly within Python/Streamlit for rapid prototyping and internal tooling. As application logic and data density scale in complexity, products follow a structured migration path into our robust React ecosystem."
02 Architect
Coding a single source of truth
💻 Visual 3: Storybook in Action (The Bridge)
This is your hero shot. Include a clean, high-resolution screenshot of your active Storybook environment. Show a highly complex component—like a rich data table or a multi-variable filter pane—with the interactive UI preview on one side and the clean React code snippet on the other.
The Intent: Highlight your hard engineering capability and systems design expertise. This is where your hybrid "Designer + Developer" execution shines.
Core Content:
The Component Strategy: Systematically auditing and cross-referencing UI patterns across all three teams to eliminate redundancies.
The Code Execution: Moving from design files to the IDE—personally coding the centralized React component library.
The Technical Bridge: Ingesting the Consumer Team’s MUI tokens into a highly robust system capable of handling the severe data density required by deep DevOps analytics.
Living Documentation: Setting up and configuring Storybook as the interactive, production-ready source of truth for the entire organization.
Visual Artifact: A high-resolution, split-pane screenshot of your Storybook environment showing a complex data-dense component (like an advanced filter matrix or interactive data table) alongside its clean React code snippet.
The System Architecture: Detail how you began your coding journey directly in Python/Streamlit to secure quick wins for the DevOps team, before scaling into a production-ready React and Storybook environment.
The Technical Delivery: Show how you mapped out a clear pipeline: Streamlit for low-friction velocity $\rightarrow$ React for complex, data-heavy enterprise applications.
03 Iterate and Validate
Coding a single source of truth
The Intent: Prove that the system actually works under real-world pressure. In DesignOps, validation isn't just about user preference—it's about system performance, stability, and adoption.
Core Content:
Data Density Testing: How you stress-tested the components to ensure they didn't degrade application performance when pulling massive enterprise data streams for your analysts.
Internal Feedback Loop: Facilitating user testing and validation sessions with internal developers and the 3,000+ data analysts to ensure the components met enterprise usability standards.
The Refinement Cycle: Iterating on the components based on code reviews, accessibility standards (WCAG), and developer friction points in GitHub.
"Engineering adoption was driven by value, not mandate. By building on top of an actively documented foundation (Material UI) and baking robust accessibility compliance (WCAG) directly into the base code, the library became an incentive. Developers quickly realized the system eliminated the overhead of writing boilerplate CSS, allowing them to isolate, troubleshoot, and ship compliant data interfaces with significantly fewer code reviews."
The Strategic Alignment: Explain how you avoided a design bottleneck by creating a federated system where trained cross-functional developers can actively contribute back to the repository via peer reviews.
System Versatility: Explain how you handle different product needs by building variation right into the code as variables and separate stories in Storybook, ensuring the system expands gracefully rather than fracturing.
04 Democratization & Scale \
Coding a single source of truth
The Intent: The grand finale. This shows the long-term legacy of your work and the tangible business impact on the enterprise.
Core Content:
The Rollout: How the system was shipped, adopted, and integrated across all three enterprise teams.
DesignOps Standardization: Achieving 100% UI and brand consistency inside dense, complex internal DevOps tools.
Development Velocity: Drastically lowering time-to-market for spinning up new internal data products because developers no longer build from scratch.
Technical Enablement: Shifting the corporate culture by providing data analysts and developers with the precise documentation and standards needed to build autonomously.
Visual Artifact: A polished, redacted screenshot of the final core data dashboard or application in production, showcasing clean, brand-compliant data visualization at enterprise scale.
"To scale the system across three distinct organizations, I implemented a federated contribution model rather than a centralized bottleneck. We leverage a shared Figma UI kit backed by a strict review process in GitHub. Instead of suppressing cross-functional variation, we embrace calculated design divergence as system variables, documenting them as distinct, selectable 'stories' within the core component architecture inside Storybook."
📊 Visual 4: The Core Data Dashboard (The Flex)
Show a redacted, polished screenshot of the final application or dashboard used by the 3,000+ analysts. Make sure it highlights complex data dense layouts, data visualization, or filtering controls. This proves your system doesn't just look pretty—it handles massive enterprise data density without breaking.
Accomplishments
A list of accomplishments
Fig. Search flow on consumer application
Time-to-Market / Delivery Velocity: How long did it take a developer to spin up a new internal tool dashboard before your library versus after? (e.g., "Reduced initial UI development time for new data tools from weeks to days.")
Component Reuse Rate: The percentage of UI elements in the new applications that pulled directly from your Storybook library instead of being custom-coded from scratch. Aim for a high standard (e.g., "Achieved 85%+ core component adoption across new internal tooling frameworks").
Operational Scale: Keep emphasizing the scale you already have: 3,000+ analysts enabled, 3 core enterprise teams unified, across a 2-year strategic rollout.
Design Quality / Consistency QA: A qualitative metric showing the drop in UI bugs or styling inconsistencies during front-end code reviews because developers were using pre-vetted, production-ready React components.
Reflection