Meeting Notetaker
An AI note-taking web app built around editable summaries and simple checklist-style action items.
Before Sep 2025
Web app
AI Tech
Supernormal
I built a new marketing website while navigating continuous product evolution and finding workarounds for Framer limitations.
Tools I used for this project
FramerWebflowClaudeChatGPTZapierPostHogGoogle AnalyticsIntercomStatsigFramerWebflowClaudeChatGPTZapierPostHogGoogle AnalyticsIntercomStatsigFramerWebflowClaudeChatGPTZapierPostHogGoogle AnalyticsIntercomStatsig
Role
Visual and web designer
Timeline
2025 to Now
Live project
Visit website (opens in a new tab)Team
MarketingEngLeadershipAnalyticsProduction
Overview
Supernormal is a 2-product business that turns meetings and work context into useful outputs.
Over 1 year, Supernormal shifted from AI note-taking to Radiant and then AI Agents. Thus, I've grouped my website work into 3 phases that follow that evolution.
When I joined, Supernormal was hosted on Webflow and focused on AI note-taking.
Part of the cleanup was reorganising the CMS and class system, since duplicated classes made the site harder to maintain.
WebflowCMS auditUX auditClass system- See the full Radiant case study
The AI note-taker soon became Radiant, a desktop-only app with a website hosted on Framer, expanding with action items and integrations.
So, I consistently worked on CMS pages for integrations, case studies, comparisons with other tools, and many other pages.
FramerAction itemsTool integrationsNew visual identity Soon, the product shifted toward AI Agents, so I merged the old Supernormal website and new Radiant website into a single Framer system.
My work also included adding template pages that users could access from the web app in just a few clicks.
~70%of content and structure migrated in the first 3 months of 2026Page migrationCMS systemsProduct shiftFramer
Product evolution
The product rapidly changed from a web note-taker to a bot-free AI note-taker, then to AI Agents. Here is what each shift meant for the product.
What this product consisted of:
- Speaker identification and editable summaries
- Joined as a visible meeting bot on Zoom and Teams, it was not bot-free
- Check-off action items, with export to tools like Notion and Slack
- On Google Meet, it worked through a Chrome extension instead
- Norma, a voice AI that could speak in meetings and answer questions live
The notetaker over time
Given the product evolution, the meeting notetaker played a big role in this journey, but eventually became a 2nd supporting product for the AI Agents web app.
Supernormal began as a web app with a visible meeting bot, AI summaries, and checklist action items.
Radiant has its own story
Explore the AI note-taker’s story, how it took shape, and how it was later rebranded as the Supernormal desktop app.
The shift
Moving from Webflow to Framer wasn't just a platform change, it changed how we thought about the website.
Supernormal on Webflow
The first inconsistencies I found while auditing the Webflow site.
Supernormal on Framer
We chose Framer for CMS pages and faster publishing, centering the product on AI Agents and its new prompt box.
Behind the build
With the product evolving, there were plenty of areas to work on. Thus, I collaborated closely with the Marketing team to build a stronger website.
- Webflow cleanup
- CMS systems
- Pricing page
The Supernormal website had 2 important events: optimising Webflow in 2025, then merging 2 websites into a single Framer site in 2026.
Here is a look at the Webflow website after improvements to user flow and responsiveness, with consistent colors and buttons across the entire site.
After Radiant was established and the product shifted to AI Agents, the 2 existing websites were merged into a single Framer site, requiring a large CMS page migration.
- Mega menu
- Credit-based pricing
- OS-aware buttons
- Download button journey
Working closely with SEO and Leadership, I helped shape a website that kept pace with the evolving product and business model.
Some high-priority tasks included adding a mega menu, building a pricing page with dynamic credit add-ons, creating an interactive sticky blog filter, and updating other product pages. Here is a video to showcase this work.
The desktop note-taker download journey was one of the most important ways to connect the 2 products.
From the homepage, users could explore the Notetaker page from the menu or start a download with an OS-aware button.
After installing the app, they completed onboarding and recorded a meeting.
Clicking “Go to Supernormal.com” opened a detailed meeting summary in the web app, where AI Agents helped users continue their work.
- Referral pages
- Personalized landing page
- PostHog tracking
To support growth, I worked with Marketing and Analytics to improve the connection between campaigns and the product. Check out a few examples below:
The Cello referral flow: an invite shared from the in-app widget opens a personalized discount page, then the reward is claimed back inside the app.
Across the website, I tracked 21+ buttons with Framer code overrides, creating distinct PostHog events for the Marketing and Analytics teams to track.
- Interactive iframe cards
- Passable prompt artefacts
- Image generator
As the product grew, templates were added as a product feature. I also created internal tools to make the team’s work easier.
Template pages on the website let users preview a workflow, use Apply to add it to the prompt box, then pass it to the app with extra instructions.
I also built 3 internal tools to speed the work up.
A custom MCP that connects Framer directly to Claude, so images and all CMS content can be changed quickly and reliably. The Unframer MCP was a third-party tool with multiple limitations.
A social preview image generator for the website’s preview images when a link was shared.
A Framer bandwidth dashboard that monitors plan usage and sends the team alerts at defined usage points, so we can investigate whether the cause is user-driven growth, spam, or a technical issue.
Under NDA
These 3 tools are internal and cannot be showcased here.
- pt-br translation
- Localization button
- Language switcher pop-up
To support existing users in Brazil from the legacy product, I made the website accessible in Brazilian Portuguese.
First, I built a localization button and connected every translated page to it. I then reworked the structure and layout so the longer Portuguese copy still fit clearly.
Then, a popup detects when a visitor's browser language differs from the page, letting them switch to the matching version or continue in their current language.
- CMS workarounds
- Figma libraries
- Code components
- Performance optimization
One final part of my work focused on creating a visual library for Marketing and improving the website’s Lighthouse score. Here is what I did:
I worked with Danny David to create a shared Figma library for Supernormal's web assets, keeping marketing visuals organized, consistent, and ready to reuse.
I improved Lighthouse performance by optimizing images, removing heavy mobile animations, and fixing or deferring third-party scripts.
The image below shows the progress across 3 phases: the legacy Supernormal site, Radiant, and AI Agents.
Scale
The new website grew to roughly twice the size of the OG one, and its page count is still increasing.
0+
New pages
built and structured in Framer
0
CMS collections
created or rebuilt in collaboration with the team
0
Localizations
available in English and Brazilian Portuguese
+263 pages vs old
530pages built in total on the new website, hosted in Framer
0530
Collaboration
All of this was made possible through successful cross-team collaboration:
Marketing & SEO
Provided feedback on SEO keywords, page plans, and final copy.
Product
Product frames shaped onboarding visuals and web assets.
Engineering
Supported product embeds, flagged issues, and passed site cookies.
Analytics
Tracked buttons and events, and offered analytics support.
Beyond joining meetings and sharing roadmaps and documentation in Notion, I was repeatedly recognized for my work.
Significant impacts
Homepage bounce rate fell to 65%
Initially, the rate was 94%. After resolving issues with site speed, video performance, heavy code, and more, it decreased to 65%.
01 / 02
What worked and what didn't
When Supernormal was focused on Radiant, the email-link CTA helped visitors save a Mac download link for later.
Once AI Agents became the focus, that email flow was no longer a reliable way to reach the Notetaker.
~0mobile email-link CTA clicks per month
Radiant was the product focus, supported by paid ad campaigns. Desktop visitors could download the Mac app from its website.
Since mobile onboarding had no direct download, the mobile email-link CTA gave visitors a way to get an email with instructions on how to download it.
AI Agents became the new web app on mobile and desktop. The former Radiant app was rebranded as the desktop Notetaker, but the email-link CTA stayed.
~0%of content and structure migrated
By March, most of both websites had moved into Framer. AI Agents were the focus, not the desktop Notetaker.
With no Notetaker download button yet on the web app, the mobile email flow was still active.
After Radiant branding was retired, the simplified Notetaker had a separate page within Supernormal. Downloads turned low once AI Agents got more attention.
Signed-in users could now click “Download for Mac” in the web app, connecting AI Agents to the desktop Notetaker app through meeting context.
~0%increase in direct Notetaker downloads from one month to the next
+0.0%increase in signups from one month to the next
Previously, the main struggle was desktop visitors having to find the separate Notetaker landing page, thus downloads stayed low.
The new OS-aware navbar button gave them a direct download path.
~0mobile email CTA clicks per month
With Notetaker downloads available in web-app onboarding and AI Agents now the focus, mobile email CTA clicks fell, making the mobile email CTA flow redundant, so the “Send download link” flow was removed.
+0%download rate from one month to the next
The latest improvement sent homepage visitors that clicked the Download button straight to a new /download instruction page, with steps to install the Notetaker.
Reflections
Marketing sites aren't just visual surfaces. They're systems that have to support product strategy, content workflows, SEO, performance, and internal collaboration.
01
Product shifts
Design requests can arrive suddenly, so changes sometimes have to move fast. The work must adapt to product evolution, prioritize what matters, make the right call, and ask for feedback when the direction is unclear.
02
Use code to overcome limitations
Framer is powerful but not unlimited. I use custom code to overcome platform limitations, then rely on native features or simplify the idea when code is not the right answer.
03
Build for the whole team
Marketing should be able to edit and maintain the site without too much design intervention. Clear documentation and well-structured CMS systems make that independence possible.
