Streamlining the Quoting Process with a SaaS Tool (MVP)

My Role: UI/UX Designer & Frontend Developer
Project Type: MVP for a SaaS Tool
Team: 4 people (Designer/Dev, PM, Sales, Backend Dev)
Status: MVP phase, not launched or tested yet

Project Overview

Problem: Businesses spend too much time manually calculating quotes using spreadsheets.
Solution: A quoting tool that automates calculations, allowing users to create, save, and reuse templates for faster and more accurate quotes.

The Challenge

Many businesses rely on spreadsheets and manual calculations to generate quotes, which is time-consuming and error-prone. The CEO, who had first-hand experience with this problem, envisioned a faster, more accurate quoting tool. My role was to transform this vision into a clear, intuitive interface.

Wasted Time
Tedious data entry and calculations
Human Errors
Small mistakes leading to incorrect quotes
Inefficiency
No reusable templates for frequent tasks

Design Process

With limited initial input and no existing product, I approached this as a lean MVP project. My process focused on fast validation and continuous collaboration with the CEO and dev team.

Discovery: Interviewed the CEO to understand quoting pain points and real-world workflows.
Sketching: Created low-fidelity wireframes to map the user flow from inventory selection to quote generation.
Validation: Walked through early mockups with the team to gather feedback before diving into visuals.
Design Iteration: Built interactive Figma prototypes and refined them based on usability and dev feedback.
Dev Handoff: Built out the UI in React using Tailwind.

User Flow

We designed a clear, step-by-step quoting process to minimize effort.

Step 1 & 2: Task/Inventory selection

Step 3: Generate Quote

Designing the Interface

My goal was to design a UI that feels familiar to spreadsheet users while reducing cognitive load.

Early Wireframes

Initial wireframes mapped out the quoting process step by step.

Refinements & Final UI

Through iterations, we improved usability by:

Combining "Choose Category" and task selection into one step
Moving pricing adjustments to the final quote generation step

Next Steps

Since the product is still in its very early stages, the next steps aim to refine the user experience, gather real-world feedback, and expand the tool’s functionality to meet the needs of our target users more effectively. Here’s what’s planned for the next phase:

User Testing
Refine usability with real feedback
Beta Version
Launch for early adopters
Mobile Version
Improve on-the-go quoting

What I Learned

During this project, I faced several challenges, especially being the sole designer with limited experience. One of the biggest hurdles was not knowing how to structure the project initially, which led to a lot of iteration and refinements. While this took a lot of time, it ultimately helped me create a more polished design.
I also learned that early collaboration with developers helps avoid design bottlenecks later on. As the only designer on the project, I had to wear many hats, which taught me how important it is to balance ideal UX with technical constraints, especially when working on an MVP.
Overall, this project reinforced that iteration and continuous refinement are crucial in design, especially when you’re working with limited resources and experience.

Final Thoughts

This project challenged me to design for both usability and feasibility. While not yet launched, it was a valuable experience in refining complex workflows.