Web App · SaaS · UI Design · 2024

Quotes,
Instantly.

In Development Figma shadcn/ui Web App SaaS UI Design
Role
Product Designer
Type
Web Application
Timeline
2026
Status
In Development
Quote Maker dashboard

Proposals, SIMPLIFIED.

The Problem

Creating a business quote takes too long. Most teams use spreadsheets, email threads, and manual formatting. By the time the quote reaches the client, the moment has already passed.

There was no simple tool that let a small business or freelancer build a professional, branded quote in minutes and send it instantly.

The Approach

Designed a clean web app built on shadcn/ui components. The focus was on speed: open the app, fill in the details, send. No learning curve, no clutter.

Three core screens: quote builder, preview, and client-facing PDF view. Everything designed to make the user look professional without any design skills required.

Built for SPEED.

3
Core screens designed: builder, preview, PDF view
1
Design system used: shadcn/ui component library
5m
Target time to create and send a professional quote
0
Design skills needed by the end user
★ Features

What it DOES.

Fast Builder

Add line items, set prices, and apply your branding in one screen. No tabs, no toggling.

🎨

Brand Ready

Upload your logo, pick your colours, and every quote looks like it came from a design agency.

📄

PDF Export

One click generates a clean, client-ready PDF. No formatting headaches.

👀

Live Preview

See exactly what your client will see before you send. What you design is what they get.

💬

Status Tracking

Know when a quote is sent, viewed, or accepted. No more chasing follow-ups blind.

📋

Templates

Save your best quotes as templates. Repeat work becomes a 30-second job.

★ Design

Dashboard — Light Mode

The main hub where users manage all their quotes. Clean card layout with status badges — sent, viewed, accepted — so nothing falls through the cracks.

Dashboard light mode

Dashboard — Dark Mode

Full dark mode support for users who prefer it. Same information density, same hierarchy — just easier on the eyes for late-night quoting sessions.

Dashboard dark mode

Document Settings

Brand it and own it. Upload a logo, set your brand colour, add your business details. Every quote that goes out looks like it came from a proper agency.

Document settings

Quote Builder

Add line items, set prices, write notes, apply taxes — all in one screen. No tabs, no modal gymnastics. Fill it in, preview it, send it. Done in under 5 minutes.

New quote builder
3
Core screens: builder, preview, and PDF export
5m
Time to create and send a professional quote
0
Design skills needed to use it
Next Project →

PinkFlicks: AI Video Creator

04