Role: UI design + front-end implementation

Context: Simpler Trading — membership offers. This is that production behavior, rebuilt here with a sample offer.

The decision

A buyer comparing memberships has to see the plan difference, the price, and the primary action in one view, and pick a billing period without leaving the module.

What I owned

• The layout: period tabs, a card per plan, the price, the feature list, and one primary action. The popular plan is marked in the card, not in a paragraph beside it.
• The JavaScript that switches Monthly, Quarterly, and Annual and keeps the same cards in place.
• The release. The module shipped as a piece marketing can drop onto a campaign page.

On the offer page

How someone else reuses it

A new promo changes the plans, the prices, and the feature lines. The tabs, the card, and the action stay. That promo does not start as a new page layout.

Shipped

OfferCompare takes the billing periods and the plans. Each plan is a name, a price per period, the features, and which action is primary. The selected period is state. The cards wrap when the row runs out of room. The next offer passes new plan data into the same component. The preview on this page uses this site system: the type, the accent, the surfaces, and the shared button.

Skills demonstrated: Offer UI, component design, HTML/CSS/JS, marketing web systems.