Web App Design
FIRST AMERICAN
FIRST AMERICAN
First American came to my team at Slalom looking for assistance in modernizing two legacy applications used to help their clients facilitate the closing of real estate transactions. The product needed to be able to perform a vast number of real estate related activites from generating closing documents, to tracking and monitoring settlement costs to quoting and issuing title insurance policies. Given the complexity of such a task, we formed an interdisciplinary team of over 50 people made up of engineers, project managers, quality assurance specialists, product owners and designers. Over the course of a year and a half, we worked to deliver a product that would give First American a competitive advatage by being one of the first title companies to consolidate so many activities into a single web-based application.
Role
UX / UI Design
Company
Slalom
Duration
1.5 Years
My role on this project included defining business requirements, designing high fidelity prototypes and overseeing implementation to ensure adherence to the overall design system
Our challenge was to combine the acquired products into an intuitive interface while, at the same time, seeking to add new capabilities
Our challenge was to combine the acquired products into an intuitive interface while, at the same time, seeking to add new capabilities
Understand Business Requirements
I worked directly with a number of First American product owners and executives to identify and document the business requirements for each feature
Over the course of the project we conducted 20+ interviews with subject matter experts and existing users to better understand the challenge as well as potential opportunity areas
Over the course of the project we conducted 20+ interviews with subject matter experts and existing users to better understand the challenge as well as potential opportunity areas
Refine With Dev
Designs were socialized with the lead developer in order to estimate effort and discuss alternatives if necessary
Incorporating the insights learned in the previous two phases, our team designed a high-fidelity, clickable prototype to share with the client and refine via user testing
Incorporating the insights learned in the previous two phases, our team designed a high-fidelity, clickable prototype to share with the client and refine via user testing
Develop High Fidelity Prototypes
Blueprinting
Based on the business requirements, high fidelity screens were iteratively developed in order to guide the implementation of each feature
Next, we synthesized our findings from our research into a service blueprint and application map that would serve as a north star for prototype development and user testing
Next, we synthesized our findings from our research into a service blueprint and application map that would serve as a north star for prototype development and user testing
Oversee Implementation
Delivery
Using a robust review process, I reviewed each feature pull request to ensure every implementation adhered to our design system and satisfied the business requirements of the feature
Prior to handoff, we compiled a style guide consisting of over 60 reusable components that would serve as the building blocks for a cohesive design system
Prior to handoff, we compiled a style guide consisting of over 60 reusable components that would serve as the building blocks for a cohesive design system
We used Material UI as our design system and component library as a way to speed both design and developement
Our first step was to evaluate the legacy products via interviews and research
Our first step was to evaluate the legacy products via interviews and research
Interviews with over 35 users identified 4 needs of the application.
Given the size of the project, documentation was key. We used a variety of tools including Storybook, ADO, Confluence and Miro to facilitate communication between the dev and design team.
By the end of the project we were able to deliver an end to end title solution that enabled First American to be a leader in their industry
After completing research and drafting the guiding documents, a clickable prototype was designed for testing
New Order Flow
Creating An Order
Users needed a way of quickly creating new orders that was inituitive and efficient. We built a create new order drawer that could be accessed from anywhere in the application. Additionally, users coud choose to create a new order from scratch or create from a template if they wanted to get a head start.
Users needed a way of understanding deal progress in order to quickly communicate status to their clients when necessary. To enable this, we designed a tracker summarizing the four major steps of a deal so that legal professionals could easily view and communicate progress. An activity feed and task list provided additional visibility into potentially relevant items without the need for multiple clicks.
New Order Flow
Creating An Order
Users needed a way of quickly creating new orders that was inituitive and efficient. We built a create new order drawer that could be accessed from anywhere in the application. Additionally, users coud choose to create a new order from scratch or create from a template if they wanted to get a head start.
In-Order Search
Access Orders From Anywhere
Users needed to be able to quickly jump between deals. To facilitate this we built recent orders toggle and a search bar which allowed users to quickly view recently accessed orders or search the entire database from anywhere in the app. Since users were often searching for a specific facet of an order (address, buyer name, loan number etc) the search bar allowed for any data type to be entered.
The results screen enables users to quickly identify the best ride through simplified filtering and sorting functionality that allow for customization without cluttering the interface
In-Order Search
Access Orders From Anywhere
Users needed to be able to quickly jump between deals. To facilitate this we built recent orders toggle and a search bar which allowed users to quickly view recently accessed orders or search the entire database from anywhere in the app. Since users were often searching for a specific facet of an order (address, buyer name, loan number etc) the search bar allowed for any data type to be entered.
The results screen enables users to quickly identify the best ride through simplified filtering and sorting functionality that allow for customization without cluttering the interface
Searching Orders
Finding What You Need
Often, users are working with hundreds of orders at a time. Because of this, it was critical that we design an easily searchable list that allowed users to quickly find what they need. In addition to filtering and sorting functionality, we placed recently accessed orders above the table to allow users to navigate between their most recently accessed files. Finally, we provided customization through persistent filters. Users can apply their preferred filters once and expect to see those upon their return. Improving their workflow and speed of delivery.
Searching Orders
Finding What You Need
Often, users are working with hundreds of orders at a time. Because of this, it was critical that we design an easily searchable list that allowed users to quickly find what they need. In addition to filtering and sorting functionality, we placed recently accessed orders above the table to allow users to navigate between their most recently accessed files. Finally, we provided customization through persistent filters. Users can apply their preferred filters once and expect to see those upon their return. Improving their workflow and speed of delivery.
Admin Settings
Managing Users
Given the number of users of the application it was critical that admins be able to control settings + access. We created an admin area of the app that faciliated control of permissions, user groups, defaults + settings and much more.
The results screen enables users to quickly identify the best ride through simplified filtering and sorting functionality that allow for customization without cluttering the interface
Admin Settings
Managing Users
Given the number of users of the application it was critical that admins be able to control settings + access. We created an admin area of the app that faciliated control of permissions, user groups, defaults + settings and much more.
Wrapping It Up
After completing MVP, we faciliated a handoff with the FA design + engineering team to ensure a smooth transition and set them up for success in the future.
Lessons Learned
Lessons Learned
Working within a large React component library
Minimize learning curve
As designers on this project, one of our primary goals was to use out of the box Material UI components whenever possible. This was to done to speed the design to development process and enable our client to get their product to market quicker. Working within this constraints allowed me to spend more time thinking about critical design decisions and less time worrying about beveling corners.
The importance of the design review proess
Minimize learning curve
When I came onto this project, many design errors were surfacing as developers implemented different features. This was due to a lack of oversight by design. To address this we established a formal process whereby every front end feature branch was vetted before design before it was marged to main. This allowed us to spend less time fixing things and more time designing.