UX Architecture / UI Design / Pricing Box Architecture
Case Study
Architecting Complex User Decision Journeys at Scale for a Multi-Membership Event Platform
Project
This project focused on simplifying a highly complex membership and pricing ecosystem that had become difficult for users and internal teams to navigate. The challenge extended far beyond visual design. It required architecting clearer user pathways, reducing cognitive overload, and translating layered business logic into an experience users could move through with greater confidence and clarity.
The initial vendor-built website launched with only two pricing tiers: Member/Non-Member. However, the organization’s actual business model required six membership tiers, multi-track events, member-only pricing, and multiple event formats.
I rebuilt the Pricing Box architecture, modeling legacy CUNA pricing logic into a unified and scalable system for America’s Credit Unions capable of handling 180+ pricing permutations.
This component touched every event, every membership tier, and every revenue pathway, making its accuracy mission-critical.
Highlights
- Architected a fully new pricing system post-launch, supporting 180+ pricing permutations across 6 membership tiers
- Modeled multi-tier membership logic across in-person, virtual, and on-demand events
- Defined complete requirements, including time-based rules for full automation, use cases, override and acceptance criteria
- Restored mission-critical pricing functionality missing from the vendor-built launch, enabling accurate revenue display across all event formats
Roles
- UX Architecture & System Design
- Requirements Strategy & Documentation
- Logic Modeling & Flow Definition
- Cross-System Data Mapping (CRM → CMS → UI)
- Edge Case & State Definition
- UX Demo Validation
- Cross-team engineering alignment
Company
America’s Credit Unions
The Background
In October 2024, the new americascreditunions.org website launched following the merger of CUNA and NAFCU into America’s Credit Unions. The site was built by external vendors—development, UX/UI design, business analysis, project management, and supporting teams.
By November 2024, it was clear that America’s Credit Unions required its events and training programs to showcase the full range of pricing structures available to members. As the Senior UX Designer & Researcher at CUNA for 4 years, and having architected CUNA’s previous event and training registration, I was asked to architect a new solution for America’s Credit Unions.
I rebuilt the Pricing Box architecture from the ground up, restoring the full complexity of CUNA’s logic and reformatting it to match the new brand, structure, and platform constraints.
During the transition, one critical issue emerged:
The vendor-built site launched with only two pricing states (Member / Non-Member), but the real business model required:
- 6+ membership tiers
- Councils Member only pricing
- League and Small CU pricing
- Training subscription pricing
- Multi-format events (In Person, Virtual, On Demand)
- Multi-track events (years 1–3, pre-conference tracks, etc.)
- Early bird vs regular pricing
- Overrides, disclaimers, and state rules
The majority of this functionality was either missing or inadequately implemented at the time of launch.
Problem Space
The challenge wasn’t just redesigning a UI; it was reconstructing a pricing model that had been fragmented across legacy systems.
The Merger Gab
The merger created unique challenges:
- Legacy CUNA pricing logic was not documented in a way that vendors could interpret.
- The new site launched with only a fraction of the required functionality.
This meant the site could not accurately display all pricing structures for most events. The business model and the UI were disconnected.
Scope of Responsibility
Recreate a fully functional pricing engine, within the constraints of a newly established design system, while ensuring the UI remained clear, predictable, and scalable.
Architectural Constraints
The solution needed to:
- Fit cleanly inside the design system
- Be fully responsive
- Use brand rules
- Work with existing Nimble CRM fields
- Integrate with Drupal’s content types
- Allow authors to manage disclaimers via taxonomy
- Support overrides without engineering involvement
- Present a UI that users could understand instantly
- Incorporate all 180+ pricing permutations
This was a logic problem inside a design constraint, not simply a UI redesign.
Problem Space Architecture
A mind map reveals the logic pathways at a glance—illuminating the relationships within the pricing permutations and making a highly dimensional system immediately discernible.
This map documented the multidimensional pricing variables; the foundation for a stable UI/UX architecture.
Approach & Process
Legacy Mapping
I reverse-engineered CUNA’s pricing logic, documenting:
- all membership pricing rules
- track-level logic
- all combinations of formats × tracks × membership tiers
- early-bird conditions
- business-driven edge cases
- button states
- past inconsistencies and pain points
This became the baseline for the new architecture.
Defining a New Pricing Architecture
Top Row – Disclaimers
- Early bird always in the top row, first position
- Dynamic taxonomy-driven disclaimers
- Placement rules for 1–6 disclaimers
- Responsive stacking
Override Disclaimer Row
- This row was held for special disclaimers, such as events selling out early or any special information about this particular event.
Product Card
- Format Tags
- Membership groups
- Early bird logic
- Product code
- Disclaimers
Bottom Row – Disclaimers
- Held up to 3 disclaimers
- Dynamic taxonomy-driven disclaimers
- Placement rules for 1–6 disclaimers
- Responsive stacking
Button Row
- Auto-generated based on available formats
- Priority order: In Person → Virtual → On Demand
- Override logic
- Automatic label changes:
- “Preorder On Demand”
- “Order On Demand”
- “Sold Out”
- “Join Waitlist”
This structure balanced:
- clarity
- predictability
- responsive behavior
- business needs
- technical feasibility
Data Mapping: CRM → CMS → UI
I spent time remapping Nimble Fields for a more robust field mapping:
- Format comes from Attribute
- Product Name comes from Short Description
- Active Price is dynamic (default or early bird)
- Inactive Price appears only when Early Bird is active
- Disclaimers come from taxonomy
- Buttons come from format + date logic
This eliminated inconsistencies and ensured the UI accurately reflected CRM data.
Modeling All Use Cases
I authored all use cases and acceptance criteria — more than 14 UI states, including:
- Council-only event
- Single-format event
- Multi-format event
- Multi-track school
- Mixed early-bird / non early-bird products
- On-Demand only
- Sold Out
- Join Waitlist
- Hidden member or non-member pricing states
Each use case contained:
- preconditions
- expected output
- button behavior
- disclaimer rules
- price mapping logic
Engineering relied heavily on these documents for build accuracy.
Responsive Structure
I architected responsive behavior that matched brand requirements:
- Vertical dividers on desktop → horizontal dividers on mobile
- Membership groups wrap intelligently on small devices
- Disclaimers stack and left-align at mobile breakpoint
- Buttons compress into a predictable 1-column layout
This ensured usability did not degrade at smaller viewports despite the complexity.
Logic Complexity
A simplified view of the system I architected.
- 180+ possible price states
- 14+ UI state variations
- 6 membership tiers
- Up to 6 disclaimers displayed simultaneously
- Multi-track support
- Dynamic format-based buttons
- Time-based logic (early bird → regular)
- Override logic
- Data-driven CRM → CMS → UI mapping
This was not a design task.
This was systems architecture.
System Architecture & Component Diagrams
These diagrams capture how logic, layout, and component behavior intersect to create a predictable and scalable pricing experience.
Collaboration & UX Demo Process
I partnered with engineering to:
- Review UX demos for every state
- Confirm accurate implementation
- Validate responsive behavior
- Ensure overrides functioned correctly
- Correct mismatches between CRM data and UI output
- Clarify edge cases and fallback conditions
If a demo did not meet the logic requirements, I returned the Jira ticket with clear instructions for correction before it moved to QA.
This ensured predictable, accurate implementation.
Outcome
- Restored full pricing functionality missing from the vendor-built launch
- Enabled America’s Credit Unions to display all membership tiers and event formats accurately
- Introduced a clear, scalable, maintainable pricing architecture
- Reduced engineering ambiguity with reliable acceptance criteria
- Improved CMS authoring flow
- Built a reusable logic framework that can be scaled for future events and systems
- Strengthened cross-team alignment
- Ensured pricing accuracy without needing UI redesign
The solution directly supported revenue, membership clarity, and organizational trust.
Reflection: What This Project Shows About My Architectural Approach
This project reflects the following strengths:
- Understanding business rules deeply
- Translating ambiguity into structure
- Modeling highly complex logic into clear, buildable requirements
- Creating predictable systems that engineering can execute
- Governing design patterns to ensure long-term consistency
- Seeing what others miss in multi-system environments
In a period of organizational chaos and incomplete vendor handover, I provided clarity, structure, and the architecture required to restore America’s Credit Unions’ event pricing functionality. Complex problems require clarity. This system was designed to give the organization exactly that.
Architecture • Clarity • Purpose
