Assisted Photo Capture – Mobile Web Application

Highlights

• Mobile-only web app
• High fidelity prototyping
• Visual design
• Field usablity testing
• Design System alignment
• Customer flow mapping
• Cross-functional colaboration

Project introduction

Collecting images for auto claims is very important to Liberty Mutual. They are used to create an estimate for the cost of the repairs. This eliminates the need for customers to bring their car to a repair shop to get an estimate. Currently the app has image upload functionality and links to an instructional pdf (see images), but is very much a Minimum Viable Product (MVP).

Coincidentally, our team was approached by the Dublin Ireland-based Liberty Mutual Claims IT Incubator team to help with the UX for a web-based mobile application that will work on it’s own as well as a new feature in our existing app.

The app will have a major positive impact on our customers. It will improve the efficiency of desk claims representatives, who’s work accounts for 30% (approximately 220k/year) of all auto claims by allowing them to more quickly write damage estimates. It also represents a $4 million cost savings to the company through increased efficiency and shortened claims resolution time.

Beta version ‘tips’ screen

Team contributions

These are the contributions the Auto Claims Management team and I made.

• Provided design assistance for the prototype app in advance of formal usability testing

• Assisted with field usability testing as an observer and moderator

• Incorporated research findings into UX design enhancements for further usability testing

• Collected feedback from Liberty Mutual Design System team, applied it to the designs, and communicated it back to the development team

• Created a customer flow map of the entire Claims photo collection ecosystem for communicating with developers and stakeholders

• Designed a frictionless process for allowing desktop users to move to a mobile phone

Design assistance

Originally we  were brought in to evaluate the visual design of the app for consistency with the Liberty Mutual Design System. Here are some of the consistency considerations we made.

• Card flow interaction pattern

• Button type and placement

• Element spacing, padding, and alignment

• Typography styles

• Copy voice and tone

• Use of imagery

Examples of the finalized designs

Introduction screen

Sample image tips screen

‘Choose an overlay’ screen

‘Camera view’: overlay, sample image

Research method and findings

We had a working prototype of the app that allowed us to do a field study — to observe users interacting with it in the most realistic way possible. Over three rounds of testing we collected a lot of data, in which we had a very high level of confidence.

• The first round was with Liberty employee volunteers, which helped iron out the moderator guide and technical considerations like screen and voice recording.
• In the second round we traveled to participants’ neighborhoods and observed them using the app on their own vehicles.
• And for the final round of testing we tested the revised app with a different panel of employee volunteers.

Overall, users found the app easy, quick, and innovative. When we asked how the experience made users feel, 7 out of 8 felt proud of themselves to be able to move their claim claim forward and felt that the tool would save them time.

Research recommendations

Of course we identified many opportunities to improve the app as well.

The sample image placement was not easy for users to see. We needed to reduce unnecessary space on the page – by removing the header, using a smaller camera button,  and shrinking the padding above the sample image.

We also decided to test adding in an overlay of an outline of the vehicle to the camera viewport that could be used to line up the correct angle from which to take the picture. This may reduce reliance on sample images.

It was clear we needed to improve the instructions and sample image for locating the VIN (vehicle identification number) and odometer – these images were difficult for users to obtain.

Users also needed better expectation setting – after accessing the app through a personalized link they were confused when they were asked to log in after submitting photos. They also didn’t understand where they were in the claims process.

Field research in progress

Research conclusions

The final round of testing showed us that we were definitely on the right track.

• The sample image photos from the earlier studies were replaced with brand-consistent illustrations and moved up on the screen. They were easier for users to find and provided the intended guidance.

• We tested the overlays with great success – “it’s actually fun” said a participant while lining up the outline in the camera viewfinder with the car being used in the test.

• The Vehicle Identification Number (VIN) and odometer were much easier for users to locate based on revised sample images, their placement, and clearer instructions.

• Rewritten instructions at the beginning and led to less user-confusion about next steps.

By the end of the analysis phase of the last round of the field study we were pretty certain we had a brand-consistent design for the app that was functional, useful, informative, and even fun to operate!

I also had the opportunity to moderate a few research sessions — an interesting change up from my day-to-day team responsibilities.

Integration

We quickly realized the Photo Capture app could be merged into our existing app as a brand new feature. There’s existing functionality for uploading files but nothing customized for collecting the exact pictures needed for claims representatives to write estimates. As we prepared for the technical implementation, we needed to determine exactly how customers would access the app and from where.

It was originally built to be accessed via personalized link sent in an email or text message. This would allow customers to submit photos without authenticating into their online accounts – removing a potential roadblock (approximately 20% of customers don’t have online accounts). If it was going to be merged into the claims management app, then it would also need to be accessible from within the authenticated environment. Our next task was to map that out for our developers and stakeholders.

User flow map

The team product owner, content strategist, and I created a user flow map to show our stakeholders the ways for customers to access the new app. We also showed the current process and how much of an improvement the new app will be.

This map was an important part of our communication about the status of the project, how it fits into our existing user flows, and how it will benefit the business.

Desktop to mobile process

After mapping the processes we designed a simple quick way for customers who have visited our web app from a desktop or laptop computer to move to their phones.

They’ll be able to send a link to the photo capture app to their phones and continue with submitting pictures of the damage to their vehicles.

Document upload screen with custom messaging for the photo capture app.

Text a link to your mobile phone form screen.

Text message sent – confirmation modal screen.

Conclusion

Collaborating on this app has been a highlight of my year at Liberty Mutual. When we were originally brought in I knew we could do far more for the user experience of the app than just help it visually align to the design system. Over the course of the summer and early fall my team’s content strategist and I showed how we could work with researchers, product owners, and developers to definitively improve the user experience. We became core members of the team.

This version of the app is really an MVP (minimum viable product). We view it as a platform for future enhancements. For example, AR (augmented reality) features could be added – like scale measurements of vehicle damage. Adding metadata to the uploaded images would make analysis simpler. And as we collect large numbers of images we will be able to train an algorithm through AI/machine learning to accurately appraise damage and write estimates without human involvement.

The Assisted Photo Capture app is scheduled to launch in early 2020.