Case study

A SaaS homepage where the product does the selling

Ferrow is a customer feedback tool for software teams. It collects requests from every channel, sorts them into themes, links each theme to the roadmap and tells everyone who asked when it ships. We designed its homepage for Framer in near-black green and flat pastels, with product panels you can use instead of illustrations.

Brand
Ferrow
Sector
B2B SaaS · Customer feedback
Services
UI Design · Web Design · Motion Design
Platform
Framer website design
Scope
Homepage, logo, desktop to phone
Year
2026

In short

What it is
The homepage for Ferrow, a tool that turns customer feedback from email, chat, support tickets, sales calls and an in-app widget into a roadmap, designed for Framer.
Who it is for
Product managers and founders at software companies of 10 to 200 people, who hear the same requests in five places and lose track of who asked.
The hard part
A new product has no customer logos, testimonials or results to show. The page had to sell with the product alone, and stay honest while doing it.
The idea
Loose notes that line up into rows. Every request is a small tile in its channel colour, and across the page the tiles keep filing themselves into themes.
The design
Near-black green and white with flat pastels that each mean one channel, Almarai and Geist type, 4 pixel corners, no shadows or gradients, and a logo made of six tiles in rows.
Good to know
Ferrow, the Northwind workspace, the people, prices and numbers inside the product panels are sample content written for the design. The tool logos show what Ferrow connects to.

What Ferrow is

Customer feedback arrives everywhere: an email to support, a message in Slack, a ticket in Zendesk, a note from a sales call, a post in the app. Ferrow collects all of it in one inbox, suggests which requests ask for the same thing, groups them into themes, links each theme to an issue in Linear or Jira, and emails everyone who asked once it ships.

The name comes from furrow, the groove a field is planted in, where small things grow in rows. That is the whole design idea: loose notes that line up into rows. It shows in the logo, six tiles in rows of three, two and one that also read as an F, and in the small coloured tiles that stand for single requests across the page.

The problem the page had to solve

  • Sell without proof it does not have. No customer logos, no testimonials, no user counts, no “save 10 hours a week”, no security badges. The product has to make the case by itself.
  • Show a workflow, not a feature list. Ferrow is useful because of what happens between a note arriving and a customer hearing back. The page has to walk through that in order.
  • Stay readable while showing a lot of product. Inboxes, themes, roadmaps and reports are dense. Every panel needed real, readable content without turning the page into a wall of interface.
  • Look premium without the usual SaaS tricks. No glowing gradients, no 3D blobs, no four equal stat cards. Flat colour, real type and product panels that work.

A hero that files its own feedback

The first screen is near-black green with the headline “Every customer request, sorted into what to build next.” Inside the headline sits a row of three small tiles, three notes lined up, so the brand idea is in the type itself. Two loose notes, a sales call and a Zendesk ticket, sit beside the buttons at a slight angle. As you scroll, they drop straight down and slide in behind the product window, as if filed.

The window below is the product. It starts tilted back and flattens as you scroll into it. On the left, an Incoming list of requests, each with its channel as a small pastel chip. On the right, a table of themes with request counts, a “+ today” number and a strip of tiles coloured by where each request came from. Every few seconds a new request arrives, is matched to a theme and files itself into that row, and the count goes up. It is the one thing on the page that moves on its own.

The Ferrow hero on near-black green: a small New, Merge suggestions in the inbox link, the headline Every customer request, sorted into what to build next with a row of three pastel tiles after request, two buttons Start free and See how it works, a sales call note and a Zendesk note beside them, and the product window below showing incoming requests and a table of themes.
The first screen. The two notes beside the buttons drop into the window as you scroll.
The Ferrow product window: a sidebar with Inbox, Themes, Roadmap, Changelog and Widget and five channel counts, an Incoming column of white request rows with channel chips such as Widget and Email, and a Themes table with Bulk export to CSV, SSO for small teams, Dark reports, Daily digest in Slack and Tag requests by plan, each with a strip of coloured tiles, a request count, a plus today figure and a status.
The window up close. Only the newest request is tinted while it is matched.

Seven channels in, the work out

Instead of a row of logos, the integrations are drawn as a flow. Gmail, Slack, Intercom, Zendesk, HubSpot, Zoom and the Ferrow widget sit on the left, each tagged with its channel. Thin curved lines run into a dark Ferrow card in the middle, and out again to Linear, Jira, a Slack digest and the customers who asked.

When the section comes into view, one note in each channel’s colour travels along its line into the hub and lands as a tile in a theme row, and the counts tick up. Then one note goes out to each tool. Hover any channel and it sends another.

The integrations section headed Plugs into the tools your team already uses: seven channel rows on the left, Gmail, Slack, Intercom, Zendesk, HubSpot, Zoom and Ferrow widget, curved lines into a dark Ferrow card with three theme rows of tiles, and lines out to Linear, Jira, Slack daily digest and Customers shipped emails.
Channels in, a hub in the middle, the work out. The lines carry notes when the section appears.

Four steps, pinned while you scroll

“From a note in someone’s inbox to a line in the changelog” is told in four steps: Collect, Sort, Plan and Close the loop. On a wide screen the step list and the product panel stay pinned together while you scroll. All four steps stay in view, the active one opens its text, and a thin bar along its top fills as you scroll through it. You can also click a step to jump to it.

The panel sits on a pastel stage that changes colour with each step, and each panel plays a small entrance when its step opens: inbox rows rise in, a suggested duplicate slides in with a Merge button, a roadmap bar grows across the timeline, and the “shipped” email assembles line by line. The channel filters in the inbox work.

The four steps of How it works in a two by two grid, each with a number, a title and a product panel on its own pastel: 01 Collect, a unified inbox with channel filters on pale blue; 02 Sort, a theme with three merged requests and who asked on lilac; 03 Plan, linked Linear and Jira issues and a roadmap timeline on butter yellow; 04 Close the loop, the shipped email to 128 people on mint.
The four steps as they appear for visitors who turn motion off. On a wide screen they play in place.

A roadmap that ships while you watch

The roadmap sits in its own product window: Under review, Planned and Shipped, each card with its status, its ID, a row of request tiles, the linked issue with a small progress bar, and the faces of the people who asked. When the board comes into view, the Bulk export card moves from Planned to Shipped, its tag turns mint, the column counts change, and a dark note drops into the window’s top bar: “Bulk export shipped. 128 people will hear about it.”

A switch in the corner turns the team view into what customers see. The header becomes Northwind’s public roadmap with a Suggest an idea button, and the private notes on every card give way to working vote buttons.

The roadmap section: a product window titled Northwind, Roadmap with All products and This quarter chips and a Team view switch, and three columns, Under review, Planned and Shipped, of cards with status tags, IDs, rows of small coloured tiles, request counts, linked issue numbers with progress bars and small avatars.
One roadmap for the team, a cleaner one for customers, and one card that ships on screen.

Reports, not a row of stat cards

Four equal coloured cards with big numbers are the most common SaaS section there is. Ferrow’s reports are a dashboard instead. The main card shows 1,284 requests with a chart built from the same note tiles as the rest of the page, one column a day, coloured by channel. Hover a column and it shows its date and count. Beside it, a split bar and list by channel, then a ranked list of top themes, and three small pastel cards for open themes, roadmap items and people waiting to hear back.

The 7 days, 30 days and Quarter buttons redraw all of it: seven daily columns, thirty days or thirteen weeks, with every number scaled to match.

The reports section on near-black green: a white card with 1,284 requests and a column chart made of small coloured tiles, a By channel card with a split bar and Email 412, Chat 298, Support 271, Widget 167 and Sales calls 136, a Top themes list with bars, and three pastel cards for 46 themes, 18 roadmap items and 312 people to notify.
A dashboard in the brand’s own tiles. Every figure is labelled as sample content on the page.

Ask inside the app, hear back inside the app

The changelog is drawn as Northwind’s own changelog page: a timeline with the newest entry open, export to CSV with the columns it includes, and two earlier entries below it. Those are the same features that sit under Shipped on the roadmap, so the page tells one story from request to release.

Beside it, the in-app widget sits on a page of Northwind’s app. When it comes into view it plays through once on its own: it opens, types a request and sends it, then shows similar requests to vote on. Tabs above it show every state: closed, open, typing, an error for an empty message, and sent. The form works too.

The changelog and widget section: a Northwind changelog with a timeline rail, the latest entry on 14 November about exporting every request to CSV with four column rows, and two earlier entries for merge suggestions and the daily Slack digest; beside it the widget on a Northwind reports page with tabs for Closed, Open, Typing, Error and Sent.
The changelog and the widget. Every widget state was designed.

Pricing you can try on

Pricing is per workspace, and customers who post, vote or read the roadmap never count as seats. Above the three plans, a slider asks how many teammates sort and plan. Move it and the plan that fits is marked “Fits your team” and its monthly price is worked out, extra teammates included. The yearly switch, with its “2 months free” chip, recalculates everything. Each plan has its own tile mark, one, three, or three and three, and a full comparison table opens under the cards.

The pricing section on warm cream: the heading Priced per workspace, not per person who asks, a Monthly and Yearly switch with a 2 months free chip, a teammate slider set to 12 with Team fits 12, and three plan cards, Starter $0, Team $49 on dark green and Business $129, each with a small tile mark, a feature list and a button, and Compare every feature below.
The slider picks the plan and the price. Prices are sample content.
The FAQ section: the heading Questions teams ask before they switch, a dark Still deciding card with three small avatars and a Book a walkthrough button, and six numbered questions with the first one open.
Six numbered questions, and a way to talk to a person.

The brand system

The palette comes from Mahadeva, a Framer template by Breeje Anadkat, measured from its live page: near-black green #0E1E1D, white, a warm cream for pricing and questions, and flat pastels in mint, sky, lilac, butter, peach and pink. In Ferrow the pastels carry meaning. Each one stands for a channel: sky for email, lilac for chat, butter for support, peach for sales calls and mint for the widget. Mint also means shipped.

Display type is Almarai, with Geist for numbers, product panels and card titles, and Geist Mono for small labels and IDs. Corners are 4 pixels everywhere and 2 pixels on tags. There are no shadows or gradients: panels separate by colour. Buttons carry their arrow in a square box on the right.

The logo came from three options: a lowercase f with a crossbar of tiles, two tiles in a row with a third tipping in, and the one chosen, six tiles in rows of three, two and one. It holds up at 16 pixels in a browser tab and at full width in the footer.

The closing band: a mint panel with the heading Start with the requests already in your inbox, buttons Start free and Book a walkthrough, and a dark first-import card reading Your workspace, Gmail connected, 412 emails read, 3 themes found, with three theme rows of blue tiles.
The closing band shows a first import filling three themes.
The Ferrow footer on near-black green: a monthly updates sign-up, social icons, link columns for Product, Connects to and Company, a full-width ferrow wordmark with the six-tile logo, and a bottom row with All systems normal and Designed and developed by Amariq.
The footer, with the six-tile mark and a wordmark sized to the full width.
The whole page in motion, with every interaction used once.

Motion with a job

  • One opening. On load the headline rises line by line, its tiles pop in, and the window rises while its counts tick up.
  • One loop. New requests arriving in the hero window is the only thing that repeats, and it pauses when the window leaves the screen.
  • Moments that explain the product. Notes file into the window, travel into the hub, a card ships, the widget sends a request and a first import fills its themes. Each plays once, when its section appears.
  • Calm by request. For visitors who ask their system for reduced motion, nothing plays on its own and the four steps sit in a still grid. The page is complete without motion.

Fast and easy to read

  • Light to load. On a phone profile the page loads in 5 requests and about 140 KB, with the largest element on screen in about 2.2 seconds. The typefaces and animation code are served from the site itself, and every product panel is HTML and CSS, so there are no screenshots to download.
  • Steady while scrolling. Nothing on the page jumps while it loads or scrolls.
  • Easy to read. Every line of text passes the WCAG AA contrast standard at desktop and phone sizes, including inactive steps and the small labels in the product panels.

Built for phones

On a phone the window shows two incoming requests and three themes, the integrations stack as channels, hub and tools, the four steps sit open one under another with their panels, and the roadmap, dashboard and pricing cards stack in a single column. The menu opens from the top with every section and the main button.

Three phone screens of the Ferrow site: the hero with the headline, buttons and the product window below, the integrations with channel rows and the dark Ferrow hub, and the roadmap with the Team view switch and stacked cards.
Ferrow on a phone.

Ready for Framer

Ferrow was planned for Framer from the first section. Each section maps to one Framer component, and every state on the page, the widget’s five states, the team and public roadmap, the date ranges, monthly and yearly pricing, becomes a variant of that component. Colours, type, corners and spacing sit in a small set of shared styles, and the scroll moments map to Framer’s own scroll and appear effects.

Questions

What people ask about this project.

Can you design a homepage like this for our SaaS product?

Yes. We start from the workflow your product changes for people, then build the page around it, so each section shows one step of that work instead of a list of features.

We design for Framer, Webflow or a custom build, depending on where your site runs or should run.

Do we need product screenshots for the page?

No. On Ferrow every product panel is drawn in HTML and CSS from the real interface ideas, so it stays sharp on any screen, loads fast and can move. On a real project we build the panels from your own interface, with content your team signs off.

How do you make a new product look credible without customer logos?

By letting the product do the work. Ferrow shows no logos, testimonials, user counts or results it could not back up. The workflow, the working panels and clear pricing carry the page, and sample numbers are labelled as sample content.

Do the slider, roadmap and widget really work?

Yes, on the page itself: the teammate slider picks a plan and works out its price, the roadmap switches between the team and public view and takes votes, the date range redraws the dashboard and the widget takes a message. In Framer each of these becomes a component with variants.

Did you design the logo too?

Yes. We drew three options for Ferrow and the six tiles in rows of three, two and one was chosen. We can do the same for a new product, or work with the logo you already have.