First
American

WEB Portal

First American offers homebuyers and home-sellers warranty protection against costly repairs and replacement of essential systems and appliances. Their services include an extensive network of pre-screened and qualified local contractors across several industries, but they needed a better system for coordinating and communicating with them.

Background

The existing work order management process was confusing, cumbersome, rigid, and inefficient. These issues made work order assignments, approvals, repairs, and invoices more challenging. This also caused a decrease in customer and contractor satisfaction with the product. 

Research & Discovery

An extensive report by our UX team provided the user research necessary to grasp problems in each area of the broader process. Recommendations centered on combining several systems into one portal, creating a single source of truth to power communication across audiences. It involved customized areas for each step, including a unique mobile experience for contractors in the field.

After receiving these insights, I collaborated with the UX team to structure the information architecture, tasks, and user flows. Communication across different views and roles was essential, and we conducted several whiteboard sessions to develop the key user flows per audience. With a broader picture in place, we honed in on each function and identified commonalities.

Agency: Hero Digital
UX Design: Markham Henry
Art Direction: Markham Henry

Usability & UI Design Lead

I lead the process of establishing a more usable and communicative interface. I started by analyzing their previous systems and identifying their strengths and weaknesses. Based on this analysis, I focused on developing a system that emphasized consistency and provided clear statuses, approvals, and highlighted necessary actions. The end result was a robust and intuitive UI design system.

Operating on a compressed timeline, I chose to use rely on hand-drawn sketches instead of high-fidelity wireframes. This allowed us to collaborate quickly to establish the general page structure, functionality, and flow. We then used the design system to construct our page templates, components, and elements. Once these were in place, we were able to move quickly in UI to explore ideas.

Solution

The final design enhanced and streamlined the communication process across all audiences and channels, favoring digital communication over the previous direct-call method. This provided many benefits, including real-time approvals, quicker repair times, more accurate invoicing, and increased customer satisfaction. 

Work Orders

  • Dashboard

  • Notifications

  • Work Orders

  • Work Order Detail

  • Attachments

  • Scheduling an Appointment

  • Quick Invoicing

  • Custom Invoicing

Reporting in the Field

  • Open Report Summary

  • Incomplete Reports of an Appliance

  • Adding Photo & Video Attachments

  • Ready to Submit for Authorization

  • Manual Pricing Adjustments

  • Authorization Approvals

  • Report Summary

Result

I missed the final development phase while moving to the San Diego area, although I kept in contact with my team at Hero Digital. The new portal and the change in processes were well received by the client and the contractors using it.