Explore

Proposal module

What is a proposal

A proposal is a formal document presented by an Account Manager or Sales Representative to a property owner or manager. It serves as a detailed overview of the landscaper's services, pricing, and contract terms.

A proposal is always linked to an estimate, ensuring that the pricing and service details align with the approved calculations. It plays a crucial role in securing a contract by clearly outlining the value proposition and scope of work for the client.

Problem statement

Before designing the Proposal Module, we identified several key challenges that needed to be addressed:

Making the proposal module standalone

Over time, it became clear that the Proposal Module should function independently, rather than being tightly coupled with other modules.

Seamless data transfer from estimate to proposal

The proposal should automatically pull all relevant information from the Estimate Module, while allowing users to select and customize what details appear in the final proposal.

Switching between editing mode & PDF view

Users needed an easy way to toggle between editing mode and a preview (.PDF view) of the final proposal to ensure accuracy before sharing.

Customizable placeholder names

To accommodate different business needs, users should have the flexibility to rename placeholders within the proposal template.

Addressing these challenges was critical to ensuring that the Proposal Module provided a flexible, user-friendly, and efficient workflow for Account Managers and Sales Representatives.

Research topic

To ensure the Proposal Module effectively meets user needs, I identified key research areas that needed to be explored. These topics helped in understanding user workflows, challenges, and expectations when creating proposals.

Essential information for a proposal

Identifying the key details required to build a comprehensive and compelling proposal.

Gathering & organizing project site & client details

Understanding how users collect, structure, and input project-specific and client-related information.

Existing tools & software for proposal creation

Evaluating what methods and platforms users currently rely on to draft and manage proposals.

Challenges in proposal preparation

Identifying pain points users face when drafting, customizing, and finalizing proposals.

Time-consuming & frustrating aspects of the proposal process

Pinpointing bottlenecks in the current workflow to streamline efficiency within the new module.

This research helped shape a user-friendly, efficient, and customizable Proposal Module, ensuring it effectively integrates with existing workflows while improving the proposal creation experience.

User persona

Sales leader

Account manager

Estimator

Owner

Production manager

Business Development Representative

Branch manager.

User journey

The Proposal Module streamlines the process of creating, reviewing, and finalizing proposals, ensuring seamless collaboration and efficiency. The typical workflow follows these steps:

Drafting the proposal

Once the estimate is complete, users begin drafting the proposal using a software tool or pre-defined template.

The proposal includes:

Detailed service descriptions

Project timelines

Cost estimates (pulled from the Estimate Module)

Terms and conditions

Internal collaboration & validation

Users collaborate with project managers, foremen, or other stakeholders to ensure accuracy and feasibility.

This step may involve meetings or discussions to finalize details before client presentation.

Reviewing & refining the proposal

The draft proposal is reviewed for:

Accuracy (ensuring all data is correct)

Completeness (checking all necessary details are included)

Professionalism (refining content to make it clear and compelling)

Users double-check calculations, formatting, and alignment with client expectations.

Client engagement & revisions

The proposal is shared with the client for review.

Users may need to answer questions, clarify details, or make adjustments based on client feedback.

Client discussions can happen via email, phone calls, video conferences, or in-person meetings.

Finalizing & sending the proposal

Once all revisions are made, the proposal is finalized and professionally formatted.

The final document is sent to the client through email, a proposal management system, or any agreed-upon method.

Tracking & internal documentation

Users update internal records and systems to track proposal status:

Sent (proposal has been shared with the client)

Pending approval (waiting for client decision)

Requires follow-up (needing further discussions or revisions)

Winning the proposal & transitioning to execution

If the proposal is approved, the next steps include:

Scheduling services based on agreed timelines.

Coordinating execution with field teams to begin work.

This transition is seamlessly integrated with other modules, ensuring smooth project initiation.

Design solution

⁠

The old proposal page - where user can drag and drop from sections panel

The old proposal page - where user can drag and drop from sections panel

⁠

The new proposal page - with all the required information, editing functionalities lie in "Edit proposal" section

The new proposal page - with all the required information, editing functionalities lie in "Edit proposal" section

⁠

While designing the Proposal Module, I focused on addressing key concerns and product requirements to ensure an intuitive, efficient, and user-friendly experience.

Managing space constraints with the left panel

Since a left-side panel was introduced (a common challenge across all modules), efficient use of space was a priority.

The design needed to balance content visibility while ensuring essential tools and navigation remained easily accessible.

Displaying key information for a quick start

Users often require context before drafting a proposal.

To enhance workflow efficiency, the UI was designed to show relevant details upfront, such as:

Client details

Linked estimate information

Project scope

Proposal status

UI & UX enhancements for better component placement

Thoughtful restructuring of page sections to:

Ensure logical information flow.

Keep frequently accessed actions within easy reach.

Provide a cleaner, less cluttered interface.

Introducing a comment panel for real-time collaboration (Future Consideration)

Recognizing the need for multi-user collaboration, a comment panel was proposed for future iterations.

This feature would allow team members to:

Discuss and refine proposals within the module.

Track feedback, suggestions, and revisions without external tools.

Seamless navigation between pages

Improved in-module navigation to allow users to:

Easily switch between different sections without losing progress.

Quickly move between proposals, estimates, and other related documents.

Enhancing the proposal list page

Identified key details to be shown upfront on the list page for quick reference, including:

Proposal name & client information

Status (Draft, Sent, Pending Approval, Approved, Rejected, etc.)

Last modified date & assigned team member

Linked estimate reference

The Proposal Detail Page was designed to function like a document editor, offering users a familiar and intuitive interface to create and format proposals seamlessly. The goal was to provide full-fledged editing capabilities while maintaining ease of use.

Core document editing features To ensure a smooth drafting experience, the editor includes:

Text formatting options – Changing font style, size, and color.

Indentation & alignment – Structuring content for clarity.

Bullet & numbered lists – Organizing key points effectively.

Adding media – Inserting images, tables, and placeholders from the sections panel to structure the document professionally.

Research & UI inspirations To design an efficient and user-friendly editor, I explored industry-leading platforms and UI references, drawing inspiration from:

Google Docs – Simple, intuitive, and widely adopted for document creation.

Microsoft Word – Rich feature set with deep formatting and customization options.

Apache OpenOffice Writer – Open-source editor with practical formatting features.

UI Inspirations from Design Platforms:

Dribbble & Behance – For modern UI trends and visual aesthetics.

Refero & Other Online Tools – To analyze different layout approaches.

By combining best practices from leading document editors with modern UI/UX design principles, the Proposal Module offers a flexible, professional, and user-friendly document editing experience tailored for proposal creation.

To ensure a structured and user-friendly proposal editing experience, I started by creating low-fidelity (lo-fi) wireframes for the Proposal Detail Page. This process helped define the layout, hierarchy, and user journey before moving to high-fidelity designs.

Defining page structure & hierarchy

I listed all the essential elements that needed to be displayed on the page.

Ensured a clear hierarchy to improve readability and navigation.

Differentiating between preview & edit modes

Certain elements were only relevant during editing, while others needed to be part of the final preview version.

Preview page: Displays the final formatted proposal as it will appear to the client.

Edit page: Allows users to modify content, adjust formatting, and insert placeholders.

Structuring the user journey into multiple sections

To create an intuitive flow, I divided the user journey into logical sections and designed screens accordingly.

This ensured that each step of drafting, reviewing, and finalizing the proposal was seamless.

Merging related sections for better usability To reduce redundancy and streamline the user experience, I merged the following sections:

Property & deal details – Since a proposal is always linked to a property and a deal, these details were grouped together to provide contextual relevance in one place.

Customer data placeholders – Important placeholders for customer-specific details were integrated into the same section to maintain logical flow and ensure all required information is easily accessible.

By structuring the Proposal Detail Page with a well-defined hierarchy, modular layout, and improved organization, the design ensures a seamless drafting experience while maintaining clarity between preview and edit modes.

Iteration 1

⁠

(Lo-fi iteration 1 of Proposal detail page)

(Lo-fi iteration 1 of Proposal detail page)

⁠

Feedback received :

After sharing Iteration 1 of the Proposal Detail Page, the team provided positive feedback on the overall design while highlighting areas that needed further clarification.

Visual design & layout approved

The page looked good and had a well-structured layout.

Space utilization was efficient, ensuring a clean and uncluttered interface.

Seamless navigation

Users could easily navigate to other relevant pages, making the workflow more intuitive.

Unclear editing workflow

The team raised concerns about how users would edit the proposal.

There needed to be a clear entry point into editing mode within the UI.

Comment mode access not defined

It wasn’t clear where the user would enable comment mode for collaboration.

A more visible and accessible placement for this feature was necessary.

This feedback provided valuable insights to further refine the Proposal Detail Page, ensuring a more intuitive and user-friendly experience.

Final screen

⁠

(Hi-fi version of proposal's detail page)

(Hi-fi version of proposal's detail page)

⁠

Want to print your doc?
This is not the way.

Try clicking the ··· in the right corner or using a keyboard shortcut (

CtrlP

) instead.