FieldServicely helps field-service businesses manage jobs, technicians, schedules, and daily operations.
Customer feedback reaching our sales and marketing teams suggested the experience was falling short: some tasks felt harder than in competing tools, and the interface didn’t convey the quality customers expected from a professional product.
As the startup’s only designer, I owned the webapp redesign. I worked with the PM, sales, marketing, and developers to improve workflows, organize information, and establish reusable components.
The challenge was to make a complex product easier to work with while retaining the functionality teams needed.
My Role
Sole designer, responsible for workflow, usability, visual design, and style-guide decisions
Scope
Webapp redesign and additional operational features. I also redesigned the website; this case study focuses on the webapp.
Collaborators
PM, sales, marketing, and engineering
The webapp served Field-service company owners, team managers, and team leaders. Field technicians used mobile app.
Sales and marketing helped me understand customer concerns, while the PM provided requirements and supporting documentation. Job creation, scheduling, schedule reporting, and timesheets were among the workflows that needed attention.
The existing interface also had inconsistent component sizes, crowded layouts, and unclear information hierarchy. Some elements were difficult to read or use.
I focused on three priorities:
Make important steps and functions easier to discover.
Organize dense information into clearer groups.
Create consistent, reusable components that supported implementation.
Catching a missed step in job creation
Before launch, we tested the job-creation flow with colleagues.
One issue stood out: participants filled in the scheduling date and time on the left, then continued toward the bottom of the form. They overlooked technician assignment on the right, even though every job needed a technician.
The field was available, but its placement didn’t follow the path participants were taking through the form.
I changed the position of technician assignment and placed optional documents on the right. We tested the revised flow again and received positive feedback.
This was a useful reminder that including a required step isn’t enough. The layout needs to make that step part of the user’s natural progression.
Managers needed to work across multiple technicians, customers, and schedules. The previous screen lacked a clear structure for finding and reviewing that information.
I introduced a scheduling bar at the top, giving users a place to review schedules, create new ones, and switch between different views. I also clarified schedule statuses and refined the spacing, component sizing, and visual hierarchy.
I added an unscheduled-task panel alongside the calendar. Managers could drag a pending task directly into the schedule, keeping unscheduled work visible while planning and scheduling it within the same view.
I retained user-selected schedule colors so teams could distinguish schedules in a way that suited their work. Similar patterns appeared in competing products. My focus was on organizing the surrounding interface so that this flexibility remained useful without making the screen harder to read.
The dashboard brought together attendance, job activity, and financial information. I grouped related information and used more consistent components to make the overview easier to scan.
One visualization needed another iteration during implementation. My initial attendance design used bubbles to show total employees, present, absent, and late. Keeping the information readable within each bubble and displaying it consistently across devices proved difficult.
I worked with the developers and replaced the bubble chart with a donut chart showing present and absent employees, with the total displayed alongside it.
This was a practical revision made during implementation. Staying involved with engineering helped me identify where the original design was difficult to build and adjust it.
Extending the product beyond the redesign
Alongside improving existing workflows, I designed additional capabilities for route optimization, GPS tracking, jobsite photos, work orders, payroll, and invoicing.
These features expanded the scope of the webapp. I carried the updated visual language and reusable components into the new screens to keep the experience consistent.
I designed the route-planning view to bring a technician’s jobs and their locations into one screen. Managers can select jobs from the list beside the map and see the route connecting the stops.
Technician and date controls help managers focus on the relevant workload. The optimization selector and comparison action sit above the map, while route distance and estimated duration appear below it.
This layout keeps job selection, route review, and travel information together as managers plan field work.
I designed the invoice screen with the document on the left and editable organization details on the right. This keeps the invoice visible while users update business information, upload a logo, or add a signature.
Customer details, dates, line items, taxes, and payment totals are grouped into distinct sections. The paid status and remaining balance are visible within the invoice.
For this paid-invoice view, actions above the document let users download a PDF, view it as a customer, or email a receipt. I placed the void and refund actions separately at the bottom, away from the review and sharing controls.
After the redesigned webapp went live, we identified another source of friction: new users weren’t sure what to configure first or what to do next. Some contacted support for help getting started.
I designed a step-by-step onboarding guide around the product’s workflow: add employees, add a customer, create a job, schedule it, install the mobile app, complete the job, and send an invoice.
Each step paired a clear action with a tutorial video, giving users help relevant to the task in front of them. Progress stayed visible across the seven steps. Users could also collapse the guide into a compact bar, keeping the current step accessible while working in the product.
After the onboarding update was released, our support colleague told me they were receiving fewer onboarding-related tickets. This feedback came from our regular conversations; detailed support metrics are not shared here.
Building a consistent foundation with engineering
The project also included features such as route optimization, GPS tracking, jobsite photos, work orders, payroll, and invoicing. Reusable components were important as the product’s scope expanded.
I developed the style guide and components to bring more consistency to the experience. I also worked on readability and accessibility, while recognizing that the redesign did not resolve every accessibility issue.
We worked in the same room as the developers, which made it easier to discuss components and adjust designs during implementation. Frontend developers used Figma MCP to take design context into their workflow as components became ready.
After launch, sales relayed positive customer feedback about the redesigned experience. Customers described the release as a substantial improvement and said they enjoyed using the product.
That feedback indicated a better experience, particularly around usability, discoverability, and usefulness. It was qualitative feedback conveyed through sales; it did not establish a measured change in retention, revenue, or task-completion speed.
Company performance data is confidential, so those metrics are not included here.
The most valuable changes often came from examining how people moved through the interface. In job creation, an overlooked assignment step led me to reconsider placement. In scheduling, the challenge was organizing a busy view while preserving the flexibility teams needed.
Close collaboration with developers also helped me revise designs when implementation exposed problems, as it did with the attendance chart.
For me, this project reinforced the importance of staying involved from the first workflow decisions through testing and implementation. That is where I could see whether the design held up, and change it when it didn’t.
