Explore

Estimate module

What is Estimate module

The Estimate module defines the workflow for generating service estimates when bidding for a property. It ensures that estimates are created with precision, aiming to achieve the lowest possible price while maximizing gross margins.

Problem statement

The initial version of the module was designed exclusively for the Maintenance division’s estimates. However, after its integration into Accelerate, the need arose to incorporate functionality for Blueprint/Construction estimates within the product. This transition introduced several challenges that needed to be addressed:

Enhancing the Maintenance estimate module by adding more advanced functionalities.

Developing a new version of the module that maintains visual consistency across estimates for both divisions (Maintenance and Construction) while preserving key differences in data handling and information display.

Creating a user-friendly interface that allows users to input and adjust values dynamically to achieve the desired final cost. (Final values are calculated based on backend-defined formulas.)

Research topic

After in-depth discussions with the Product Manager, we identified key research areas essential for designing the best user experience. These topics help us understand the nuances of estimation processes and improve the module accordingly:

Differences between Maintenance and Construction estimates

Common line items and terminologies used in landscaping estimates

Standard cost structures utilized in landscaping (if any)

Methods used by estimators to gather data and input costs

Step-by-step process of creating an estimate

How users review, adjust, and finalize an estimate

Approach to measurements and calculations in estimates

Formulas used for labor costs, materials, markups, and profit margins

Integration with vendor pricing and databases

How estimates are shared with clients

User persona

Following type of users typically use the module -

Sales leader

Account manager

Estimator

User journey

A typical workflow for a user of the Estimate Module follows these steps:

Select the type of estimate to be worked on—Maintenance or Construction.

Enter basic project details, including:

Client name

Location

Scope of work

Start date

Retrieve measurement details from the takeoff:

If a takeoff is unavailable, the user manually enters measurements collected from the site.

Add line items based on:

Labor: Crew size, hourly rates, number of hours/days

Materials: Soil, mulch, pavers, irrigation parts, etc.

Equipment rentals: Backhoe, mowers, etc.

The platform automatically calculates totals using predefined formulas.

Review and adjust pricing by modifying:

Markup

Overhead

Profit margin

Ensuring the estimate aligns with budget constraints

Create multiple estimates with different line items, allowing the user to compare pricing variations:

Select the most suitable estimate to share with the client.

If the client requests modifications, the user updates the estimate and resends it.

Monitor the status of the estimate—whether it is accepted or rejected.

If the estimate is approved, the system generates tickets, and work on the property begins.

Design solution

⁠

xd.adobe.com_view_d702de65-2158-42b7-8bda-ebb06c6c3a01-8251_screen_d9ba5cf1-2d4a-42f9-b71e-1092c0d76a4d_fullscreen.png

(Initial estimate version)

(Initial estimate version)

⁠

While addressing the problem statement, I focused on several key design goals to enhance usability and efficiency:

Introduce a left panel, ensuring consistency across all three modules, even though it reduces the available table data area.

Enable seamless switching between the two divisions (Maintenance and Construction).

Ensure all critical information required for decision-making is easily accessible with minimal clicks.

Enhance the overall user experience by improving navigation, layout, and usability.

Design process

To better visualize the layout and structure, I began by creating low-fidelity (lo-fi) wireframes to explore potential placements for various elements.

The lo-fi wireframes were developed for two primary screens:

Landing Page: Allows users to switch between the two divisions effortlessly.

Main Estimate Screen: Displays all necessary information and functionalities for creating and adjusting estimates.

Estimate List view

Iteration 1

⁠

(Iteration of landing screen of estimate list page)

(Iteration of landing screen of estimate list page)

⁠

Feedback received Following the initial design iteration, I presented the first version for review. The feedback received provided valuable insights :

Efficient use of space:

The Estimate List Page was highly appreciated for its effective use of space.

Based on the feedback, this design was converted into a high-fidelity (hi-fi) version

Search Bar placement was not initially accepted but with time users felt that it’s placement was correct :

The search bar was originally placed on the right, but general design conventions suggest it should be on the left.

However, in this case, placing it on the left would have disrupted the linkage between the three main tabs and their corresponding sub-tabs.

Rationale for Right-Side Placement: 1. The module consists of two divisions, each with its own set of estimates.

2. Estimates are further categorized into two types:

2.1 User-specific estimate

2.2 All estimates

3. Each estimate has multiple status variations, making tab interdependencies a key design consideration.

4. The right-side placement of the search bar ensured logical flow and tab linkage, maintaining usability and structural consistency.

Optimized Data Visibility:

All essential information required by estimators was thoughtfully included as columns in the estimate table, ensuring easy readability and quick decision-making.

⁠

(Estimate list view)

(Estimate list view)

⁠

Estimate detail page view

Here comes the big part,

A crucial aspect of the Estimate Module is ensuring that users have access to all the necessary information while creating an estimate. To build the most accurate and cost-effective estimate, users need to reference multiple data points efficiently.

During the estimation process, users require access to several interconnected modules and data sources. The following list, sorted by priority, outlines the essential information needed:

Retrieve measurements from the Takeoff Module

Users need to fetch accurate measurements from the Takeoff Module to ensure precision in cost calculations.

Access pricing for Materials, Labor, and Equipment from the Setup Module

Material costs, labor rates, and equipment rental charges are fetched from the Setup Module to ensure real-time pricing accuracy.

View and manipulate all details in a table format

The user must be able to see, modify, and fine-tune all estimate-related data within a structured table.

Access deep-nested information

Certain detailed breakdowns require additional navigation:

Service Detail Page – Covers an in-depth breakdown of individual services

Item Detail Page – Provides granular data on specific items used in the estimate.

View additional estimate-related information in one place

To maintain clarity and quick reference, users should be able to access:

Property Name and Address

Takeoff Used for Building the Estimate

SOPs (if applicable)

Templates and Other Relevant Data

By structuring the estimate creation screen to accommodate these priorities, the design ensures that users can seamlessly retrieve, review, and manipulate data, leading to more efficient and accurate estimations.

Iteration 1

⁠

(Iteration 1 of estimate detail screen)

(Iteration 1 of estimate detail screen)

⁠

Feedback received :

Following the iteration review, the design received positive feedback, particularly for the collapsible top section, which improved usability by increasing the available workspace. However, additional feedback highlighted the need for even more table space, given that estimates would involve handling large datasets.

To address this, the team explored two potential enhancements:

Right-side sliding panel for services:

Instead of displaying services within the table, they could be opened as a sliding card from the right-side panel, reducing clutter while maintaining accessibility.

Collapsible sections within the table:

Introducing collapsible sections would further optimize space, allowing users to expand or collapse specific sections as needed, ensuring a cleaner and more organized interface.

These suggestions were evaluated to determine the best approach for maximizing efficiency without compromising usability. The team continued refining the design, ensuring that the final implementation would provide an optimal balance between data visibility and workspace usability.

Iteration 2

⁠

(Estimate detail screen - with collapsable islands)

(Estimate detail screen - with collapsable islands)

⁠

Feedback received :

Following the design iteration for the Estimate Creation Screen, the proposed version was presented for review. The feedback received was overwhelmingly positive, particularly regarding the collapsible top section, which introduced two key advantages:

Expanded table space:

Collapsing the top island allowed for a larger workspace, making it easier to view and manipulate data.

Improved User Experience:

With more screen area available, users could interact with estimates more efficiently, enhancing overall usability.

Given the positive reception, the team decided to proceed with this iteration and began converting it into a high-fidelity (Hi-Fi) design for further development and refinement.

⁠

⁠

The revised estimate creation screen was well received by our end customers, who appreciated the way heavy data was efficiently managed within the interface.

Key aspects that contributed to its positive reception included:

Clickable first column:

The first column was designed to be clickable, allowing users to navigate directly to the detailed page of the selected item.

Scrollable middle section:

The middle section of the table was made horizontally scrollable, enabling the inclusion of a maximum number of columns while maintaining readability.

This ensured that users could access all necessary details without overwhelming the interface.

These enhancements significantly improved usability and navigation, making it easier for users to interact with complex estimate data while keeping the interface structured and efficient.

Following the release of the Estimate Module, we continued gathering user feedback and proactively worked on enhancing the UX of the platform. Over time, we introduced several key features that significantly improved functionality and usability.

New Features & Enhancements

Negative workflow

Introduced support for negative line items, allowing users to account for cost reductions or credits in an estimate.

Change orders

Enabled users to create and manage change orders, ensuring flexibility in modifying estimates after initial approval.

Sharing estimates with multiple team members

Allowed estimators to share an estimate with other team members for review and collaboration.

Comment functionality for team collaboration

When an estimate is shared, team members can now add comments, enabling seamless discussion and teamwork.

Summary tab for cost Breakdown

Introduced a dedicated summary tab where users can access a detailed cost breakdown, including pricing, taxes, and additional costs.

Adjustable column widths

Users can now resize table columns, accommodating long project names and ensuring better data visibility.

Update functionality

Provided users with the ability to update key data points directly within the estimate:

Pricing updates – Users can update labor, equipment, and material pricing from the Setup Module.

Measurement updates – If measurement values change in the Takeoff Module, users can quickly sync updates in their estimates.

Update - which would allow users to update

either pricing of labor, equipment and material from setup

or measurement values from takeoff - if by any chance something gets updated

Quick update feature

Enabled users to apply bulk changes across an estimate efficiently.

Example use case: In certain countries, all materials are taxed at a fixed rate (e.g., 15%). This feature allows users to apply default tax values across all items while still offering flexibility for custom adjustments in edge cases.

With the release of the latest features, the Estimate Module interface evolved to provide a more structured, user-friendly, and efficient experience. The enhanced design ensured seamless navigation, better data accessibility, and improved collaboration.

⁠

(Estimate detail view with all the features incorporated)

(Estimate detail view with all the features incorporated)

⁠

Secondary navigation bar enhancements

The secondary navigation bar was optimized to hold critical estimate-related information and actions:

Estimate Name & Breadcrumbs – Displayed at the top for easy navigation.

Legend indicators for user guidance:

Positive & Negative types – Indicates whether a line item is categorized as a Positive (addition) or Negative (deduction) type.

Data missing – Alerts users about missing inputs or required fields.

Comment section – Clicking on this opens a sliding panel from the right for team discussions and feedback.

Update CTA – Provides a dropdown menu for selecting:

Pulling cost updates from the Setup Module.

Pulling measurement updates from the Takeoff Module.

Summary CTA – Clicking on this opens a right-side panel displaying a detailed price breakdown, including costs, taxes, and adjustments.

"Estimate Details" section (Top Island)

The top island labeled "Estimate Details" serves as a quick reference panel, providing key information relevant to the user:

Estimate Status – Displays the current stage of the estimate.

Property Name – A clickable link that redirects users to the Property Detail Page.The estimate template that’s being used

Estimate Template – Shows the template used for the estimate.

Deal Association – Indicates the deal for which this estimate is being built.

Linked Takeoff & Type – Displays the associated takeoff and its type.

Notes & Attachments – Allows users to add or view important notes and relevant documents.

Table & related functionalities (Bottom Section)

The bottom section primarily consists of the estimate data table and its supporting functionalities:

Search bar – Users can search for items by name across the table.

Undo & redo CTAs – Allows users to revert or redo recent changes effortlessly.

Reduction workflow – A dedicated feature (detailed separately), enabling specific reduction functionalities.

Quick update – Enables bulk modifications to specific values in the estimate.

Table design & navigation:

Horizontal & vertical scroll – Facilitates easy navigation through large datasets.

Sticky first & last columns – Ensures quick reference to essential information, reducing the need for excessive scrolling.

These enhancements significantly improved the usability of the Estimate Module, ensuring that users could efficiently navigate, edit, collaborate, and finalize estimates with ease. The thoughtful placement of interactive elements, structured data visibility, and intuitive controls contributed to a streamlined, high-performance workflow.

Learning

Working on the Estimate Module was a deep and insightful experience that reinforced several key design principles. Throughout the process, I encountered real-world challenges that required balancing functionality, user experience, and data-heavy workflows. Below are some of the core learnings that emerged from this project:

Prioritizing data accessibility & user efficiency

Understanding user needs: Estimators rely on large datasets, requiring a design that ensures quick data retrieval, easy navigation, and clarity.

Optimizing table space: Introducing scrollable sections, collapsible panels, and sticky columns significantly improved usability for data-heavy workflows.

Striking a balance between structure & flexibility

Users have different ways of working, and designing a rigid system would limit usability. Providing adjustable column widths, bulk update features, and flexible workflows ensured that the module catered to varied user needs.

Implementing secondary navigation for essential CTAs improved workflow efficiency without overwhelming the interface.

Iterative design & user-centric refinements

The collaborative feedback process played a crucial role in refining the designs. Features such as:

Collapsible top island (expanding table space)

Sliding panels for comments & summaries

Bulk update options for cost and measurement sync

Redesigning the search bar placement based on UI logic significantly enhanced user interaction.

Enhancing collaboration through UI improvements

Implementing comment functionality & multi-user sharing made the estimation process more collaborative, aligning the platform with real-world workflows.

Providing contextual legends & visual cues helped reduce confusion and improved the discoverability of key actions.

The power of prototyping & early testing

Creating low-fidelity wireframes first allowed me to experiment with layouts and identify potential usability challenges before moving to high-fidelity designs.

Early testing and iterative refinements ensured that the final product aligned with user expectations and business goals.

Designing for a data-heavy, decision-making process like estimation requires a balance between efficiency, clarity, and flexibility. Proactively iterating on feedback, optimizing space utilization, and enhancing collaboration features were the most impactful improvements that shaped the final design.

This case study reinforced the importance of designing not just for usability but also for adaptability - ensuring that the interface evolves alongside user needs.

What is Estimate module

Estimate detail page view

Learning

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

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

CtrlP

) instead.