DESIGN BRIEF · PAVILION · LANDING PAGE V1
Hi Aqsa — here's everything you need to design the Pavilion landing page.
Pavilion is a native iOS cricket app focused on T20 leagues (IPL, MLC, The Hundred). The differentiator is glanceable score updates — Live Activities on the lock screen and Dynamic Island. The landing page is the social-share destination instead of a raw App Store link. iOS users tap through to download; Android users sign up for launch notifications.
Resources
START HERE — EVERYTHING YOU NEED IS LINKED BELOW
The product, in one paragraph
CONTEXT YOU NEED BEFORE DESIGNING
What Pavilion is
A native iOS app for serious T20 fans who can't watch matches live — they're at work, in meetings, on the train. Pavilion makes the score glanceable: Live Activity on the lock screen, Dynamic Island ticker, Apple Watch complication, CarPlay surface. You don't open the app to check the score — the score comes to you.
Native, ad-free, simplified. The opposite of CricInfo and Cricbuzz, which are media-first, browser-wrapped, and ad-heavy.
Who it's for
Primary: NRIs and global tech professionals — people who follow Indian cricket from Sydney, San Francisco, London. They have iPhones, they care about UX, they're willing to pay for the absence of ads.
Secondary: Indian tech professionals in Bangalore, Hyderabad, Mumbai. Same psychographic, local market.
The landing page should feel like it was made for them — not for the mass cricket audience.
Landing page structure
FIVE SECTIONS, IN THIS ORDER — START WITH LOW-FI WIREFRAMES
01
Hero — Lock screen demo
The hero must show the Live Activity on a lock screen and / or the Dynamic Island. This is the entire pitch. Don't bury it. Don't decorate it. Show the score updating on a phone — that's the wow.
- One headline, one supporting line, one primary CTA (App Store / email).
- Device mockup with a real-feeling fixture (e.g. India vs Australia, not "Team A vs Team B").
- No carousel. No autoplay video that asks for sound.
CRITICAL
Above the fold
Device mockup
02
Download section
Two paths, detected by user agent if possible, otherwise both visible side-by-side.
- iOS users: direct App Store badge → deep link.
- Android users: email signup → "We'll let you know when it's ready."
- Form fields: email (required), full name (optional), "what are you excited about?" (optional, short text).
CTA SURFACE
User-agent split
03
Features showcase
Three to five features, each with a phone mockup. Lead with the differentiators, not table-stakes.
- Live Activity / Dynamic Island (the lead).
- Batting & bowling scorecards — clean, native, breathable.
- Smart notifications — wickets, boundaries, milestones.
- Watch complication + CarPlay surface (these alone are a moat).
Phone mockups
Real screenshots
04
FAQ — separate page
Not on the home page. Lives at /faq. Linked from the footer. Use generic Q&A placeholders — I'll populate the actual content later.
Separate route
05
Privacy policy — separate page
Already live at getpavilion.app/privacy — content is set, just needs adapting to your design system. Plain, scannable, no walls of text.
Compliance
Page stack at a glance
HERO · Lock screen demo + primary CTA01
Download · iOS badge + Android email02
Features · Live Activity, scorecards, notifications, Watch / CarPlay03
Footer · links to /faq, /privacy, social, email—
Brand
EVERYTHING LIVES IN THE BRAND KIT
Logo, type, palette — all in the brand kit: pavilion-brandkit.lime-4951.workers.dev
Beyond logo + type + core palette, you have full creative latitude. The brand kit is the floor, not the ceiling.
Hard constraints
THINGS TO KNOW BEFORE YOU START — SOME ARE LEGAL
NO
No team brand names. "CSK," "Mumbai Indians," "Sunrisers" — all copyright-restricted. We can show country names (India, Australia, England) and scores. Plan mockups around that.
NO
No Test cricket, no ODIs. T20 leagues only. The page shouldn't imply broader coverage.
YES
SEO matters. This is a public marketing page. Loading speed and crawlability are real constraints.
How we'll work
ITERATIVE, SECTION-BY-SECTION, WHATSAPP IN BETWEEN
Your preferred flow — low-fi wireframes first, then high-fi after structure is approved — works perfectly for me. I'd rather sign off on the bones before we paint anything.
STEP 01
Materials review
You read this brief, scan the brand kit, browse the Canva inspiration, install the TestFlight build. Quote me on scope.
STEP 02
Low-fi wireframes
Section-by-section structure. I sign off on each before you move on. Saves us redoing layouts in colour.
STEP 03
High-fi designs
Full visual design in Figma. Same section-by-section cadence. Animations spec'd inline.
STEP 04
Handoff to code
Figma file with components and tokens. I build in code using Claude MCP — no Framer export needed.
What I owe you · What you owe me
FIRST-WEEK ACTIONS
Aqsa → Mudassir
- Install the TestFlight build. Feel the Live Activity on lock screen. The page sells that feeling.
- Browse the Canva whiteboard — especially the onboarding screenshots, note which references you'd pull from.
- Quote for the scope above.
- Build with placeholders — don't get blocked waiting on images / screenshots from me. Ship the layout, we'll swap assets in later.
- If it'd help your AI agents translate visuals into code, I can hand over the actual SwiftUI files — just ask. Otherwise images are fine.
- Low-fi wireframes for Section 01 (hero) to kick off the review loop.
- Follow-up call once materials are absorbed.