Building a Confident, Strategic, and Motion-Driven Brand Presence on Framer for Koollab Agency
Design Strategy, Web Design, Framer Development, Animation
Overview
Koollab is a strategic branding partner for B2B tech companies that have outgrown their early-stage identity and need a sharper, more scalable brand system. They came to me with a clear mission: to elevate their online presence beyond design, and reflect their true strength as strategic brand builders, not just logo makers.
Until now, Koollab had always worked in Webflow and Wordpress for its clients, but wanted to explore Framer for its own website its faster iteration speed and designer-friendly interface. This project became their first Framer website, and the result set a new creative standard for how the agency presents its process, philosophy, and results.
The Challenge
Koollab needed a site that could:
Position them as a strategy-first branding partner, not just a design agency.
Speak directly to B2B founders and CMOs who feel their brand no longer fits their growth stage.
Showcase their distinct tone: confident, collaborative, and a little bit “kool.”
Integrate motion, texture, and storytelling without compromising clarity.
At its core, the website had to mirror their brand philosophy:
Smart, minimal, but never sterile.
My Role
Koollab hired me to do web design and Framer development under their Creative Director.
Key Inspirations
Koollab also wanted to take inspiration from several sources for particular sections of their website, including the following:
Arpeggio for the overall feel of the home page
Artcraft for the hero carousel and case study presentation
Focus Lab for content choice and aesthetics
WeDiscover for the case study index page
Medium for the case study detail pages
Overpass Studio for the comparison table
Motto for the About page and several other elements
The Solution
We built a multi-page Framer website that captures Koollab’s confident personality through neo-brutalist layouts, kinetic motion, and bold storytelling inspired by but not derived from the Framer template Arpeggio.
Home Page
Inspired by the Webflow template Artcraft's hero section, the site opens with:
Make your product the obvious choice.
By far the most challenging part of this section was the curved carousel. There are several existing Framer components out there made by the community, but none of them really captured the effect we wanted to achieve.
To solve this, I dived into DevTools to discover how Artcraft achieved this. I learned that it uses a bunch of <div> elements overlapping in 3D space with each rotated in equal increments like a helicopter's propeller blade with the images at the ends of these "blades" rotated 90 degrees on the Y-axis to face the screen. I elegantly recreated this in Framer as a component that rotated the "propeller" as the user scrolled vertically.
The rest of the home page is mostly inspired by the Framer template Arpeggio and takes elements from other sites under Key Inspirations.
About Page
The “About” page humanizes Koollab. It introduces their origin story: “Koollab is born from the truths we live by.” It’s visually supported by the mascot, the Brand Scientist, who serves as a playful yet intentional symbol of curiosity and experimentation. The typography, motion, and tone together embody their archetype: The Creator-Hero — visionary, confident, and purpose-driven.
The About page is mostly inspired by Motto's website.
Process Page
The Process page takes inspiration from several websites, including Focus Lab. Its goal is to clearly outline Koollab's process while also listing the specific services the agency provides. The client requested an animation similar to the one on the home page's How It Works section to open this page.
Case Studies CMS
Halfway through the project, the client requested a scope change to add a reliable, scalable content management system to their website for their case studies. Inspired by Medium and WeDiscover. They also requested to add a filtering system to separate their case studies into 11 different categories. Using Framer's component variants and CMS filtering, this was made possible in the final site.
In the individual Case Study pages, we faced an issue: Framer's CMS isn't quite as robust as we need it to be, and while there are options for styling text and images, we needed something more elegant. Particularly, we needed the images embedded in the formatted text to take up more than the width of the text container itself. Using some Framer code overrides, this was easily done.
I also decided that we should be able to stack images horizontally while also taking up more than the width of the text containers. After some iterations on the Framer code overrides with the help of vibe coding, this was also made possible.
The Transition to Framer
This project marked Koollab’s first foray into Framer, a significant shift from their Webflow-based workflow.
They were impressed by how:
Motion and responsiveness felt more native and fluid.
The content management system (CMS) allowed easier updates for case studies.
Prototyping and final production merged into a single seamless platform.
By the end of development, Koollab’s team was confident using Framer — opening the door for future launches and campaign microsites without heavy dev dependency.
Results
A fully responsive, high-performing site that loads in under 2 seconds.
Positive feedback from clients and peers on its clarity, flow, and motion storytelling.
Koollab now uses this site as a sales touchpoint and portfolio showcase, aligning perfectly with their positioning as a strategic partner for scaling brands.
Reflection
For me, this project was a joy from start to finish — a collaboration between design and brand strategy done right. Building Koollab’s digital home in Framer meant more than crafting visuals — it meant translating their philosophy of clarity, curiosity, and confidence into an interactive experience.
“We’re not here to decorate your pitch deck. We’re here to build a brand that becomes your growth’s backbone.”
Koollab lives that promise, and now their website finally does too.
Tools & Tech
Framer
Figma
Adobe Photoshop
ChatGPT
Google Drive
