The Movement Athlete · iOS & Android · build spec
“Upgrade to Premium” — screen rebuild
A UI-only change to an existing screen. Purchase, restore, terms, analytics and RevenueCat are already wired — nothing here asks you to integrate anything. Three shipped states, one component.
01 Why this screen is being replaced
Each plan currently shows a large unit price — $8 / week and $6.4 / month. Those strings are byte-identical on a UK device and on a device charging in pesos, while the amount actually charged changes underneath them. They were hardcoded into the layout and never bound to the store product.
The screen argues against the annual plan
As displayed, quarterly reads as 5.4× the yearly. What is actually charged makes it 1.26×. The value ladder runs backwards.
Two currency symbols on one price
The removed Lifetime card rendered a stray $ followed by ₱58,000.00. Same root cause: display strings that were never bound to the product.
02 The three states
Same layout, same components, same code path — only the price source changes. Tap the plan tiers inside any phone: the dock and timeline re-price live, which is the behaviour to reproduce. The switcher stays with you as you scroll.
Three states of the same component — switch between them here. Tap the plan tiers inside the phone: the dock and timeline re-price live.
Get strong, lean, mobile & pain-free for life
while learning over 100 calisthenics skills at home
★★★★★ 4.8 member rating100,000+ membersA personal trainer runs $60–100 a session · AI coaching apps $149/mo · your plan: $0.44 / day ✓
You won't be charged for 7 days
Full access from today. Cancel any time before your trial ends and you pay nothing at all — no part-charge, no catch.
— Jesse, Head Coach
Restore purchases · Terms of Use · Privacy Policy
Get strong, lean, mobile & pain-free for life
while learning over 100 calisthenics skills at home
★★★★★ 4.8 member rating100,000+ membersA personal trainer runs $60–100 a session · AI coaching apps $149/mo · your plan: $0.22 / day ✓
Feel stronger in 60 days — or your money back
Train for two months. If you don't feel the difference, email us and we'll make it right.
— Jesse, Head Coach
Restore purchases · Terms of Use · Privacy Policy
60-day money-back guarantee — email us and we'll make it right
- Monthly is not discounted — the full-price ramp is what makes the struck prices mean something.
- The renewal price appears three times — hero, timeline, dock — and re-binds when a ramp is selected.
- Deadline stated once in the eyebrow, computed from a real campaign end date. No countdown timer.
Get strong, lean, mobile & pain-free for life
while learning over 100 calisthenics skills at home
★★★★★ 4.8 member rating100,000+ membersA personal trainer runs $60–100 a session · AI coaching apps $149/mo · your plan: $0.31 / day ✓
Feel stronger in 60 days — or your money back
Train for two months. If you don't feel the difference, email us and we'll make it right.
— Jesse, Head Coach
Restore purchases · Terms of Use · Privacy Policy
60-day money-back guarantee — email us and we'll make it right
- Monthly is not discounted — the full-price ramp is what makes the struck prices mean something.
- The renewal price appears three times — hero, timeline, dock — and re-binds when a ramp is selected.
- Deadline stated once in the eyebrow, computed from a real campaign end date. No countdown timer.
03 Rules
Five rules. The first is the reason this work exists; the rest prevent the same class of defect returning in a new form.
No price literal anywhere in the UI
Per-day, per-week, charged amount, struck-through list price and renewal price all derive from the localised store product at render time. If offerings fail to load, render the retry state — never a fallback price.
Please don’t stub literals during development and rely on removing them later; as far as we can tell that is how the current defect arrived.
A discount must map to a real product
Neither store applies an arbitrary percentage at runtime. Each promo state needs a StoreKit introductory/promotional offer or a Play base-plan offer resolving to a genuine price point. Faked in the UI, the strikethrough becomes a false price claim and the charge won’t match.
A discount and a free trial can’t both be the introductory offer
One introductory offer per subscription group. Both promo states therefore ship without any trial copy — which is why their CTA, timeline and risk-reducer all differ from the full-price state.
Confirm against our own StoreKit configuration before building.
The timeline and dock bind to the selected tier
Select the 3-Month plan and the timeline must read “Day 7 — $49.99 charged” and the dock must re-price. Static text here states a price the user is not about to be charged — the same fault as the hardcoded unit prices.
One percentage per state, applied to both tiers
Never mix rates within a state. A 50% annual beside a 30% quarterly reads as two offers and asks the reader to work out which is better — they won’t.
04 Platform requirements
Required on the purchase screen
Terms of Use and Privacy Policy links (in the legal row at the end of the scroll), Restore purchases reachable, and the renewal price and term in plain text before purchase.
⚠️ The nav block in the component is a stand-in for the existing coral header. Delete it only if that header already carries a Restore control.
System type, system sheet
SF Pro via the system stack — never a bundled webfont. The charge itself runs through Apple’s payment sheet, so the CTA’s claim must match the configured offer exactly, or the sheet contradicts the button that opened it.
Two known differences, both intentional
The hero’s teal glow is iOS-only — RN shadows don’t render on Android, which ships the teal border and gradient fill as the selected state. Use react-native-safe-area-context for the dock inset; RN’s built-in SafeAreaView is a no-op on Android.
Read it from the product, don’t hardcode it
Pass trialDays from the introductory-offer period. One number drives four strings — the “FREE for N days” title, the dock, the “Day N” timeline labels and the trial-end date. Hardcoding means a change in App Store Connect silently makes the screen lie about the charge date.
05 Every figure
🔴 The on-card SAVE chip measures against list price in the promo states (50% = $80.00, 30% = $48.00) and against paying every 3 months in the full-price state (20% = $39.97). The last column below is always the 3-Month comparison. Per-week on 52 and 13; per-day on 365 and 91; first-year cost is the annual price, or the 3-month price × 4. Every promo price is an exact percentage of list, so each maps to a real store price point. Renewal is always the full list price.
| State | Tier | Charged | Per week | Per day | First year | Saving vs 3-Month |
|---|---|---|---|---|---|---|
| A · full price + 7-day trial | 12-Month | $159.99 | $3.08 | $0.44 | $159.99 | $39.97 |
| 3-Month | $49.99 | $3.85 | $0.55 | $199.96 | ||
| B · 50% off no trial | 12-Month | $79.99 | $1.54 | $0.22 | $79.99 | $19.97 |
| 3-Month | $24.99 | $1.92 | $0.27 | $99.96 | ||
| C · 30% off no trial | 12-Month | $111.99 | $2.15 | $0.31 | $111.99 | $27.97 |
| 3-Month | $34.99 | $2.69 | $0.38 | $139.96 |
US price points shown. Every other storefront renders its own localised figures from the same product objects — these are here so you can verify the arithmetic, not to be typed into the UI.
06 Measurements
| Element | Size | Notes |
|---|---|---|
| Screen | 390 × 844 | Status bar 47 · nav 44 · home indicator 34 · usable 719, scrolls |
| Content gutter | 24 | Both sides; nav and dock share it |
| Headline | 29 / 1.1 | Weight 750, tracking −0.028em, sentence case |
| Sub-headline | 13 / 1.4 | rgba(255,255,255,.55) |
| Proof row | 56 | Avatar strip 28px + two-line lockup; 9% hairlines above and below |
| Hero card | — | Radius 16 · padding 14/16/15 · teal border 45% + 3px soft ring · ✓ SELECTED chip 18h at top −9 |
| Hero price | 44 / 800 | Tabular numerals, tracking −0.04em |
| Ramp | 58 | Radius 12 · padding 0 14 · gap 8 · ✓ chip 17px when selected · two-line right column |
| Timeline dot | 11 | Connector 1.5 wide at x = 4.75, from y = 13 to the next dot |
| Dock button | 48 | Radius 12 · padding 0 22 · weight 900, beside the info block |
| Section spacing | 26 | Between below-fold blocks, with a 8%-white hairline. Within a block: 8–16 |
| Tap targets | ≥44 | The whole tier card is the target, not just the radio |
07 Tokens
| Role | Value | Where |
|---|---|---|
| Surface | #0E1526 | Screen ground + dock — matches the existing page below |
| Card | rgba(255,255,255,.045) | Ramps, timeline; 10%-white borders |
| Teal | #00D4AA | Selected tier, ✓ chips, timeline, seal accents, savings figures |
| CTA | #FFB000 | Dock button · pressed #F59E0B |
| CTA text | #0A0A0A | Dark, never white — white on gold fails AA |
| Body | #A8B4CC | Sub-headline, timeline body |
| Muted | #8593AD | Trust microcopy, anchor line |
| Header | coral gradient | The existing app header — untouched, out of scope |
- Selected tier: 1px
#00D4AAborder, 158° gradient fill 11%→3.5%→transparent, 3px ring at 10% + 30px drop shadow. - All prices
font-variant-numeric: tabular-nums— the per-week column only reads as a ladder if the digits align. - De-emphasise with a muted colour, never reduced opacity (it drops contrast under 4.5:1 and reads as disabled).
08 Copy
| Slot | A · full price | B / C · promo |
|---|---|---|
| Headline | Get strong, lean, mobile & pain-free for life — “pain-free” in teal, never breaking mid-word | |
| Sub-headline | while learning over 100 calisthenics skills at home | |
| Proof row | ★★★★★ 4.8 member rating / 100,000+ members | |
| Hero | 12-Month plan · price locked all year The full transformation — and your price locked all year. Try it FREE for {n} days {zero} due today then {perWeek}/week · {perDay}/day · billed {price}/year Free until {today + n}. Cancel before then and pay nothing — no charge at all. | 12-Month plan · usually {list}/yr The full transformation — and your price locked all year. {pct}% off your first year {price} due today that’s {perDay}/day for a full year Renews at {list} from year two. Cancel anytime. |
| Ramp | 3-Month plan / One full phase · {perWeek}/wk · {charged} | |
| Divider | START ON A SHORTER PLAN | |
| Saving bar | {diff} saved in your first year 12 months, paid once — {annualYear} Every 3 months × 4 — {rampYear} (muted; it is the losing option, not a second offer) | |
| Comparison | A personal trainer runs $60–100 a session · AI coaching apps $149/mo · your plan: {perDay} / day ✓ — the PT figure is a RANGE by design; do not narrow it to a single number | |
| Timeline | HOW YOUR FREE TRIAL WORKS Today — Full access. Nothing to pay. Day {n−2} — We remind you the trial is ending. Day {n} — {price} charged, unless you cancel. | WHAT HAPPENS WHEN YOU TAP Today — {price} charged. Full access straight away. In {term} — Renews at {list}, unless you cancel. |
| Guarantee seal | You won’t be charged for 7 days. Full access from today. Cancel any time before your trial ends and you pay nothing at all — no part-charge, no catch. — Jesse, Head Coach | Feel stronger in 60 days — or your money back. Train for two months. If you don’t feel the difference, email us and we’ll make it right. — Jesse, Head Coach |
| 🔴 Why the wording differs from the website. Only Apple can refund an in-app purchase — the user requests it at reportaproblem.apple.com, within ~90 days, and Apple decides case by case. So the web’s “one email gets you a full refund, no questions, no forms” is not true in-app and was removed. In the trial state the platform itself guarantees no charge, which is stronger. In the promo states the promise stays but the mechanism is honest — and it commits support to make good by whatever route works (Apple refund request, or compensation on our side). | ||
| Members wall | A few of the 100,000+ members | |
| Press | AS FEATURED IN — leAD Sports Accelerator · Forbes · AMC · NewsWatch | |
| Dock | FREE for {n} days — {zero} today / cancel anytime → Try free | {pct}% off — {price} today / cancel anytime → Get {pct}% off |
| Trust + legal | 60-day money-back guarantee (promo states only — nothing is charged at trial start) · Restore purchases · Terms of Use · Privacy Policy | |
Three strings from the live screen do not come back: the “most effective bodyweight strength training on earth” panel and “you will see results. Guaranteed.” stay exactly as they are — do not edit them. The seven broken strings listed in COPY_FIXES_BELOW_FOLD.md are the only copy changes below the fold.
09 Assets
| File | Source size | Where it renders |
|---|---|---|
members-strip.png | 480 × 98 | Proof row, 28pt tall |
members-wall.webp | 960 × 438 | After the guarantee seal, full content width |
partner-logos.png | 624 × 71 | After the wall, 92% width at 62% opacity |
All three ship at @1x/@2x/@3x in the package. The guarantee shield is an emoji placeholder — replace with the 34×34 teal SVG via react-native-svg.
10 Acceptance — on device
- Fresh install, offerings load → prices match App Store Connect for that storefront’s currency
- Airplane mode → retry state, no prices rendered
- Tap each tier → hero visibly deselects (✓ chip moves), dock and timeline re-price
- VoiceOver → tiers announce name, price and selected state; all targets ≥44pt
- CTA → Apple’s payment sheet shows the same trial and price the screen claimed
- Restore works signed-out → signed-in
- Terms and Privacy open
- Below the dock, the existing “What you get” content renders unchanged
- Second currency checked (not just USD) — this is the defect being fixed
Scope: the tier block and everything above it, plus seven string fixes below the fold. The testimonial carousel, transformation photos, feature panels and FAQ are unchanged. Prices shown are US; all figures render localised from the store on device.