Step 1/2
project details

Tell us about
the project

Tell us everything! Share your thoughts, ideas, and any specifics about your project. The more details, the better.

Dropdown
Contact Details

How can we reach you?

Final step! Fill out your contact info, and we’ll be in touch to discuss your project soon.

Dropdown
Thank you for contacting us!

We will be in touch within 48 working hours

Keep your eyes peeled for an email from one of our founders.

Okay, got it!
Oops! Something went wrong while submitting the form.
Q20 - Self Assessment Tool

Q20 - Self Assessment Tool

Designing and building an interactive lead magnet for an engineering SaaS platform

The Objective

Quarter20 keeps engineering documentation in order from CAD through to finish, helping firms hold onto the detail that usually gets lost between handover, maintenance and the next change. We designed and built their website from scratch back when they were a startup, and have kept adding to it since with animation, interaction and conversion work.

This time they had an idea they wanted to test: a higher-quality lead magnet they could take to conventions, post on LinkedIn, and run paid ads against. The concept was an audit questionnaire for engineering firms, self-assessing how well they hand over projects, maintain them, and keep everyone on the same page. Show a firm where it's weak, then position Quarter20 as the fix.

What We Did

  • Designed every step of the questionnaire in Figma first, so we could see exactly which questions sat where and whether there were holes in the journey: starting the questionnaire, finishing it, hitting the lead magnet, entering details, receiving the report.
  • Built the scoring around four pillars of engineering operations: outdated documents, manual change coordination, version chaos, and tribal knowledge. Users get a score out of 100.
  • Locked the detailed results behind a form. The score appears straight away, the full report unlocks once a user enters their name and email, and that capture feeds Quarter20's mailing list.
  • Designed the report document as a proper learning experience: where a firm is doing well, where it isn't, what could be better, and how Quarter20 helps. It's something a user can pass on to their team.
  • Built the tool as a Next.js application hosted on Webflow Cloud under Quarter20's existing Webflow plan, carrying the site's existing styles and variables into the app so it stayed on brand without rebuilding the design system.
  • Designed the LinkedIn ad creative to run alongside the tool.
quote marks
"The What IF Web team is awesome. I'm fairly picky about who I work with, and I was really blown away by their output and professionalism. Tom is a really talented designer who takes feedback really well, and is a joy to work with. Isaac builds out the website and project manages, he makes the whole process seamless. You can really tell this team prioritizes customer satisfaction. I will be referring them to others who need websites and my company will definitely be using them for all of our website updates."
Addy First
Addy First
COO, Quarter20

The Result

Quarter20 has a self-assessment tool they own and can point people to anywhere: at conventions, on LinkedIn, or through paid campaigns. Every completed audit gives an engineering firm a clear read on where its documentation and handover process is falling down, and gives Quarter20 a named contact on the mailing list.

Because the app runs on their existing Webflow plan and reuses the site's design system, it sits alongside the website rather than as a separate thing to maintain, and it's straightforward to extend as the offer develops.

Last Updated: September 2, 2026

The Tech Stack

Take a peek inside of some of the tools we harnessed to bring this project to life.

Figma Logo

Figma

Figma

Intuitive user interface design tool for designing websites, app prototypes and more.

Webflow Logo

Webflow

Webflow

Powerful low code CMS, Web design & development platform.

Next JS

Next JS

A React framework for building fast, custom web applications.

Let’s Build Something Great Together

A rebrand. A new website. A custom app. A better way to show up online. Whatever's next, let's make sure your digital presence is ready for it.