Explore

Takeoff module

I solved this problem statement with my Product manager

Glossary

Takeoff - This is an industry-term for property-measurements.

Imagery - Attentive uses high-resolution aerial and satellite photos for property-measurements. We call these as imagery.

Maintenance - General upkeep of a property’s outdoors. Usually a 1 year all-season contract

Construction/Design - Large upgradation or revamp project on a property’s outdoors. Requires designs apart from measurements.

Aerial takeoff - Property-measurements conducted on imagery of the property is referred to as aerial takeoffs.

Blueprint takeoff - Property-measurements conducted on an architectural plan of the property usually in PDF format.

Lo-fi - It stands for Low fidelity wireframes which basically means to create a basic layout so that we have an idea or reference point to refer to

What is Takeoff module

The Takeoff Module enables landscapers to measure properties they intend to bid for or service. The calculated measurements, referred to as "Property Features," serve as key data points in the estimation process. These values are then seamlessly integrated into the Estimate Module, where they are used to determine the final pricing for the customer.

This module ensures accuracy and efficiency in property measurement, forming the foundation for cost estimation and service planning.

Problem statement

The initial version of the Takeoff Module supported only Aerial Takeoffs. However, with its integration into Accelerate, we saw an opportunity to enhance functionality by introducing Blueprint Takeoffs as well. This expansion introduced several design and usability challenges that needed to be addressed:

Optimizing information display – Ensuring that all necessary data is accessible to the user without compromising map size.

Enhancing user experience – Improving the workflow and usability to create a more intuitive and efficient takeoff process.

These challenges required a thoughtful approach to UI/UX design, balancing data visibility, usability, and efficiency for a seamless user experience.

Research topics

To effectively address the problem statements, we conducted research on the following key areas:

User identification – Understanding who will be using the product and their specific needs.

User workflows & daily challenges – Gaining insights into the day-to-day tasks of our users to tailor the experience accordingly.

Competitor analysis – Evaluating whether any existing platforms offer similar functionality and identifying areas for improvement.

Potential user pain points – Identifying possible blockers or challenges that could hinder the user experience and ensuring proactive solutions.

This research helped in designing a more intuitive, user-friendly, and efficient Takeoff Module that aligns with real-world needs.

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 Takeoff Module involves several key steps, from initial project review to measurement gathering and estimation. The process ensures accurate calculations, which ultimately feed into the Estimate Module for pricing and bidding.

Reviewing project plans & specifications

Start the day by reviewing new project plans, blueprints, or specifications received from clients or the design team.

Understand the scope of work, required materials, and any special instructions.

Site assessment & data collection (For Non-Aerial Takeoffs)

Visit the project site to gather physical measurements and assess the landscape.

Identify key terrain conditions, existing structures, and potential challenges.

Take notes and photographs to assist in the takeoff process. (For aerial takeoffs, this step may be skipped.)

Performing the takeoff (Digital measurement process)

Access the Takeoff Module within the platform.

Select the relevant project type – Aerial or Blueprint Takeoff.

Begin measuring and quantifying necessary elements, including:

Land area & surface types

Materials required (soil, mulch, plants, pavers, irrigation components, etc.)

Labor & equipment estimates based on project requirements

Refining & reviewing data

Ensure all necessary measurements and calculations are captured accurately.

Adjust for any missing details, potential discrepancies, or project-specific constraints.

Transition to the estimate module (Handover to the Next Phase)

Once the takeoff process is complete, the collected data flows into the Estimate Module.

The estimator then creates a detailed estimate, which undergoes review and discussion with the sales team.

If the estimate is approved, a proposal is created, leading to the final bid submission for the property. (This phase transitions to a different module.)

Design solution

⁠

The screen when a Takeoff is in draft stage

The screen when a Takeoff is in draft stage

⁠

The screen when a Takeoff is completed

The screen when a Takeoff is completed

⁠

The above placed screens are of the initial “Autobid” product which was later merged into Accelerate.

To address the challenges identified in the Takeoff Module, I focused on several key design goals to ensure an optimal balance between usability, information accessibility, and workspace efficiency.

Introducing a left panel (Balancing Workspace & Information)

A left-side panel was introduced to accommodate essential controls and information.

However, since map visibility is critical, we carefully optimized the panel size to avoid compromising too much of the workspace.

Providing tool descriptions for better user guidance

Users needed clear explanations of the tools they were selecting.

Initially, these descriptions were planned as hover cards near the tool over the map, ensuring contextual guidance without obstructing usability.

Enhancing the overall user experience

Focused on improving navigation, tool accessibility, and workflow efficiency.

Ensured a clean, intuitive interface that allows users to complete takeoffs with minimal friction.

These design considerations helped create a more user-friendly and efficient Takeoff Module, ensuring seamless interaction while preserving workspace visibility for accurate measurements.

To ensure a structured and intuitive Takeoff Module, I began by creating low-fidelity (lo-fi) wireframes of the Takeoff Page. This helped in visualizing the layout and identifying key elements required for a seamless user experience.

Defining essential screen elements

I listed down all necessary components to be displayed on the screen, ensuring users have access to the required tools and information without clutter.

Structuring the user flow into multiple steps To make the process more intuitive, I broke the workflow into a series of easy-to-follow steps:

Step 1: Selecting the property location

Users can input the address manually to fetch the property details.

For Accelerate users, the system would auto-fill the property location as this data is already available.

Step 2: Entering essential information & configuring takeoff

Users add only the necessary details, such as:

Instructions for measurement

Site maps

Specific property features they want calculated

Users also interact with tools at this stage to configure measurements (applies to point 2.d. as well).

Step 3: Processing the takeoff calculation

Users wait while the system processes the takeoff in the background.

A dynamic status update is displayed, keeping users informed about progress.

Step 4: Reviewing & editing measurements

Once the takeoff is calculated, users can view the measurements.

If necessary, they can make adjustments before finalizing the data.

By breaking the workflow into clear, progressive steps, the takeoff process became more structured, user-friendly, and efficient.

Iteration 1

⁠

(Lo-fi iteration 1 of Takeoff screen)

(Lo-fi iteration 1 of Takeoff screen)

⁠

Feedback received :

After sharing Iteration 1 with the team, I received constructive feedback on areas that needed improvement for a better user experience and screen optimization. The key points were:

Map size optimization

The map still appeared small, especially considering that essential action buttons (zoom in, zoom out, change map version) would take up additional screen space.

A better approach was needed to maximize the visible map area while keeping controls easily accessible.

Merging page heading & toolbar

Instead of separating the page heading and toolbar, merging them could free up space and create a cleaner layout.

Reducing fragmentation of information

Breaking information into too many steps made the workflow feel disjointed.

The suggestion was to consolidate related information within fewer sections to provide a more seamless experience.

Based on this feedback, I refined the design to enhance map usability, streamline the UI, and improve workflow efficiency, ensuring a better experience for users.

Iteration 2

⁠

(Lo-fi iteration 2 of Takeoff screen)

(Lo-fi iteration 2 of Takeoff screen)

⁠

After implementing the changes from Iteration 1, I shared Iteration 2 with the team. The feedback indicated significant improvements, especially in terms of map visibility and information accessibility, but there were still areas that could be refined further.

Key takeaways from the feedback

Improved map size, but further optimization needed

While we increased the map size, it wasn’t a major expansion.

Since maximizing map space was a primary goal, further refinements were encouraged to get the best possible layout.

Positive reception from the team

This iteration was well received by stakeholders.

They appreciated how the design now allowed users to access all necessary information at once without excessive navigation.

Further UX enhancements suggested

Property-Feature table improvements – A better way to present, organize, or interact with the data in the table was needed.

Tool descriptions & usability guidance – Users needed clearer explanations on how the tools functioned and how to use them effectively.

Based on this feedback, I focused on:

Exploring ways to further maximize the map size while maintaining usability.

Enhancing the property-feature table experience to improve readability and usability.

Providing clear, in-context tool descriptions to guide users on their functionality and best practices.

Iteration 3

After analyzing the feedback received in Iteration 2, I explored potential solutions to enhance the property-feature table experience and improve tool usability guidance while still maintaining optimal map visibility.

Improving the Property-Feature table with clear identifiers

Property features are typically classified into three types:

Surface (e.g., grass areas, pavement)

Edge (e.g., fences, hedges)

Point (e.g., trees, light poles)

By introducing visual identifiers or grouped tabs, users could quickly navigate between these types instead of scrolling through an extensive table.

This would allow for a more structured and intuitive interaction, ensuring users can easily focus on the relevant property feature type.

Optimizing Layout by Repositioning Property Information

Since property details are not essential when users are actively using a tool, shifting this information below the tool descriptions would:

Reduce clutter in the primary workspace.

Allow the tool description to be more prominent, guiding users effectively.

Ensure that users only see the property details when needed, instead of taking up unnecessary space during tool interaction.

These adjustments would create a cleaner, more intuitive workflow, making property feature selection more efficient and ensuring users get tool guidance without distractions.

Next Steps

Implement clear identifiers or grouped navigation for property-feature types.

Reorganize property details & tool descriptions for a more seamless user experience.

Continue testing and refining based on user interactions.

⁠

(Property feature table)

(Property feature table)

⁠

Feedback received : After implementing the proposed property-feature table improvements, I shared the updated design with the team. The feedback was overwhelmingly positive, reinforcing that the changes aligned well with user needs.

Positive reception across the team

The revamped design was well-received by everyone.

Stakeholders appreciated the structured categorization of Surface, Edge, and Point features, making navigation more intuitive.

Improved interactivity & user understanding

The updated approach made the screen more interactive, reducing cognitive load.

Users found it easier to locate and work with different property-feature types, enhancing overall usability.

With this successful iteration, the next step was to refine the tool descriptions and placement to further improve the user experience.

Final screen

⁠

(Journey of information panel)

(Journey of information panel)

⁠

(Completed takeoff's screen)

(Completed takeoff's screen)

⁠

(Tool related information displayed)

(Tool related information displayed)

⁠

Learning

Working on the Takeoff Module was an insightful experience that reinforced several key design principles, especially when dealing with interactive mapping, data-heavy workflows, and tool usability. Throughout the process, I learned how to balance functionality, clarity, and user experience while refining the module based on continuous feedback.

Prioritizing screen space & visual hierarchy

Optimizing map visibility while displaying essential tools and data was a critical challenge.

The introduction of collapsible sections and reorganizing property details ensured that the screen remained clean and user-friendly without compromising key functionalities.

Making complex data more intuitive

Property features were categorized into Surface, Edge, and Point, making it easier for users to navigate and interact with takeoff data.

Visual identifiers and structured groupings improved accessibility and reduced cognitive load.

The importance of iteration & user feedback

Each design iteration helped refine the user experience, addressing real-world usability concerns.

Feedback on the property-feature table and tool descriptions showed that even minor adjustments can significantly enhance user interaction and clarity.

Enhancing tool usability & discoverability

Providing clear tool descriptions and ensuring they were contextually placed improved usability.

Keeping unnecessary information hidden when tools were in use helped maintain a focused workflow.

Designing for spatial and data-heavy workflows requires balancing functionality with ease of use. Through continuous refinement, structured categorization, and UI optimizations, I was able to create a more intuitive and interactive Takeoff Module that meets user needs while enhancing efficiency.