HeadQ Case Study
Brand design. 10+ pages. Custom icons. Animated product visuals. Framer development. Pixel-perfect. 30+ days of deep-design partnership.
Brand Design
Website Design (10+ pages)
Brand Design
Product Visual Animation · Framer Development
The Starting Point
HeadQ helps companies sell complex B2B products online — visual product configurators, quote carts, checkout flows, the works. Their customers are manufacturers, industrial companies, service businesses. People selling things that don't fit in a Shopify template.
When they approached us, the design was old. Not broken, just old. And in B2B, "old design" translates directly to "do we trust this company with our digital commerce?"
But here's what made this project different from a typical redesign: HeadQ's audience isn't techy. These are manufacturers. Operators. People who've been selling through handshakes and spreadsheets for decades. If your design makes them feel like they need a computer science degree, you've already lost them.
Every single design decision had to be filtered through that lens.
The Starting Point
HeadQ helps companies sell complex B2B products online — visual product configurators, quote carts, checkout flows, the works. Their customers are manufacturers, industrial companies, service businesses. People selling things that don't fit in a Shopify template.
When they approached us, the design was old. Not broken, just old. And in B2B, "old design" translates directly to "do we trust this company with our digital commerce?"
But here's what made this project different from a typical redesign: HeadQ's audience isn't techy. These are manufacturers. Operators. People who've been selling through handshakes and spreadsheets for decades. If your design makes them feel like they need a computer science degree, you've already lost them.
Every single design decision had to be filtered through that lens.
Starting With The Foundation
Before we touched a single webpage, we had a conversation most agencies skip: your brand needs work first.
We proposed a brand redesign because the brand is the foundation everything else sits on. Typography, icon styling, color system — all of it was selected following our deep-design approach, where every choice connects to an emotional response in the end user. Not "this font looks cool." More like "this font makes a 55-year-old manufacturing CEO feel like this platform was built for someone exactly like him."
We aligned with the HeadQ team and prepared a brand system that could carry across 10+ pages, sub-products, marketing materials, and beyond. The kind of brand design that has a reason behind every decision.
Starting With The Foundation
Before we touched a single webpage, we had a conversation most agencies skip: your brand needs work first.
We proposed a brand redesign because the brand is the foundation everything else sits on. Typography, icon styling, color system — all of it was selected following our deep-design approach, where every choice connects to an emotional response in the end user. Not "this font looks cool." More like "this font makes a 55-year-old manufacturing CEO feel like this platform was built for someone exactly like him."
We aligned with the HeadQ team and prepared a brand system that could carry across 10+ pages, sub-products, marketing materials, and beyond. The kind of brand design that has a reason behind every decision.
The Website: 10+ Pages of Intentional Design
Hero Variations First. We prepared 5+ design style explorations for the hero section. Because the hero sets the tone for everything. Get it wrong here, and every subsequent page feels slightly off. We presented the directions, discussed them with the team, and locked one.
Then we followed that visual direction across the entire site. Consistent, but not repetitive. Every page has its own job, and every page does that job with the same design language.
Product Visuals Were The Big Challenge. HeadQ's main concern was how to show their product in action. Their platform is visual and interactive — static screenshots don't cut it.
So we prepared styleframes for animated product visuals, then brought them to life with motion that actually demonstrated each feature. But we weren't just making things move for the sake of it. We were designing every animation with the attention span of HeadQ's ICP in mind. These aren't people who watch 30-second feature demos. You get 3-5 seconds to make your point before they scroll. Every animation was designed around that constraint.
Sub-Products Got Their Own Visual Identity. HeadQ has multiple products (Visual CPQ, Checkout, Product Finder, Storefront, Edison AI). We gave each one a distinct color and icon system, but kept them visually connected to the parent brand. Different enough to feel like their own thing. Similar enough to feel like they belong to the same family. It's a harder balance than it sounds.
Custom Mini Icons. We designed a separate icon set aligned with the brand — not pulled from a library, not generic. Custom icons that speak the same visual language as everything else.
The Website: 10+ Pages of Intentional Design
Hero Variations First. We prepared 5+ design style explorations for the hero section. Because the hero sets the tone for everything. Get it wrong here, and every subsequent page feels slightly off. We presented the directions, discussed them with the team, and locked one.
Then we followed that visual direction across the entire site. Consistent, but not repetitive. Every page has its own job, and every page does that job with the same design language.
Product Visuals Were The Big Challenge. HeadQ's main concern was how to show their product in action. Their platform is visual and interactive — static screenshots don't cut it.
So we prepared styleframes for animated product visuals, then brought them to life with motion that actually demonstrated each feature. But we weren't just making things move for the sake of it. We were designing every animation with the attention span of HeadQ's ICP in mind. These aren't people who watch 30-second feature demos. You get 3-5 seconds to make your point before they scroll. Every animation was designed around that constraint.
Sub-Products Got Their Own Visual Identity. HeadQ has multiple products (Visual CPQ, Checkout, Product Finder, Storefront, Edison AI). We gave each one a distinct color and icon system, but kept them visually connected to the parent brand. Different enough to feel like their own thing. Similar enough to feel like they belong to the same family. It's a harder balance than it sounds.
Custom Mini Icons. We designed a separate icon set aligned with the brand — not pulled from a library, not generic. Custom icons that speak the same visual language as everything else.
Development: Where Details Become Reality
We developed the site on Framer. And this is where our approach to pixel-perfection really shows.
During development, we proposed design changes. Not because we got it wrong in the design phase — because development is the phase where you see things in context, at real sizes, with real content, and things that were "fine" in Figma become "not quite right" in the browser.
Most agencies would say "it matches the design file, we're done." We say "it matches the design file, but this spacing feels off at this viewport, and this interaction would work better if we adjust the timing."
That's what working with a creative partner means. We think for our clients. Even when it means extra work for us, we go the extra mile because delivering the best possible result is the job. Not delivering "what was agreed upon." Delivering what's best.
Development: Where Details Become Reality
We developed the site on Framer. And this is where our approach to pixel-perfection really shows.
During development, we proposed design changes. Not because we got it wrong in the design phase — because development is the phase where you see things in context, at real sizes, with real content, and things that were "fine" in Figma become "not quite right" in the browser.
Most agencies would say "it matches the design file, we're done." We say "it matches the design file, but this spacing feels off at this viewport, and this interaction would work better if we adjust the timing."
That's what working with a creative partner means. We think for our clients. Even when it means extra work for us, we go the extra mile because delivering the best possible result is the job. Not delivering "what was agreed upon." Delivering what's best.
30+ Days of Deep-Design
This wasn't a sprint. It was a partnership. Brand foundation, 10+ pages of website design, a custom icon system, animated product visuals, and Framer development — all connected, all intentional, all built on the same strategic foundation.
For HeadQ, the result wasn't just a new website. It was a completely new perception. From "old and outdated" to "this is the company I want handling my digital commerce.
30+ Days of Deep-Design
This wasn't a sprint. It was a partnership. Brand foundation, 10+ pages of website design, a custom icon system, animated product visuals, and Framer development — all connected, all intentional, all built on the same strategic foundation.
For HeadQ, the result wasn't just a new website. It was a completely new perception. From "old and outdated" to "this is the company I want handling my digital commerce.
Client’s feedback
Client’s feedback
They've been amazing to work with, have made the process easy, brainstormed on UX ideas with us, and truthfully played as an extension of our team. All that to say, if you're looking for a design/dev agency that's damn good at what they do, check them out.
They've been amazing to work with, have made the process easy, brainstormed on UX ideas with us, and truthfully played as an extension of our team. All that to say, if you're looking for a design/dev agency that's damn good at what they do, check them out.
Mikko
Mikko
Founder @ HeadQ
Founder @ HeadQ
Branding
Branding
Website
Website
Book a call or Fill the form
Book a call or Fill the form
Calendar
Form
Calendar
Form
Have an idea in mind? Let’s talk.
Have an idea in mind?
Let’s talk.
Have an idea in mind?
Let’s talk.
Copyright 2026 © Weroast Design 2026. All Rights Reserved