Case Study —
Derisking Projects for Commercial Contractors
Expanding the BuildOps platform to expand market share.
contents
Project work for commercial contractors is full of financial risk as they face larger financial exposure over a lengthened timeline. With the design and implementation of the major Projects Management feature stack we sought to support our customers in order to grow their businesses and create tools that allowed our customers to avoid surprises through real-time visibility and control.
The goal of the multi-phase release of Projects (project management) for BuildOps was to support our larger commercial contractors, whose bottom line depended on profitable project engagements. The strategy was to deliver a comprehensive set of project management tools within the existing BuildOps platform, allowing our customers to navigate seamlessly between service work and the new project management features.
Design
Sean Locke, Lead Product Design
Ashley Tai, Product Design
Dan Guerra, Product Design
Hannah McTavish Stroud, Product Design
Product
Michael Carey, Head of Product
Mohit Sinha, Director of Product
Gabe Rubin, Group Product Manager
TIMELINE
Multi-phase, multi-year.
Users & Audience
Ownership
Project Managers
Field Foreman
Field Technicians
Accounts Payable
Accounts Receivable
Project Managers
Field Foreman
Field Technicians
Accounts Payable
Accounts Receivable
Project Homepage
Business Context —
What is BuildOps?
BuildOps supports commercial contractors who keep our economy running by delivering a comprehensive, centralized business software platform. The cloud-based BuildOps platform handles scheduling and dispatching, quotes and service agreements, invoicing, time tracking, reporting, and payments. All API-connected to major accounting software platforms.
Problem —
The BuildOps platform wasn't designed for larger contractors.
As the BuildOps platform added tenants, our ideal customer profile changed dramatically. Larger contractors were joining, but we were failing to capture the entirety of their business. Initially, our customers were smaller shops primarily doing service work— one-off repair jobs by individual field technicians dispatched in real-time.
Over time, we attracted hybrid contractors who managed both projects and service work — longer-term projects by dedicated crews on new construction. We discovered that some tenants had repurposed the service features for projects, but the results weren't ideal.
At the time, we had no proper means of supporting this distinct type of work. This impacted sales as our addressable market was limited to smaller shops. If we wanted to win larger shops, we needed to support all their operations.
Supporting project work required handling more complex workflows outside the realm of service. This involved managing and scheduling longer-term work with dedicated technician crews over days, weeks, and months. These differences from the existing UI patterns of service work meant introducing additional organizational structures for projects.
Solution —
Launch Projects in multiple phases.
contents
The scope of Phase 1 was extensive and included project setup and configuration, budgeting and estimating, project phases, schedule of values, general ledger accounting, cost codes, change orders, field reports, time tracking, RFI submittals, scheduling, and file management. This required months of design and development work.
Phase 2 and beyond encompassed enhanced workflows for major features already delivered in Phase 1, as well as tackling more complex features needed for a professional project management suite for commercial contractors. These features included Project Scheduling and Planning, Change Order Revisions, Bills of Materials, and Drawings.
UX Design Principles —
Based on our user research, we were led by four principles to guide design decisions for the project.
1
Interconnectivity
Projects integrated into to central platform
2
High Visibility
Surfacing the most critical KPIs that drive profitability and mitigate risk.
3
Real-time Control
The ability to immediately make adjustments and take control of project phases that are at risk.
4
Scalability
Design and implementation that provided a flexible scaffolding for Projects allowing change, enhancement, extension without disorientation to users.
Phase 1 —
Scaffolding for the future.
The goal for the Phase 1 release of Projects was to roll out a rich set of project management features for our customers and to design a flexible structure for Projects that could accept continual enhancements in future releases without needing a redesign. Here, we’ll look at the UX Research that informed the layout of the dashboards and project home screens, and the designs supporting the Project Settings. In Phase 2, we’ll look at our rethink of Project Setup as a guided process.
Very important in all these efforts was keeping our platform-wide design priorities in mind. Our Design Team Mission stated: “Get our customers addicted to our product by making it the most efficient and intuitive solution on the market.” This became our north star.
Notes on Design Priorities
UX Research
Here’s a sample of the various research avenues for better understanding our users, how they organized themselves, the realities and risks involved in project management, who our competitors were, and what best-in-class software we could take inspiration from.
Understanding Project Management
Gaining a comprehensive understanding of project management for commercial contractors involved building a glossary of terms, interviewing industry SMEs, and utilizing the real-world contracting experience of our Product Managers.
Electrical Technicians in the field
UX Research: User Interview with Michael Madruga
Understanding Roles and Responsibilities
Through extensive user interviews with contractors, we gained an understanding of the roles and responsibilities within the chain of command, as well as the various needs, motivations, and pain points of owners, project managers, estimators, superintendents, accountants, payroll staff, and accounts payable personnel.
UX Research: Org Chart for a Commercial Contractor
UX Research: Org Chart for Electrical Contractor
Competitive Analysis
We reviewed a variety of existing software platforms, built over different periods and hosted either in the cloud or on-premises. These ranged from modern platforms like Procore to older ones like ComputerEase.
Procore Dashboard
Autodesk Cloud Dashboard
Fieldwire
ComputerEase Start Screen
Inspiration for Page Structure
We took inspiration from a variety of modern enterprise platforms and software systems. In particular the layout of Abstract (originally designed by Frank Chimero) was a big influence in terms of a modern, minimal layout with intuitive information hierarchy and organization.
Abstract: Linking Libraries
Abstract: Branching and Version Control
Page Structure for BuildOps Projects
Phase 1: Projects Home
Projects need to be flexibly organized for growth and extension, but they also have to be appealing and attractive. Here, we’ll look at designs for the Sign In screens, the Projects Dashboard, the Projects Homepage, the placement within the existing BuildOps navigation, and the design of the Project cards.
Sign In Screen
All Projects Home Screen
Projects Navigation
Project Cards with Status Chips
Project Dashboard
Phase 1: Project Settings
Project Settings allowed our user to configure and customize the setup of each project, determine KPIs, set the Schedule of Values, and organize the Project Budget.
The Schedule of Values included the organization of original contract items, their values, and the responsible departments. Approved Change Orders and their values were organized in a separate table. Cost Codes and Project Phases were included within a Budget tab, with the creation of Project Phases handled in a separate worksheet.
Daily Reports, Time & Material Tickets, Requests for Information (RFIs), Change Orders, and Submittals were included within a document tab. Users were organized simply to allow permission settings, and files were structured with a simple folder system. Although these elements saw subsequent revisions and rework, the overall structure remained intact.
Project Settings: KPIs
Project Settings: To-Dos
Project Settings: Schedule of Values and Change Orders
Project Settings: Budget Cost Codes and Project Phases
Project Settings: Create Phases Worksheet
Project Settings: Documents
Project Settings: Users
Project Settings: Files
Phase 2 —
Rethinking Project Setup
After the release of Phase 1, users requested a more structured way to set up Projects. Phase 1 designs for Project Setup were freeform, allowing users to configure new Projects in any sequence. For Phase 2, we designed and implemented a step-by-step series of worksheet screens that gave our users a clear sense of progress and completion in what is a complex set of choices and decisions.
What we learned from v1
Phase 1’s Add Project worksheet required a sequence of general information entries to add a new Project but avoided the deeper complexity and realities of Project Setup. In Phase 2, we organized all those detailed decisions and configurations into a revamped, wizard-like process.
Add Project Worksheet from Projects v1
Projects v2: Add New Project Worksheet — 1. Overview
Projects v2: Add New Project Worksheet — 1. Customer
Projects v2: Add New Project Worksheet — 1. Contacts
Projects v2: Add New Project Worksheet — 2. Schedule of Values
Projects v2: Add New Project Worksheet — 3. Cost Codes
Projects v2: Add New Project Worksheet — 4. Budget
DESIGN NOTES —
Visual Design
Here we'll look at some of the design choices that helped bring order and clarity to the design for Projects. From branding to color customization, and numeric typography to data visualization we made strategic decisions to enhance the user experience.
Interaction design sketches for Project Setup
Strategic Use of Brand Color
The BuildOps platform, especially the Projects feature, significantly supported the BuildOps brand. BuildOps branding was minimal because the platform was meant to focus on and prioritize our customers. We consciously decided to incorporate our BuildOps green into the interface to be subconsciously associated with profit, progress, and performance.
Use of brand green for BuildOps icon and project iconography
Use of brand green for project completion visualization
Use of brand green for progress visualization
Use of brand green for profit trending up icon
Use of brand green for budget profit in charting
Color Customization
We aimed to balance our brand color choices with the customization options available to our users.
Custom color options for To-Dos status
Numeric Typography
We consciously chose Inter (designed by Rasmus Andersson) as our platform typeface to use stylistic alternates for numerics, enhancing the distinction between text and numbers. This choice is especially useful in tabular presentations, bringing clarity and distinction to our tables.
Inter typographic character options for numerics: tabular numbers, alternate digits, slashed zero
Example of numerics for KPIs
Example of table showing contract values as numerics
Data Visualization
With various types of data visualizations, including sparklines, charts, and iconography, we aimed to bring liveliness, visual interest, and most importantly, meaning to the values represented by key performance Indicators, project completion, and profit projections.
Use of sparklines on KPIs (inspired by Edward Tufte)
Charting options for percentages
Bar charts on Projects dashboard
Results —
Clear competitive distinction.
No other software platform for commercial contractors offers both Service and Project feature stacks. By designing and implementing Projects within the BuildOps platform, we created a tremendous moat against competitors and unlocked sales revenue from larger contractors who deeply valued these capabilities.
More Work
CASE STUDY — Project Management Software for Commercial ContractorsCASE STUDY — Educators Empowering EducatorsDESIGN NOTES — AI for BuildOpsDESIGN SYSTEM — Sergeant DSMOBILE DESIGN — Time Tracking for California WorkersCOLLATERAL DESIGN — Forge ConferenceWORK IN PROGRESS — Unbound AgentsSURVEY — Identity DesignARCHIVE — Earthquake Safe