The Situation

Background

Mitchell International has been helping drivers get back on the road with automotive repair manuals since 1942. The company provides repair facilities and insurance carriers the tools they need to get drivers safely back on the road. However, a company with so much history tends to have a lot of legacy software, complicating the estimate writing process.

To mitigate this, one of Mitchell’s strategies is to automate the estimating process. An integral part of this automation is the Lookup Table feature — its purpose, to eliminate the need to manually look up and manage values on administrative pages that can affect the final cost of the repair.

The Problem

Today, Lookup Tables require a Customer Service Manager (CSM) to go into each administrative page to manually update all values. This results in the potential for human error, duplicate work, and confusion around what the right value is for the right field. Not only that, but the current workflow prevents the estimate writing process from becoming fully automated, helping mitigate the need to manually input values in the first place.

If estimators are not able to write safe, accurate, and cost-effective estimates, it can result in a poorly repaired vehicle. This can cause problems ranging from additional time and money to fix mistakes due to an inaccurate estimate, to a dangerous situation where the vehicle is not safe to be on the road.

Old Lookup Table Workflow

Solution/Goal

Working with Project Managers, Developers, and the CSMs, we set out to tackle this challenge. Our goal was to reimagine how the tables were created and managed, while at the same time look for innovative ways to ensure the right values were used in the right places without additional user intervention.

Our solution was to combine a repository management experience and a new “Table Information Page” Allowing us to provide a way for administrators to organize and manage different tables with different values. This would also give them more control over where and how the tables get consumed, ensuring the estimate gets written in a safe and proper manner, every time.

Research

Business Goals / User Goals / Design Goals

We made sure to document the Business Goals, User Goals, and Design Goals in Confluence so everyone could access and update the documentation. This enabled us to make sure we were all aligned on what success looked like before any design work was done.

For Lookup Tables, we wanted to find the sweet spot between updating an existing product to win more customers and enhancing the experience to make our current customer’s day-to-day work more enjoyable.

Confluence Project Page

User Personas

I was fortunate enough to have a multitude of resources at my disposal. One such resource was a library of user personas to help guide research and the designs.

I used the personas below, as well as the user flows you will see later, to realize we needed to focus on the administrative roles when creating and managing the lookup tables while focusing on both the administrative roles and the estimator level roles when creating the experience for pulling and using the different tables.

Personas (Click to enlarge)

User Flow

Next, I needed to create a user flow to show how our users are currently creating lookup tables. I looked for key pieces of information users needed to set up a successful and useful lookup table. I also wanted to discover what wasn’t needed and remove any unnecessary steps.

The result was a realization that we needed a more streamlined setup wizard to break up the process and separate it into more manageable pieces. I discovered users would benefit from the following steps in the new wizard:

• a management page

• a table information page

• a table values page

• a preview page

Lookup Table Setup User Flow

Concept Validation

Once we felt our mockups met the design and user goals, we needed to validate them and make sure we didn’t miss anything important or there weren’t any additional opportunities we could take advantage of.

We set up multiple concept validation sessions with internal Customer Service Managers (CSMs) to quickly get feedback and explore future enhancements. To our excitement, all 5 CSMs we interviewed approved of the new look and feel. They also approved of the enhancements we proposed and confirmed that with the new business rules, management page, and export/import experience, we would be setting Lookup Tables up for automation and helping users focus on higher-level workflows.

Research Confluence Page

Design System & Wireframes

Magnetic Design System

Once we had the data we needed, I worked with our Visual Designers and Developer Technologists to make sure the problems we discovered hadn’t already been solved in another Mitchell product.

Using the Magnetic Design System we collected patterns, layouts, and components that could be used to give us a head start on the final designs.

Mitchell Magnetic

Existing Patterns

Some of the patterns we wanted to stay consistent with between products were the Filtering/Sorting & Searching patterns, Forms patterns, and our new Hierarchy pattern.

We used Miro to collect screenshots and examples of our other products to stay true to Mitchell’s look and feel and provide the functionality users needed to complete their workflows.

Examples of common patterns across Mitchell products (click to expand)

Component Library

We also were able to utilize component libraries in both Sketch and Axure. These libraries further insured consistency across products as well as made it easier for designers to pull and use common components. This allowed us to focus on the end-to-end experience instead of ensuring everything was pixel-perfect.

Wireframes

Next, I started putting everything together by first creating wireframes.

I used whiteboarding to quickly get everyone to agree on a basic direction and then went back and used a pen and notebook to start playing around with layouts and the placement of specific actions and components.

Examples of some of the Lookup Tables wireframes

Implementation

Developer Handoff

With the research complete and the designs finished, the next step was to make sure the Developers have everything they needed to accurately build the experience.

We used both manually created spec sheets as well as Sketch’s Inspector tool to help Engineers build the UI.

Design specifications using Sketch Inspect

Fractal Library

However, when it came to making sure the functionality and behavior were accurate, we turned to the Magnetic Fractal Library to make sure every component in the design performed the way it should.

Example of a coded asset for developers

Final Product

Lookup Table Management Page

The management page is a key addition to the workflow. It allows users to have more control over all the lookup tables across the profile and gives users the power to:

• Have a central place to create, read, update, and delete content

• Manage a repository to see what other administrators have created

• Duplicate lookup tables to prevent rework and eliminate the need to go through the setup wizard for new but similar tables

Click to enlarge

Table Information Page

Once the user decides to create a lookup table, they are brought to the new Table Information Page. Here the user is given some important new features for automation such as:

• Titles and descriptions for each field so the user is confident about what each section does to the end product

• The ability to set what type of profile the table is for, so the user is only given specific tables for specific profiles

• The ability to set business rules to connect each table with specific estimates based on variations of make, model, year, location, etc…

Click to enlarge

Table Layout: Hierarchy Selection Tool

At this step, the user is given the option to set up a table based on a combination of custom keys or based on a hierarchy. We redesigned this step but really focused on the hierarchy selection option since that was the most complicated. Overall we added:

• An improved layout so users can better navigate the different levels of a company and choose the right business units to apply each table to

• One page instead of two so users could easily switch between the two layout options and find the layout that best worked for them

• A clearer layout that better-organized actions the user can perform, allowing users to select/deselect, drill down, select all/deselect all, as well as an indicator of how many options live under each level of the hierarchy.

Click to enlarge

Table Values Page

At this stage, the user is given their first look at their new lookup table and can now start populating the table. To help with that, we updated the following:

• Created a more condensed layout so the user can see more rows above the fold

• Removed redundant exporting options and elevated the import and export functionality to the main page instead of behind a menu

• Upgraded the backend to consume 10,000 plus rows from Excel, so users can focus on managing one Excel file rather than multiple files with 1000 rows each

• Added error validation and row numbers to help the user fix any mistakes that might occur during manual input or importation from Excel

Click to enlarge

Preview Page

Finally, at the end of the wizard, we created a preview page to give the user confidence their Lookup Table has been set up correctly. The new page included:

• A summary of everything selected with a breakdown of how this lookup table will be automatically applied

• Edit options so the user can “jump” back to any step to make updates or changes if they forgot to add something

Click to enlarge

Lookup Table Pull Modal

Now that the user has a repository of lookup tables, the last requirement was for us to create a way for users to use those tables when writing an estimate.

We created a new modal experience that replaced the old experience of requiring the user to set up a new lookup table for every field. This allowed the users to:

• Select multiple lookup tables for a single profile field to account for different vehicle types, locations, and other parameters

• Automatically populate input fields in the profile so estimators no longer have to manually look up each input field’s value on a separate document

• Set up the product for automation by having one profile with multiple Lookup Tables instead of hundreds of profiles for every scenario

Click to enlarge

Conclusion

With the updated workflow, new user interface, management and table information page, the upgraded lookup table set up and management experience enables insurance carriers to better control their data and take the first step in fully automating their estimating process.

Not only that, but estimators can now easily and confidently populate the estimate profile without wasting time doing it manually. This gives them more time to use their expertise to focus on the estimate and their customers, ensuring the estimate is done right and allowing customers to safely get back on the road.