Supernormal marketing site case study

Supernormal is an AI meeting assistant that helps teams turn conversations into useful outputs: notes, summaries, documents, slides, insights, and follow-up actions.

As the product evolved quickly, the marketing website needed to grow with it. The site had to support new product messaging, SEO pages, AI templates, blog content, integrations, product updates, and stronger conversion flows without becoming difficult for the team to manage.

My role was to help design, build, structure, and optimize the Supernormal marketing website across Framer, Webflow, CMS systems, SEO, analytics, and performance workflows.

Supernormal's marketing website was not just a static website anymore. It needed to become a scalable platform that could support product growth, SEO content, new AI template pages, and fast marketing publishing.

The main pain points were:

🔸 The website needed to scale faster. New pages, templates, integrations, blog posts, and product updates had to be created without rebuilding everything manually.

🔸 CMS structure was becoming more important. The marketing team needed flexible CMS systems that could support repeatable content while keeping pages consistent.

🔸 Template discovery needed a better user experience. Supernormal was expanding its AI template experience, so users needed clearer ways to browse, understand, and apply templates.

🔸 Framer had platform limitations. Some layouts, interactions, filtering logic, and dynamic CMS behaviors required custom thinking, code components, or overrides.

🔸 SEO pages needed a stronger structure. The site needed better page hierarchy, metadata, alt text, internal linking, and scalable page templates for organic growth.

🔸 Performance and bandwidth needed improvement. Large images and GIFs were increasing bandwidth usage and making the asset workflow harder to maintain.

🔸 Marketing needed better tracking. CTA clicks, forms, downloads, navigation actions, and key conversion points needed better visibility through analytics.

I worked across UI/UX design, Framer implementation, CMS architecture, Webflow support, SEO structure, performance optimization, and marketing website operations.

My responsibilities included:

◾️ Designing and improving marketing website sections ◾️ Building and editing pages in Framer ◾️ Structuring CMS collections and fields ◾️ Creating reusable page systems ◾️ Supporting AI template page architecture ◾️ Improving blog and resource page structures ◾️ Building custom Framer components and overrides ◾️ Optimizing images, GIFs, and website assets ◾️ Supporting SEO metadata, alt text, and content structure ◾️ Adding analytics tracking for CTAs, forms, and navigation ◾️ Collaborating with marketing, design, product, and engineering teams

◾️ Framer CMS Architecture I helped structure CMS systems for templates, blog posts, product updates, integrations, and resource-style pages. This made it easier for the team to publish new content while keeping page layouts consistent.

◾️ AI Template Page System I worked on the structure for Supernormal's AI template pages, including parent categories, middle category pages, template cards, CMS fields, related content sections, and template detail pages.

◾️ Reusable Marketing Sections I created and improved reusable sections such as cards, CTAs, related content blocks, feature areas, template grids, blog layouts, and resource sections.

◾️ Custom Framer Components and Overrides When Framer's native features were limited, I used code components and overrides to create more flexible interactions, dynamic behavior, and CMS-powered experiences.

◾️ SEO-Friendly Page Structure I supported SEO growth by helping organize page titles, meta descriptions, alt text, heading hierarchy, internal links, CMS SEO fields, and scalable landing page structures.

◾️ Performance and Asset Optimization I audited large website assets, optimized blog images, converted heavy files to WebP, helped move GIFs to hosted workflows, and supported a better asset process to reduce bandwidth usage.

◾️ Analytics and CTA Tracking I helped implement tracking logic for CTAs, forms, navigation clicks, download buttons, and key marketing actions using PostHog, Google Analytics, and custom event attributes.

◾️ Webflow and Migration Thinking Alongside Framer work, I also brought Webflow experience into the project by thinking through CMS structure, scalable class systems, reusable layouts, and how content-driven websites should be built for long-term maintenance.

◾️ Cross-Team Collaboration I worked closely with marketing, design, and engineering to make sure website updates matched product changes, SEO priorities, analytics needs, and technical limitations.

◾️ Framer for website design, CMS pages, responsive layouts, components, and publishing ◾️ Figma for design assets, UI planning, visuals, and collaboration ◾️ Webflow for CMS and website structure experience applied to scalable builds ◾️ Claude Code for code support, Framer components, workflow improvements, and experimentation ◾️ PostHog and Google Analytics for event tracking and marketing analytics ◾️ Intercom and Zapier for forms and lead workflows ◾️ Image optimization tools for WebP conversion, compression, and performance improvements

◾️ Helped turn the marketing website into a more scalable Framer platform ◾️ Improved CMS workflows for faster content publishing ◾️ Supported SEO growth through structured landing pages and metadata improvements ◾️ Helped build a stronger AI template discovery experience ◾️ Improved website performance through image and GIF optimization ◾️ Added better tracking visibility for marketing actions and conversion points ◾️ Created reusable systems that made the website easier to maintain and expand ◾️ Supported product education as Supernormal's features and positioning evolved

◾️ Framer website pages and sections ◾️ CMS architecture and field structure ◾️ AI template page system ◾️ Template cards and category layouts ◾️ Blog and product update improvements ◾️ Related content sections ◾️ CTA sections and conversion flows ◾️ Custom Framer components and overrides ◾️ SEO metadata and alt text improvements ◾️ Image and GIF optimization workflow ◾️ Analytics tracking setup ◾️ Cross-team implementation support