Skip to content
Back to work
Web DesignBrandingMarketing SiteConcept project

Northwind: A SaaS Marketing Site

A marketing site and account screens for a team-analytics startup, designed in Figma around a single ask: start a free trial.

Client
Northwind (concept product)
Role
Web & Brand Designer
Year
2026
The logo mark and its animated reveal.

What I did

  • Wrote the design brief: positioning, palette, type, page list
  • Logo mark and its animated reveal
  • Six marketing pages and three account screens in Figma
  • Phone layout of the product dashboard
  • First-pass layouts generated with Figma AI from my brief, then redesigned by hand
Overview

Northwind is an invented team-analytics tool for engineering teams, and this is its marketing site: homepage, product, pricing, docs, about and community pages, plus sign-in, sign-up and password reset. It's a design study. I specified it for a React and Tailwind build, the same stack this site runs on, but Northwind itself was never built, so there's no performance or conversion number to quote.

Key decisions

  • The hero shows the product: a weekly-velocity chart beside the headline.

    Instead of describing it, to engineering leads who are allergic to marketing copy.

  • One ask, repeated after the proof.

    Instead of making whoever is ready scroll back up to act.

  • On a phone, the dashboard stacks its metrics as cards.

    Instead of squeezing the desktop table onto a small screen.

Results

Marketing pages designed
6
Account screens
3

Concept project: Northwind isn't a real client and was never built or launched, so there are no performance or conversion figures. These numbers describe the design itself, and each one is visible on this page.

01

The brief

A product that's easy to describe badly. Every analytics tool promises dashboards, so the homepage had to say what's different in one scroll and turn that into a free-trial sign-up. The audience is engineering leads, who are allergic to marketing copy, so the hero shows the product rather than describing it: a real-looking weekly-velocity chart beside the headline, with 'Start free trial' as the primary action and 'Book a demo' as the quieter second one.

Northwind homepage hero with the 'See what your team actually ships.' headline over start-trial and book-a-demo buttons, beside a weekly-velocity bar chart, a 47-PRs card, a +12% velocity card, and a 12k+ teams stat.
The homepage hero shows the product instead of describing it, with Start free trial as the one primary action.
02

One scroll, one ask

The value props are three numbered cards you can take in at a glance: one digest every Monday, connect in two clicks, everyone sees the same picture. Each answers an objection a lead would raise before trying the product: more noise, painful setup, another tool only managers look at. The homepage asks for one thing, and the trial call to action comes back after the proof, so whoever is ready by then doesn't have to scroll back up to act.

Value-props section headed 'Clarity, not more charts.' beside three numbered cards: One digest every Monday, Connect in two clicks, and Every teammate same picture.
Three value props, each answering an objection an engineering lead would raise.
03

Proof, then the ask again

Social proof sits directly before the closing call to action, because that's where a skeptical reader needs it: a rating, a team count, and one testimonial whose line, 'We replaced three dashboards with one Monday-morning email', restates the value prop in a customer's words. Since Northwind is invented, so is every figure in that section. They're the content a real version of the page would need, not a claim about a real product.

Social-proof section showing +22% trial conversion, a 4.9/5 average rating, 12k+ teams, a testimonial from Priya Nair reading 'We replaced three dashboards with one Monday-morning email,' and a 'Ready to see what your team ships?' call-to-action band.
Proof before the closing ask. Northwind is invented, so every figure here is placeholder content, not a result.
04

The product on a phone

Engineering leads check numbers between meetings, so I laid out the product dashboard at phone width as well: velocity, PRs merged and review time stacked as cards instead of squeezed into a table. The marketing pages are desktop comps. Their mobile versions would be the next set to design, and this frame is the pattern they'd follow.

Responsive view of the Northwind dashboard on a phone showing weekly velocity, PRs merged and average review time, beside the heading 'Designed mobile-first.' and its supporting bullets.
The dashboard at phone width: stacked cards instead of a squeezed table.
05

What I'd change

The page argues with itself. The hero says 'No dashboards to babysit' beside what is plainly a dashboard, and the value-prop headline below it is 'Clarity, not more charts'. I'd lead with the Monday digest, the one thing the page says is different, and let the dashboard come second. The one action also goes by three names in the first screen alone (Start free, Start free trial, Get started), which is three decisions for a reader when there should be one. I'd also design the first-run state before any more marketing pages. A team that has just connected GitHub sees an empty dashboard, and that screen decides whether the free trial the whole site is selling actually converts. It isn't in this set, and it's the most important screen Northwind doesn't have.

Product page headed 'The engineering hub for high-velocity teams.' above a PR-merge-velocity dashboard, a Weekly Velocity Digest panel, a real-time PR-tracking section, an integrations row, and a 'Stop babysitting dashboards' closing band.
Product page.
More screens
Pricing page headed 'Transparent pricing for every team scale' above three tiers (Starter free, Team at $12 highlighted in cyan, Enterprise custom) with feature checklists, a six-row feature-comparison table, and a 'Stop babysitting dashboards' closing band.
Pricing, with a feature-comparison table.
Documentation page showing a 'Quick Start Guide' article with a docs sidebar (Getting Started, Integrations, API Reference, CLI), numbered install steps with copyable bash snippets, and a Slack integration settings panel of toggles.
Docs: the quick-start guide.
About page headed 'We make engineering work visible.' above the team grid, four core-value cards (Transparency, Speed, Signal over Noise, Builder-first), the investor row, and a 'Come build the future of visibility' hiring band.
About page.
Community page headed 'Built by engineers, for engineers.' above a Recent Discussions row, growth stats (4,200+ engineers, 890+ teams, 120+ countries), a 'Trending this week' thread grid, and a 'Ready to share what you have built?' band.
Community page.
Log-in screen with a 'Welcome back' card offering a Continue-with-GitHub option, email and password fields, a Sign in button, and a trusted-by logo row.
Sign-in.
Create-account screen with a 'Create your account' card offering a Continue-with-GitHub option, full-name, work-email and password fields, a 'Get started for free' button, and a link back to sign in.
Sign-up.
Password-reset screen with a 'Reset your password' card containing an email field, a Send reset link button, and a back-to-sign-in link.
Password reset.

Want to talk about this work?

I'm open to UX/UI and product design roles, and happy to walk through any of this in more depth. I'll usually reply within a day or two.