BABA_Membership_Wireframe.html
Page
1
/
1
100%
BABA Membership Page — Wireframe
Displaying BABA_Membership_Wireframe.html.
Wireframe Legend
Nav / Chrome
Visibility & Promotion
Knowledge & Resources
Community & Connection
Collaborative Opportunities
CTA / Action
① Hero — Above the Fold
Become a Member ↗
Stay in the Know
[ Baltimore Ave
photography or
corridor illustration ]
photography or
corridor illustration ]
① Both CTAs visible without scrolling. "Become a Member" is primary (high contrast). "Stay in the Know" is secondary. Opening statement text goes in left column — see Section ② for copy placeholder.
② Opening Statement
[ COPY TBD — 2–3 sentences. Lead with corridor identity, then membership value. See separate copy doc. ]
③ Membership Dues — Prominent Pricing
Monthly
$25
per month
Become a Member ↗
Annual — Best Value
$250
per year
15% savings
Become a Member ↗
③ Annual plan visually emphasized (badge, border). Each card has its own CTA button linking to Google Form — so members can convert here without scrolling further. Repeat CTAs reduce drop-off.
④ Member Benefits — Alternating Layout
Visibility & Promotion
Get Seen on Baltimore Ave
See ad rates ↗
[ Photo: storefront /
signage / corridor street ]
signage / corridor street ]
④a "See ad rates ↗" appears as an inline hyperlink on the 20% discount line — not a button. Keeps it contextual and non-salesy. Links to BABAMAG ad rates page.
[ Photo: workshop /
speaker / event ]
speaker / event ]
Knowledge & Resources
Grow Your Business
④b Image swaps to left side — creates visual rhythm as user scrolls. Continue alternating for each remaining category.
Community & Connection
Build Real Relationships
[ Photo: community event /
gathering / meetup ]
gathering / meetup ]
[ Photo: collaborative /
activation / Philthy Paws ]
activation / Philthy Paws ]
Collaborative Opportunities
Do More Together
Eligibility
⑤ Qualification moved to bottom — after value is established. Styled as fine print / secondary text. "See map" links to service area map.
⑥ Repeat both CTAs at the bottom for users who scrolled the full page. Final chance to convert. "Become a Member" links to Google Form. "Stay in the Know" links to newsletter signup.
Designer Notes & Conversion Logic
①
Hero: Both CTAs must be visible without scrolling on desktop. Primary CTA ("Become a Member") highest contrast. Secondary CTA ("Stay in the Know") captures fence-sitters into the email funnel.
②
Opening Statement: Copy TBD — 2–3 sentences. Lead with corridor identity, not features. This is the emotional hook before the transactional content.
③
Dues Pricing: Displayed before benefits to set expectations early. Annual plan visually elevated (badge, colored border). Each card has its own CTA — reduces friction for ready buyers who don't need to scroll.
④
Benefits — Alternating Layout: Text and image alternate sides (left/right) across the four categories. Each category has its own accent color (see legend). Non-bullet visual treatment — icon + name + description per item. The 20% ad discount is listed first under Visibility & Promotion with an inline "See ad rates ↗" hyperlink. Not a button — keeps it informational, not salesy.
⑤
Qualification: Moved below the benefits. Small-print treatment. Avoids leading with gatekeeping before value is established.
⑥
Bottom CTA Strip: Repeat of hero CTAs for users who scrolled to the end. Short closing headline + both buttons. Dark background matches hero — creates a visual bookend to the page.
