Skip to content

( Teamfront / January 2024 – Present )

FloorZap Web

The redesign turned a fragmented, visually outdated legacy platform into a modern, cohesive enterprise SaaS experience on the Align UI design system, with consistent interaction patterns, a scalable component architecture, and a clearer information hierarchy across 18 or more business-critical modules spanning the full flooring service lifecycle from lead capture to financial reconciliation.

My role
Lead UI/UX Designer
Timeline
January 2024 – Present
Category
Enterprise SaaS Product Design
Status
Redesign, delivered

Tools Figma, Align UI Design System

Generated schematic standing in for imagery of FloorZap Web. It depicts nothing.
Generated schematic, not a screenshot of FloorZap Web.

Generated schematic, not a screenshot. Real imagery to follow.

( The account )

Context

FloorZap Web is the all-in-one field service management and business operations platform that flooring contractors, installation companies, and home improvement businesses run their day on. A single job in this industry touches sales, on-site measurement, material procurement, subcontractor coordination, scheduling, and financial reconciliation, and FloorZap is where all of it is supposed to come together: lead capture, customer relationship management, quoting, installation scheduling, warehouse inventory, payment processing, and financial reporting in one web application. It also integrates AI capabilities through ZapAssist AI and connects out to QuickBooks, Google Calendar, Zapier, and MeasureSquare to form a complete operational ecosystem.

This project was a full platform redesign of that system across 18 or more modules, from Leads and Customers through Quotes, Invoices, Scheduling, Warehouse, Payments, Purchase Orders, Reports, Task Management, Document Manager, Work Order Change Requests, Measurement, Accounting, ZapAssist AI, and a Settings architecture running to 49 or more subsections.

The platform had grown feature by feature rather than as a system. Each module had accumulated its own interaction patterns and visual treatment, and the surface area had outrun the structure holding it together. The redesign existed to rebuild that structure on the Align UI design system, so a platform this broad could read as one product instead of a collection of tools that happened to share a login.

The problem

Legacy FloorZap carried usability, scalability, and visual design problems that were slowing the businesses using it. Six of them shaped the redesign:

  • Fragmented and inconsistent experience. There was no unified design language across the modules and no standardized component library, so buttons, tables, forms, modals, and navigation differed from section to section. Leads, invoicing, scheduling, and warehouse each felt like a separate tool, and users had to relearn interaction patterns as they moved between workflows.
  • Overwhelming complexity and poor information architecture. With 18 or more modules and dozens of settings categories covering system lists, integrations, templates, permissions, contractor management, and commission structures, the navigation did not scale. Finding a specific function was difficult, and core workflows like quote creation, at 23 or more steps, and invoice generation demanded excessive clicks and screen transitions.
  • Outdated visual design. The interface did not meet modern SaaS standards and looked dated next to competitors, which affected client perception during sales demos and reduced confidence in what the platform could actually do. Unclear visual hierarchy made data-heavy screens like reports, customer timelines, and warehouse inventories hard to scan.
  • Inefficient core workflows. Lead-to-customer conversion, quote-to-invoice flow, material ordering, contractor scheduling, and payment reconciliation all involved too many manual steps and offered no smart defaults, automation cues, or contextual guidance. Time went to administrative work instead of revenue-generating work.
  • Limited reporting and visibility. Reports across sales, accounting, contractor performance, leads, vendors and materials, and user activity were scattered with no unified framework, so decision-makers could not get a holistic read on business health.
  • Poor integration experience. QuickBooks, Google Calendar, payment processors, MeasureSquare, and Zapier were all connected, but setup and management were buried inside settings with no clear onboarding flow or status visibility.

What I did

The approach was a system-driven redesign on Align UI, rebuilding all 18 or more modules against one component vocabulary, one navigation shell, and one visual language rather than restyling each section on its own terms. Standardizing that foundation is what made a platform of this size tractable: once tables, forms, filtering, modals, and detail patterns were settled in the system, they could be applied consistently from Leads through Payments to Settings, and a single navigation model could hold the whole thing together.

On that foundation, the redesign followed the operational lifecycle of a flooring business. Navigation was rebuilt first, as a collapsible sidebar with clear iconography, logical module grouping, and a mega menu for deeply nested features, so the structure scales as the module library grows.

The lifecycle then runs in four stretches. At the front, Leads and Customers handle the pipeline: capture forms, status tracking, referral tracking, bulk operations, and conversion into Customer Detail Pages with tabbed contact information, project history, timelines, and documents. In the commercial middle, Quotes and Invoices became multi-step workflows covering service selection, product bundling, pricing, discounts, terms, and digital signature capture, then invoice creation with receivable reports, payment status, QuickBooks synchronization, bulk invoicing, and partial payments. Delivery spans Schedule, Warehouse, Purchase Orders, Order Material, and Measurement, from installation calendars and drag-and-drop scheduling through inventory, receiving, movement between locations, and vendor procurement, with MeasureSquare dimensions feeding quotes and material orders. At the financial back end, Payments and Accounting cover the merchant portal, payment adjustments, accounts receivable and payable, reconciliation, and QuickBooks.

Across all four sit the platform-wide layers: a unified Reports framework with consistent visualization and filtering, Task Management, Document Manager, Work Order Change Requests with approval chains and an audit trail, ZapAssist AI, and the Settings architecture.

Outcomes

  • Unified 18 or more modules onto one Align UI component system, replacing a legacy interface where each section carried its own buttons, tables, forms, modals, and navigation patterns.
  • Rebuilt the platform's information architecture and global navigation so a product with 18 or more modules and 49 or more settings subsections stays navigable as it grows.
  • Redesigned the complex multi-step workflows at the center of the business, quote creation, invoice generation, scheduling, and payment processing, with smart defaults, templates, and reusable configurations aimed at reducing administrative overhead.
  • Unified scattered reporting into a single framework with consistent visualization and filtering, giving decision-makers a holistic view of business health.
  • Brought integrations with QuickBooks, Google Calendar, payment processors, MeasureSquare, and Zapier out of buried settings and into a coherent management experience.
  • Introduced AI-assisted workflow support through the ZapAssist AI module.
  • Elevated the platform's visual standard to modern SaaS expectations, addressing the perception gap that surfaced during sales demos.

What I learned

On a platform this broad, the design system is the product decision, not a supporting one. With 18 or more modules, no amount of per-screen craft would have made FloorZap feel coherent; the consistency had to come from the foundation. Every hour spent settling a table, form, or modal pattern in Align UI paid out across every module that used it, and that leverage only grows with the size of the surface area.

Information architecture turned out to be harder than interface design. Redesigning any one screen was tractable; the difficult part was that 18 or more modules and 49 or more settings subsections had accumulated without a structure that could hold them. Getting the grouping and navigation right, especially in Settings, was less visible work than redesigning a module, but it did more for whether people could find what they needed.

Designing around the operational lifecycle kept the scope honest. Anchoring everything to the path from lead to customer to quote to schedule to material to installation to invoice to payment meant each module had to justify itself by the work it carried, which is a useful constraint when a product this large could otherwise sprawl in any direction.

( Tags )

  • Web
  • Enterprise SaaS
  • Field Service Management
  • Flooring
  • Home Improvement
  • Contractor Software
  • Business Operations Platform
  • Legacy Modernization
  • Design Systems
  • Align UI
  • Information Architecture
  • Navigation Design
  • Interaction Design
  • Visual Design
  • Lead Management
  • CRM
  • Quoting
  • Invoicing
  • Scheduling
  • Warehouse and Inventory
  • Purchase Orders
  • Payments
  • Accounts Receivable
  • Accounts Payable
  • Accounting
  • Reporting
  • Data Tables
  • Dashboard Design
  • Document Management
  • Task Management
  • Settings Architecture
  • Integrations
  • QuickBooks
  • AI Assistant
  • Component Architecture
  • Teamfront
  • FloorZap