PORTFOLIO CASE STUDY: Supercharge Growth On-Demand Growth Marketing for Startups Webflow Design & Development  |  CMS Blog & Resources  |  FLEX Subscription Product Page  |  Multi-Page Marketing Site

 

Client: Supercharge Growth International Limited

Role: Full design & Webflow development

Platform: Webflow (CMS-driven)

Industry: Growth Marketing / Startup Services

Supercharge Growth is a startup-focused growth marketing agency that provides on-demand, fractional, and full-time marketing talent to early-stage companies. Founded by Rebecca Yip (a former SaaS founder), the company positions itself as a network of 2,000+ T-shaped growth marketers from top global companies, offering services across 12 marketing disciplines — from growth strategy and SEO to paid social, outbound marketing, and founder branding.

I designed and developed the entire Supercharge Growth website in Webflow, including the long-form homepage, About page with founder story and company values, Services page with 12 service cards, the FLEX subscription product page (a standalone landing page for their marketing-as-a-service offering), a CMS-powered resources section with category filtering (News, Playbooks, Articles), team member profile pages, and a contact page. The site also includes a mega navigation with dropdown menus for Services and Resources sub-pages.

The primary goal of the site is to convert startup founders into leads — either through a “Get in touch” contact form or by booking a call via Calendly (used on the FLEX page). The design needed to communicate credibility, urgency, and a founder-friendly tone across every page.

The homepage is a long-form conversion page that introduces the Supercharge Growth brand, establishes credibility, explains the service model, and drives visitors toward contact. Key sections include:

Hero section with headline (“Scale Your Startup Today With Supercharge Growth”), subheadline, dual CTAs (“Learn More” and “Hire my growth marketer”), and a large brand illustration. A separate mobile hero variant uses a different layout and image optimised for smaller screens.

Logo bar — “Our Marketers are from top global companies” section displaying 5 company logos as credibility signals.

Key stats row — four metrics displayed as large numbers: 15+ Years of experience, 100-Day high-impact journey, 2K+ Growth Marketers in the network, 500+ Business campaigns launched.

Services grid — “Let our on-demand marketers help with...” section featuring 12 service cards (Growth, Branding, SEO, Social Media, Content, Paid Search, Paid Social, Outbound Marketing, Founder Branding, CMO, Graphic Designer, Email), each with a title, short description, and “Learn More” link to the contact page.

“Built by a Founder, For Founders” section — brand story block explaining the T-shaped marketer philosophy with a “Read Our Story” CTA linking to the About page, accompanied by an image.

“Helping You From 0-1” section — positioning Supercharge as a data-driven growth partner with a “Our Data-driven Approach” CTA, paired with an image.

3-step process section — “Our Process” with three image cards: (1) Analysis & Research, (2) Matching, (3) Grow — each with a description and photo.

Latest Resources section — a CMS-powered grid showing the three most recent blog/resource posts with thumbnails, category tags, and titles, plus a “View all” link to the Resources page.

Bottom CTA — “Reach out for a free strategy session” with a “Get in touch” button.

Footer — logo, newsletter signup form, page links (Home, About, Contact, Resources, Services), social links (X, LinkedIn, YouTube), and legal links (Privacy Policy, Terms of Service, Cookies Settings).

The About page tells the founder’s story and explains the T-shaped marketer methodology. Key sections include:

Founder story — Rebecca Yip’s personal narrative about building her own SaaS company and founding Supercharge Growth as the growth partner she wished she’d had.

T-shaped marketer explanation — a detailed breakdown of what “T-shaped” means (deep expertise in one area + breadth across channels), why it matters for startups, and how it translates to better results.

Three-phase partnership model — describing how Supercharge works with clients: (1) building an in-house growth team with proven playbooks, (2) maintaining momentum with on-demand experts, and (3) continuing to scale with ongoing strategic support.

Data-driven approach section — highlighting how Supercharge uncovers actionable insights from existing data and transforms plans into measurable results.

A clean grid layout of all 12 service offerings (Growth, Branding, SEO, Social Media, Content, Paid Search, Paid Social, Outbound Marketing, Founder Branding, CMO, Graphic Designer, Email). Each service is presented as a card with a title and short description. All cards link to the contact page as the conversion action. The page acts as both a directory of capabilities and an SEO landing page for searches like “startup growth marketing services.”

The FLEX page is the most complex page on the site — a standalone landing page for Supercharge’s marketing-as-a-service subscription product. It functions as a mini sales page with its own distinct branding treatment. Key sections include:

Hero — “From MVP to Market Leader. Your Marketing Co-Pilot.” with a “Start Scaling Today!” CTA linking to Calendly.

Client logo marquee — 8+ company logos in an infinite-scrolling marquee (duplicated for seamless loop).

Three value pillars — Marketing on Demand, Expertise You Can Trust, Unmatched Flexibility & Speed.

“Made for Elite Startup Founders” section — positioning FLEX as a brand story igniter for passionate founders.

“Scale Faster, Market Smarter” section — with a product mockup image and CTA.

Feature blocks — Marketing Swiss Army Knife, Seamless Workflow (Trello integration), and Unlimited Revisions sections describing the service model in detail.

Benefits grid — six early-stage startup benefits: Validation Lab, Craft Your Brand Story, Content Creation Powerhouse, Community Building, Cost-Effective Growth, Learn by Doing.

Marketing tasks section — a tabbed or categorised list of specific deliverables (Copywriting, Social Media, Email Newsletter, Landing Pages, Graphics, Content Development, Keyword Research, SEO Analysis, PPC Optimization, Automation Setup) with a “Start Now” CTA.

Pricing section — FLEX Membership with two tiers: Standard ($4,999/month — one request at a time) and Pro ($7,999/month — double the requests), both with pause/cancel anytime.

FAQ accordion — six questions specific to FLEX covering pricing vs. full-time hire, request limits, turnaround times, team expertise, and pausing subscriptions.

Bottom CTA — “Launch Like a Rockstar” with a Calendly booking link and closing logo marquee.

A CMS-powered content hub with paginated article listings. Resources are organised into three content categories with their own filtered pages: News, Playbook (ebooks/playbooks), and Articles. Each resource item has a thumbnail image, category tag, title, and links to its individual content page. The Resources landing page (/resources) shows all content across categories, while category pages (/content-category/news, /content-category/ebook-playbook, /content-category/article) show filtered views.

CMS-generated profile pages for team members (e.g., /team/rebecca-yip for the founder). These pages provide individual bios and are linked from the About page and other relevant sections.

The primary lead capture page where most service card CTAs and “Get in touch” buttons across the site direct visitors. Designed to be simple and conversion-focused, reducing friction for startup founders who want to start a conversation.

Pricing page — a dedicated pricing page (/pricing-without-ecommerce) with transparent staffing package options.

Affiliate page — promoting a referral program.

Privacy Policy, Terms of Service, Cookies Settings — standard legal pages linked from the footer.

The main content collection powering the Resources hub. Fields include: title, slug, thumbnail image, body content (rich text), category (reference to Content Categories), author, publish date, and excerpt/description. Used on the Resources landing page, category filter pages, the homepage “Latest Resources” section, and individual article pages.

A reference collection for organising resources into types: News, Playbook (Ebook/Playbook), and Articles. Each category has its own filtered page (/content-category/[slug]) that shows only resources in that category.

Stores team member profiles with fields for name, role, bio, photo, and slug. Powers individual profile pages (/team/[slug]) and team sections on the About page.

The 12 marketing services displayed on both the homepage grid and the dedicated Services page. Fields include: title, short description, and icon/image. All cards link to the Contact page as the conversion action.

Stores the six FAQ items specific to the FLEX product page, with question and answer fields powering the accordion component.

Category filtering via reference collection: Rather than using Webflow’s basic category field, content categories are a separate CMS collection. This allows each category to have its own dedicated page with unique meta descriptions and SEO titles, making category pages into proper landing pages rather than just filtered views.

Services in CMS for dual use: Storing services in the CMS means the same data populates both the homepage grid and the Services page without duplicating content. If Supercharge adds or edits a service, it updates everywhere automatically.

Separate FAQ collections per page: The FLEX page has its own FAQ collection rather than sharing one global FAQ. This keeps the content management clean — FLEX-specific questions don’t appear on the homepage, and vice versa.

The FLEX subscription product needed its own dedicated landing page that functioned almost like a separate micro-site — with its own hero, logo marquee, value props, pricing, FAQ, and CTAs — while still living within the main Supercharge Growth website and sharing the same navigation and footer. The page needed to convert visitors directly to a Calendly booking rather than the standard contact form used elsewhere on the site.

I designed the FLEX page as a long-form sales page with its own visual personality (slightly different branding treatment, product mockups, and a more aggressive conversion-focused layout) while keeping it connected to the main site through shared navigation and footer. The CTAs on this page all link to Calendly rather than the contact page, creating a distinct conversion path. The page uses its own FAQ collection and pricing component, keeping it editorially independent from the rest of the site.

The FLEX page is significantly longer and more complex than other pages on the site, which creates a maintenance asymmetry — most of the site is relatively simple to update, but FLEX requires more care.

Having two different conversion paths (contact form vs. Calendly) means the site’s analytics need to track both funnels separately.

The site has two dropdown menus in the navigation — Services (linking to All Services and FLEX) and Resources (linking to All Resources, News, Playbook, and Articles). These needed to work cleanly on both desktop and mobile, provide clear visual hierarchy, and not overwhelm users given the relatively small number of sub-items.

I used Webflow’s native dropdown component with custom styling to create clean, minimal dropdown menus that match the site’s design system. The Services dropdown shows two options (All and FLEX), while Resources shows four options (All, News, Playbook, Articles). The dropdowns are styled to feel like an extension of the navigation bar rather than a separate floating element, maintaining visual continuity.

With only 2–4 items per dropdown, the dropdowns are relatively simple. If Supercharge adds many more services or resource categories in the future, the dropdown structure may need to evolve into a more sophisticated mega menu.

The 12 service offerings appear on both the homepage and the dedicated Services page. Any changes to service names, descriptions, or the addition of new services needed to reflect on both pages without manual duplication.

All 12 services are stored in the CMS and rendered via collection lists on both pages. The homepage uses the same collection with identical card styling, so a single CMS update propagates everywhere. The card design is consistent — title, description, and a “Learn More” link — creating a modular system that Supercharge’s team can manage without design support.

All service cards currently link to the same contact page rather than individual service detail pages. This keeps the site simpler but means there’s no dedicated SEO landing page for each individual service.

Bold, energetic colour palette: The site uses warm, high-energy colours (oranges, ambers, deep blues) against clean white backgrounds, reinforcing the “supercharge” brand promise of energy and momentum. The FLEX page introduces its own slight colour variations to differentiate the product.

Custom illustrations throughout: The homepage and FLEX page use custom brand illustrations (not stock photos) for the hero, process steps, and value proposition sections, creating a cohesive visual identity that feels premium and founder-friendly.

Stats as social proof: Large, bold metric numbers (15+ years, 2K+ marketers, 500+ campaigns, 100-day journey) are placed prominently on the homepage to build immediate credibility with time-pressed startup founders.

Two-CTA hero strategy: The homepage hero offers both “Learn More” (for explorers) and “Hire my growth marketer” (for ready buyers), capturing visitors at different stages of intent without forcing a single conversion path.

Founder-centric tone: The entire site speaks directly to startup founders using first-person language, urgency-driven copy, and relatable pain points (“Struggling to turn your startup’s early traction into sustainable growth?”). The design supports this with approachable imagery and a conversational layout rhythm.

Newsletter capture in footer: Every page includes a newsletter signup form in the footer, creating a low-friction conversion opportunity for visitors who aren’t ready to book a call but want to stay connected.

Total pages designed & built: 7+ static pages + CMS template pages

CMS collections: 5+ (Resources, Categories, Team, Services, FLEX FAQ)

Service offerings (CMS): 12

Content categories: 3 (News, Playbook, Articles)

Team member profiles: 1+ (CMS-generated)

FLEX pricing tiers: 2 (Standard $4,999/mo, Pro $7,999/mo)

Homepage sections: 10+ distinct sections

FLEX page sections: 12+ distinct sections

FAQ sets: 2 (FLEX-specific + homepage/general)

Navigation dropdowns: 2 (Services, Resources)

Conversion paths: 2 (Contact form + Calendly booking)

External integrations: Calendly (FLEX page CTAs)

The Supercharge Growth website demonstrates the ability to design and build a multi-page B2B marketing site in Webflow with a CMS-powered content strategy, a standalone product landing page, and a clear conversion-focused structure. Key accomplishments:

Built a complete startup marketing agency site — 7+ pages covering services, resources, team, pricing, and a subscription product, all designed and developed from scratch in Webflow.

Designed FLEX as a standalone product page within the main site — a long-form sales page with its own pricing, FAQ, value props, and Calendly conversion path, functioning as a mini sales funnel while sharing the site’s navigation and branding.

Structured a scalable CMS for content marketing — with a resources collection, category reference system, and template pages that let Supercharge’s team publish new articles, playbooks, and news without any design or development support.

Created a modular service card system — 12 CMS-driven service cards that appear consistently on both the homepage and Services page, ensuring content stays in sync across the site.

Designed for startup founder conversion — every design decision, from the two-CTA hero to the stats bar to the founder-centric copy, was made to build trust and drive action from early-stage startup founders.