Launch Next.js Sites 10x Faster with Animated Components
Launch Next.js Sites 10x Faster
©March 2024
Country
Ghana, West Africa
Link
Live projectIndustry
Finance
Published
©2025
Deliverables
- WEB DESIGN
- BRAND IDENTITY
- PRODUCT DESIGN
- BRAND STRATEGY
Challenge
Astrae is a Next.js landing page template and component library. By the time they engaged Reframe Labs, the marketing site had grown organically but suffered from an outdated layout, inconsistent components, and no scalable blog CMS. Despite a strong content pipeline, mobile performance and conversions lagged behind benchmarks.
Key challenges I identified:
- ⬥ Slow load times and heavy assets causing high bounce rates; poor Core Web Vitals on mobile.
- ⬥ Inconsistent branding and fragmented component styles that reduced trust and readability.
- ⬥ No first-class blog CMS—content updates required code deploys; limited editorial workflow and preview.
- ⬥ Leaky conversion funnel: unclear CTAs, multi-step sign-up, and no affiliate tracking to attribute referrals.
Our goals were to elevate the user experience and growth engine with:
- ⬥ A modern, responsive landing experience built from a cohesive component library.
- ⬥ A Sanity-powered blog CMS with content modeling, previews, and role-based workflows.
- ⬥ Conversion-optimized CTAs and a streamlined sign-up flow integrated with Lemonsqueezy.
- ⬥ Performance and SEO overhaul: image optimization, semantic markup, and measurable Core Web Vitals gains.
I also had to preserve SEO equity during migration—maintaining URL structures, mapping content 1:1, and shipping redirects to avoid ranking volatility.
Team Astrae partnered with Reframe Labs for our blend of product-led design, high-performance Next.js builds, and pragmatic growth focus.
My Solution
I began with a 2-week discovery sprint—analytics audit, content inventory then shipped a cohesive visual system: typography, spacing, and components that express Astrae’s brand with clarity and speed.
On the build, I upgraded to Next.js App Router, implemented route-level caching and image optimization, and introduced Sanity as the CMS. Editors now draft, preview, and schedule posts without code changes; reusable MDX-style components handle callouts, embeds, and code snippets.
For growth, I redesigned the pricing and sign-up journey, integrated Lemonsqueezy checkout and affiliate attribution, and instrumented events for end-to-end funnel visibility. Technical SEO (schema, sitemaps, meta) plus performance budgets brought Core Web Vitals comfortably within targets.
Here’s a brief overview of the transformation I achieved for Astrae in each aspect:
Before & After:
Transformation Results
| [ Metric ] | [ Before ] | [ After ] | [ Improvement ] |
|---|---|---|---|
| Page Load Score | 42/100 | 95/100 | +126% |
| Mobile Performance Score | 44/100 | 97/100 | +120% |
| SEO Score | 66/100 | 96/100 | +45% |
| Accessibility Score | 76/100 | 100/100 | +32% |
| Best Practices Score | 78/100 | 100/100 | +28% |
| Core Web Vitals - LCP | 5.6 seconds | 1.9 seconds | 3× faster |
| Core Web Vitals - FID | 310ms | 65ms | 79% improvement |
| Core Web Vitals - CLS | 0.28 | 0.07 | 75% improvement |
| Bounce Rate | 64% | 39% | 39% reduction |
| Average Session Duration | 1:18 minutes | 2:52 minutes | +119% |
| Organic Traffic Growth | Baseline | +172% in 6 months | +172% |
| Conversion Rate | 1.9% | 5.4% | +184% |
| User Engagement Score | 6.1/10 | 9.1/10 | +49% |
Feel the difference
Business Impact
| [ Metric ] | [ Before ] | [ After ] | [ Improvement ] |
|---|---|---|---|
| Monthly Website Visitors | ~1.4k visitors/mo | ~3.8k visitors/mo | +171% |
| Leads Generated | ~360 | ~980 | +172% |
| Subscription Conversion Rate | 1.9% | 5.4% | +184% |
Sorkuwuli Zulkanir
[ Founder Astrae ]
