Font-end Development

From Chaos to Clarity - Building Flowrap’s Automated Quoting System

Jamie

Jamie

From Chaos to Clarity - Building Flowrap’s Automated Quoting System

Jan 2025 - March 2025 | Designer–Developer | Flowrap (Private Client)

Tools: HTML, CSS, JavaScript, Zapier, Netlify, Pipedrive

🔗 Demo Link: https://shorturl.at/xRQxg

The Challenge: No System and Missed Opportunities

Flowrap, a rapidly growing vinyl wrapping company, had millions of followers across social media — TikTok, YouTube, Instagram, Facebook — and a consistent flood of quote requests coming from all angles.

But behind the scenes, the process was broken. Prospects were scattered across platforms. Quotes were manually written, tracked (or not) in DMs. Leads slipped through the cracks. Time was wasted.

Flowrap needed a single place for quotes, a way to automate the quoting and pricing process, and a CRM-backed system to track and convert every opportunity.

My Role: Full Stack System Builder

I partnered directly with Flowrap to design, build, and deploy a complete quoting system:

  • A responsive website
  • A custom quoting tool
  • Automated emails and pricing logic through Zapier
  • Integration with Pipedrive CRM

I handled the entire product cycle — from discovery and design to development and automation.

Discovery: Understanding the Real Problem

Flowrap’s founder and I worked through the core frustrations:

  • No centralised quote intake process
  • No tracking or prioritisation of leads
  • Frequent pricing inconsistencies

We defined the goals clearly:

  • Streamline quote capture and delivery
  • Reduce manual effort
  • Create a system that scales with the business

Design & Build: Simple on the Outside, Smart on the Inside

I designed and developed a clean, accessible website with a multi-stage quoting tool. It guided users through key options like kitchen door and drawer type, metres of worktop, and contact information — using progressive steps and a keyboard-navigable, ARIA-compliant interface.

Under the hood, I built an automation system using Zapier:

  1. Form Submission: Netlify form captures user data from the quoting tool.
  2. Custom Pricing Logic: Zapier triggers custom JavaScript to calculate exact pricing (with and without VAT).
  3. Instant Quote Delivery: HTML email with the user’s quote is sent via Outlook.
  4. CRM Integration: Zapier checks Pipedrive for an existing contact; if none, it creates one.
  5. Deal Creation: A new deal is logged in Pipedrive with full quote data, location, value, and contact details.

flowrap steps flowrap steps

Challenges

  • Built entirely in vanilla HTML, CSS, and JS (no frameworks)
  • Developed while the client’s pricing structure was still evolving
  • Worked mostly independently, as the client had limited time
  • Needed to maintain accessibility and performance across devices

Results: A Business Transformed

In just the first week, the new system captured over half a million pounds in potential leads — all tracked, structured, and flowing through Pipedrive with no manual input.

The quoting system:

  • Saves Flowrap hours of admin time
  • Provides instant quotes to prospects
  • Centralises all lead data for smart follow-up

It’s now live and in daily use — a core part of how the business operates.

What I’m Proud Of

  • Delivering real automation value for a real business
  • Writing custom code that seamlessly integrates with third-party systems
  • Building something robust and scalable without relying on a framework

🔗 Demo Link: https://shorturl.at/xRQxg