( By Munawar Khel / Independent Practice / Freelance UI/UX Designer / 2024 / 11 min read )
LawnPro
Delivered a complete end-to-end experience across acquisition and daily use, pairing a redesigned marketing website with full product design for the SaaS platform
The result and the decision behind it
( What it did )
Delivered a complete end-to-end experience across acquisition and daily use, pairing a redesigned marketing website with full product design for the SaaS platform
( The decision behind it )
Lead the marketing site with breadth of trade rather than lawn care
The product name sets an expectation narrower than the product. An HVAC or pressure washing operator landing on a page written for lawn care disqualifies themselves in the first few seconds, regardless of what the feature list says further down. Naming the trades explicitly does the qualification work upfront, and it also reframes the social proof: 250,000 professionals reads differently when the visitor can see their own trade in the list.
Generated schematic, not a screenshot. Real imagery to follow.
( The account )
Context
LawnPro Software has served the home services industry since 2003, supporting over 250,000 service professionals across more than 50 trades including lawn care, landscaping, HVAC, plumbing, cleaning, painting, pressure washing, pool services, and general contracting. Its product sits in the Field Service Management category and works as an all-in-one operational hub: scheduling crew routes, tracking customer properties, generating invoices, processing payments, automating follow-ups, and handling client communication from one interface.
The engagement covered two surfaces that are usually treated as separate projects. The first was the marketing website, the product's front door, where visitors decide whether the platform is for them. The second was the core SaaS application itself, spanning 11 modules and the daily operational work of running a home service business, plus a dedicated Client Portal giving end customers their own view of account standing, invoices, estimates, properties, work requests, and payment history.
Neither surface came with a shared starting point. The marketing site was designed from scratch with no existing design system, which gave full control over brand identity and messaging hierarchy. The product was built on Align UI, extended where the base system did not reach.
The problem
Home service business owners, particularly small to mid-sized operators, face a fragmentation problem rather than a feature problem. On any given day an owner-operator coordinates crew schedules across dozens of properties, optimises driving routes to hold down fuel and travel time, tracks which services were completed at each stop, generates and sends invoices that can run to hundreds per billing cycle, chases overdue payments, manages client communication across email and text, onboards new clients and their properties, and keeps records of chemicals applied and equipment used.
Historically that work has been spread across disconnected tools: spreadsheets for customer lists, paper maps or basic GPS for routing, separate accounting software for invoicing, a personal phone for client communication, and handwritten notes for the day's to-dos. The gaps between those tools are where the failures happen. Appointments get missed, services go unbilled, cash flow visibility disappears, client communication turns inconsistent, and administrative overhead grows until owners work late every night simply to stay level.
The clients of these businesses have no self-service visibility at all. Checking an invoice, requesting a new service, or reviewing payment history requires a call or an email, which adds support burden on one side and friction on the other.
The absence of automation compounds all of it. Estimate follow-ups go unsent, recurring service reminders are not triggered, and overdue notices require manual tracking. For a business managing tens of thousands of customers and hundreds of thousands of dollars in outstanding balances, that is direct revenue loss.
On the acquisition side, the existing website did not communicate what the platform actually did. It lacked social proof, spoke only to lawn care rather than the breadth of trades served, and underperformed at converting visitors into trial signups, leaving a gap between the product's capability and how it was presented.
What I did
The work split into two halves that had to argue the same thing in different registers: the site had to make the case for consolidation, and the product had to deliver it.
The marketing website was rebuilt through progressive iterations as a conversion argument rather than a brochure. The hero leads with the benefit rather than the feature set, that service professionals win more jobs, streamline operations, and grow revenue without giving up their evenings. The value proposition is structured around three pillars: Win More Jobs through quoting and marketing tools, Get More Done through automation and operational control, and Get Found through customer acquisition tooling. An industry showcase demonstrates breadth across 50 or more trades to expand perceived relevance beyond lawn care. Social proof pairs quantified impact, more than 20 million completed jobs, 250,000 or more professionals, 37 percent average revenue growth in year one, with client testimonials. CTA sections sit at intervals through the page flow, and the footer carries navigation, resources, and support hours of 7am to 7pm CST, seven days a week.
The core application consolidates the operation into 11 integrated modules.
The Dashboard is a command centre: plan status, projected revenue on an interactive 180-day trend chart, automation health showing completed against errored runs, upcoming to-dos with priority tagging, client communication analytics covering email sent, delivered, opened, and bounced, the day's scheduled events with completion status, account standing broken into past due, outstanding, credit, and paid, customer balance distribution on a donut chart, recent payment summaries, and invoice and estimate snapshots.
Customer Management is a full CRM carrying active and inactive status, account credits, balances, customer types spanning customer, agent, supplier, and competitor, and multi-property management. It supports bulk operations for tag editing and status changes, advanced filtering by status, payment method, and crew, property tracking with lawn size and service history, credit card and ACH payment method management, and auto-charge.
The Finance module spans Invoices with an outstanding, paid, past due, and draft pipeline, Estimates with approved, declined, changes-requested, and draft states, Payments, Expenses, Level Billing, Customer Statements, and Wisetack financing for customer payment plans, with creation forms covering line items, packages, tax calculation, and discounts.
Schedule and Routing carries month, week, today, all events, and list calendar views across visits, to-dos, meetings, and maintenance. The Routes module adds map-based visualisation with gas price and MPG tracking, projected against billable hours, route optimisation, colour-coded visit status covering regular, past due, first visit, service completed and not completed, and daily stop lists, alongside Pending Dispatch, Quick Dispatch, and Multi-Step Programs.
Automations is a rule engine with configurable trigger conditions, run timing, actions such as push notifications and reminders, and sub-actions, plus Sequence Automations, text and email templates, and full Automation History for auditability.
The Client Portal is a separate client-facing interface branded with the service business's own logo. Customers get a dashboard with contact information, account statement, and property detail including tags and sizes, a finance section covering invoices, estimates, payments, and documents with detail views and online payment, service pictures, work request submission and tracking, and profile management.
Resources handles employee management and an Items and Services catalogue for standardising offerings and pricing. Invoices to be Mailed is a batch module for physical mailing with download and print workflows. Settings covers business profile, preferences, billing history, financing, LawnPro Payments, invoice, estimate and receipt templates, client portal customisation, login widgets, custom naming conventions, QuickBooks sync, data import, LawnBidder integration, work request forms, and list item visibility. Additional Tools extends into Notes, Time Tracking, Chemicals, Documents, Visit Forms, Reports, Support, Calls, Store, Calculators, Backups, Texts, and Emails.
Responsive design runs the full application across Desktop 1440px, Tablet 1133px, and Mobile 430px, so field crews can reach scheduling and routing on site.
Underneath, Align UI provides the foundation, extended with 29 custom components and component sets covering sidebar navigation variants, calendar cards typed by visit, to-do, meeting and maintenance, editable inline fields, client portal headers, status modals, spinners, and cursor states. An interactive prototype with 1,795 connections carries the complete flows across every module.
Outcomes
- Designed 11 core modules across 152 or more screens and frames, with 29 reusable components and component sets extending Align UI
- Built an interactive prototype with 1,795 connections covering complete user flows across every module, serving as a production-ready specification that reduced design-to-development ambiguity and shortened iteration cycles during implementation
- Designed the platform to replace an estimated 5 to 8 disconnected tools previously required to run a home service business, consolidating customer management, financial operations, crew scheduling, route optimisation, automated communication, and client self-service
- Delivered a client-facing portal that lets end customers view statements, pay online, submit work requests, and track service history independently, removing a significant source of inbound support calls for operators
- Positioned the marketing site across 50 or more service trades, backed by quantified social proof including more than 20 million completed jobs, 250,000 or more home service professionals on the platform, and an average 37 percent revenue growth in the first year of use
- Designed the full application across three responsive breakpoints, Desktop 1440px, Tablet 1133px, and Mobile 430px, so field crews can reach scheduling and routing information on site
- Designed for scale in both directions, supporting businesses managing tens of thousands of customers, multi-crew routing, and high-volume invoicing while staying usable for a solo operator
What I learned
Consolidation products are sold on the gaps, not the features. Every module in this platform has a standalone competitor that does that one job as well or better, so listing capabilities is the weakest available argument. What the operator is buying is the elimination of the space between the tools, the invoice that generates from the completed visit without being re-entered, the payment that lands against the right account without reconciliation. Once I understood that, both surfaces got easier: the site had to make the cost of fragmentation visible, and the product had to make the joins invisible.
Density is not the same as clutter, and treating them as the same is a failure of hierarchy. My instinct on a dashboard carrying revenue projection, automation health, communication analytics, account standing, and the day's schedule was to reduce it. That instinct was wrong here. An owner-operator opening this at 6am wants the entire operating picture, and removing information to make the screen calmer would have sent them back to the spreadsheets I was trying to replace. The work was in ordering and grouping it so the whole thing could be read in one pass, not in showing less of it.
A prototype at this scale stops being a design artefact and becomes the specification. At 1,795 connections it was faster to answer a build question by walking the flow than by writing anything down, and the state and navigation problems it exposed were ones no amount of reviewing static frames would have caught. I would now build the prototype earlier on any project spanning this many modules, and treat it as the primary deliverable rather than the thing that demonstrates the deliverable.
The full record / 4 decisions
- My role
- Freelance UI/UX Designer
- Timeline
- 2024
- Platform
- Web (SaaS). Responsive marketing website plus a full web application across Desktop 1440px, Tablet 1133px, and Mobile 430px, with a mobile app companion
- Category
- Field Service Management / Home Services SaaS / Marketing Website and Product Design
- Status
- Redesign, delivered
Tools Figma
Team Solo designer, working directly with stakeholders and the development team
Decisions
Lead the marketing site with breadth of trade rather than lawn care
- What
- Structured the site around an industry showcase spanning 50 or more service trades, with the value proposition written in terms that apply across home services rather than to lawn care specifically.
- Alternatives
- Leaning into the established name and the category the product is best known for, which is the safer positioning and the one the brand already carried.
- Why
- The product name sets an expectation narrower than the product. An HVAC or pressure washing operator landing on a page written for lawn care disqualifies themselves in the first few seconds, regardless of what the feature list says further down. Naming the trades explicitly does the qualification work upfront, and it also reframes the social proof: 250,000 professionals reads differently when the visitor can see their own trade in the list.
Give the client portal its own product identity rather than a customer-facing view of the app
- What
- Designed the Client Portal as a separate interface with its own information architecture and its own header carrying the service business's logo, rather than exposing a permission-limited version of the main application.
- Alternatives
- A read-only role inside the existing app, which is cheaper to build and keeps one codebase and one component set.
- Why
- The two audiences have almost nothing in common. An operator is running a business across 11 modules; a homeowner wants to see what they owe, pay it, look at pictures of the work, and ask for more. A restricted view of an operator tool would have carried navigation and vocabulary built for someone else. It also matters whose product it appears to be: the portal is the service business's client relationship, not LawnPro's, so the branding belongs to the operator. Getting that right is what makes the portal something a business will actually send its customers to, which is the only way it removes support calls.
Extend Align UI rather than build a product design system from scratch
- What
- Adopted Align UI as the product foundation and authored 29 custom components and component sets for the patterns it did not cover, while designing the marketing site with no system at all.
- Alternatives
- Building one system from scratch covering both surfaces, which would have given a single visual language across the front door and the product.
- Why
- The two surfaces are doing different jobs and are judged by different standards. A marketing page is a piece of art direction that has to be distinctive, and a system would have constrained it for no gain on a page that exists once. The product is 152 or more screens across three breakpoints designed by one person, where consistency is a delivery risk before it is an aesthetic one, and an existing system removes that risk while keeping the effort on the 29 components that are actually specific to field service work.
Design the Routes module around cost rather than around the map
- What
- Built route planning to surface gas price and MPG tracking and projected against billable hours alongside the map visualisation and colour-coded stop list.
- Alternatives
- A conventional map-and-stop-list interface, which is what the category defaults to and what users already recognise from GPS tools.
- Why
- An operator is not optimising a route for its own sake, they are deciding whether a day's work is profitable. Fuel and unbillable travel time are the two costs that decide it, and both are invisible on a map. Putting them next to the route turns a logistics screen into a margin decision, which is the decision the user is actually making. It is also the clearest expression of what the platform replaces: a paper map tells you where to go, and it cannot tell you whether going is worth it.
( Tags )
- Product Design
- Information Architecture
- Interaction Design
- Visual Design
- Design Systems
- Prototyping
- Responsive
- B2B SaaS
- Dashboard
- Component Library
- Field Service Management
- Analytics
- End-to-End Design
- Conversion Design