Overview

In the summer of 2023, I interned with State Farm's Claims XD team, where I developed a prototype to improve the claims hub experience for State Farm customers.

My main project was to determine how to properly display FAQs dependent upon the type of loss (Structural Damage and Personal Property). The project's goal was to display help content coverages to the fire customer without creating an unsatisfactory customer experience. I designed numerous iterations and mockups in collaboration with stakeholders in the Fire Claims Hub.

The Problem

State Farm has two sides of their Claims Hub: Auto and Fire. Users can see either one depending on the coverage or claim.

In auto, Claims Hub includes a help drawer displaying FAQs for the general claims process. In fire, Claims Hub has the exact help drawer, but since they include different coverages, users can not find FAQs for fire coverages.

Because of this dilemma, I have to find the best way to display fire coverages within the help drawer in the fire Claims Hub.

Research + Discovery

My first step was to compare auto's claims help drawer. My mentor and I posed some questions about revising fire's claims help drawer:
- What FAQs do we want to show?
- Show we create FAQs that covers the difference between PP/SD?
- Can we add an additional level to Claims Help?
- What are the subcategories for SD/PP?
- Is the claims process FAQs from auto the same as fire?

Initial Design

After getting answers to our questions, I made a sample of the design. This design has different levels: level 0, level 1, level 2, and level 3. In the sample, users start by picking a coverage in level 0, then they click on subcategories in level 1. This takes them to level 2, where they can learn more about the chosen subcategory. Here, they'll find helpful FAQs that expand when clicked. If users click on the questions under "Top Questions," they move to level 3. We originally handed off this design, but stakeholders wanted us to find a better way to implement this solution without adding a level 0.

[data-wf-bgvideo-fallback-img] { display: none; } @media (prefers-reduced-motion: reduce) { [data-wf-bgvideo-fallback-img] { position: absolute; z-index: -100; display: inline-block; height: 100%; width: 100%; object-fit: cover; } }

Iterations

I came up with various designs that combined the two coverages and their subcategories into a single level. I discussed these ideas with fellow designers and got feedback on what worked or didn't work in each option. Using their helpful input, I progressed to my final design choice.

Final Designs

Instead of users clicking on a coverage and being taken to another page, they can now click on expansion panels and choose a category by clicking the chevron. This updated design makes sure users can easily reach coverage FAQs while also helping business goals.

MAX Design Guide

In addition to my main project, I collaborate with the MAX design team to make improvements to their UI library in Figma and their online design guide. I formatted several pages in the MAX design guide by updating component's photos and using bullet points in the component's guidelines. I also changed numerous components in the MAX UI library like adding auto layout and buttons to existing cards.

48in48

I volunteer for State Farm's 48in48 event, where my team and I developed a website for Glamourgency, an organization focused on educating and empowering children and parents about caring for textured hair. In my role as a UX designer within the team, I took charge of creating wireframes and ensuring that the website aligned with the owner's objectives.

Takeaways

My internship at State Farm has been an incredible experience! I've learned a lot about UX design and have really developed as a designer. I want to give a big shout-out to the XD team – they challenged me to step out of my comfort zone while providing great support as an intern.