top of page

An App for Car Accidents
Mobile Design System

Overview & Goals

CCC Intelligent Solutions offers a wide variety of mobile application products to its customers. Among them is Quick Estimate - an application that provides users a way to send photos and information about their recent car accident to their insurer to quickly obtain an estimated cost of repair and recommendations on repair shops suitable for their claim. It's a stressful and annoying situation, as users must navigate through the multiple steps of a complicated claim process to get their car back onto the road as fast as required.

Problem Statement

How do we improve upon the current version of Quick Estimate and design it in a way that is optimized for flexibility, ease of use, and scalable for future changes in workflow?

1.0's Flow vs 2.0

This project's working title is Mobile Modules 2.0, which gets its name from the concept that there are specific reoccurring mini-flows that appear across various CCC applications, e.g. a common flow for guiding the user to take photos of their vehicle. These smaller building blocks are named modules, and are mixed and matched to create app flows for unique use cases, such as Quick Estimate. These blocks before the redesign were developer constructs, determined by the development team to implement applications in a systematic way. 

The previous design for Quick Estimate features a linear flow that strings together these blocks and asks the user to complete them in one blind shot. The 2.0 redesign proposes an alternate approach where these modules are design-driven and decided on how to best guide the user through the claims process step-by-step.

A.1 Quick Estimate Standalone Flow-1 2.png
A.1 Quick Estimate Standalone Flow 2.png

The Hub & Spoke Screen

The main UX update for the redesign was the introduction of the home screen. Nicknamed the hub and spoke, the home screen features three views centered around the tasks that a user must complete to reach their final goal: obtain a cost of repair for their vehicle, and to schedule an appointment with a repair facility. The new view features a list of remaining tasks and the amount of time it takes to complete them. Additionally, future tasks are unlocked as the user progresses, and provides clarity that the entire process need not be completed in one shot. All work is saved, and the user may navigate this process on their own schedule. Future tasks are still shown to demystify the claims process - users get a clear, partitioned list of what steps they must complete. 

image 1.png

UI Updates: The Design System

The app's UI was also updated to match modern design practices and introduce patterns that can be scaled into other mobile apps in CCC's portfolio. In addition to reusable components, the art style for onboarding illustrations were drawn and developed to further define the visual language of apps in the organization.

Triple2.png

Forms Optimized for Mobile

Certain screens also got revised as a result of the new design system. Some older designs for example densely packed multiple data inputs onto one screen. Those forms were broken out so that each question received it's own screen. The number of clicks stays the same, but those clicks are now spread out so that the user has an easier time processing and answering these questions. This system also makes this flow more easily configured if certain insurance carriers wanted to add or omit any questions, and avoids the necessity of redesigning the same screen over and over again.

Triple3.png

Modernizing Photo Capture

In a similar vein, the linear photo capture flow was redesigned to introduce more clarity and flexibility. Users can now complete the general photos and damage photos of their vehicle in any order. Previously, users had to follow a strict set order of photos in a carousel pattern. This was replaced by an overhead diagram that allows the user to pick and choose which photos they want to take and in what order. The app is more upfront and clear about what is being asked, and the user can complete this step in whatever way best suits them. 

Triple4.png

Find a Repair Shop

Updates were also made to the shop search module by adding more filter controls, expanded shop pages, and in-depth reviews that are connected and pulled directly from CCC's repair shop database.

Triple5.png

Usability Testing

Moderated user testing was done to test the app's new designs with users via usertesting.com. Additionally, in-person testing was done to further understand how users felt about the new photo capture process by being asked to use the app to take photos of their own car. Feedback from users were incorporated into the designs before final handoff to development.

bottom of page