📋 Client wanted a merchant-first website for SuperCheckout that clearly highlights the 4 core products right in the hero section, each with a distinct visual identity to convey its purpose at a glance. The priority was to make the site feel business-oriented, similar to how Stripe speaks to merchants rather than end users. Beyond the hero, the site needed dedicated product pages, each designed as a detailed walkthrough to explain the value, features, and use-cases of the individual products in depth.

🛠️ Execution

1. For the Hero section, I designed a scroll-based animation where the journey starts with a phone mockup displaying Stack & Pay, complemented by floating visual elements and a clear tagline. As the user scrolls, the hero remains sticky and seamlessly cycles through three more iterations — one for each of the remaining SuperCheckout products. With each cycle, the floating elements and title adapt to highlight that product’s purpose, making the hero both engaging and informative. To improve accessibility and navigation, I added a dock at the bottom of the hero, allowing users to directly jump to any product showcase within the hero itself.

2. Below the hero, the flow continues into a clean UI dashboard that represents what merchants will actually use. Following this, there’s a section focused on merchant benefits, clearly communicating why SuperCheckout matters for businesses, and then a developer-focused section emphasizing ease of integration and technical advantages. After that, an FAQ section helps resolve common queries, and the page concludes with a strong CTA. This flow is designed to mirror a merchant’s thought process — from understanding the products, to assessing benefits, to clarifying doubts, and finally, taking action.

3. Each product also has its own dedicated page, following a consistent split-screen pattern layout. On the right, a phone mockup stays sticky, while on the left, explanatory text scrolls step by step. As users scroll, the phone screen dynamically updates to visually represent the product feature being explained (Stack & Pay, etc.), creating a synchronized visual + textual storytelling experience. This ensures clarity and leaves no space for confusion, giving merchants confidence in the product.

4. In addition, I set up a Solutions page powered by CMS to dynamically manage and expand real-world use-cases, and a Blog page, also CMS-managed, to support ongoing education, announcements, and SEO growth.