Elephant Insurance, 2024
Claims Icons
SVG icons for loss-cause options in the redesigned First Notice of Loss (FNOL) web journey.
A Complete Set
For the most frequently reported claim types, we wanted to include a visual identifier. We thought about using photos, but since we've been leaning into using iconography throughout the rest of our web projects, it made sense to use some for this as well. When Google Symbols obviously didn't have icons for these concepts, I was tasked with creating a branded icon set matching our other icons and representing the most reported claims, based on historical data.
Sketches
Starting off, I pulled out my iPad and sketched some concepts in Procreate. These are intentionally rough are are for quickly getting the ideas down on "paper." Since Elephant's main product is Auto Insurance, I took inspiration from road signs. The easy scan-ability and ubiquitous nature of road signs made that choice easy.
Iterations and Concepts
Working with marketing and product, I iterated on the icons in Adobe Illustrator for a few loops. We wanted to make sure they were clear, looked like a cohesive set, and fit with the overall Elephant brand. After approval, I optimized the icons by limited anchor points and joining paths that have the same fill. I then run the SVG through a programatic optimizer. This creates a smaller SVG file when exported, which allows for quicker downloads and less network time eating a mobile user's battery.
In Page Mock
I started out with a brighter "bang," which you can see in the previous image, but after including it within a page mockup, the orange-red color stood out too much and looked almost like an error, so we switched that out with the darker color seen in the final.