One of the projects I'm most proud of is redesigning the list import screen. The old list import screen created a lot of pain points for clients. I spoke to many clients who found the drop down menus extremely confusing, and we'd get questions on the support team every week about this tool.

These insights made it clear that they needed a list import tool that let users quickly and easily map columns in their Excel sheet to fields in their account.

I tested the list import tools on our major competitor sites. The easiest to use tools contained step by step graphics, showing the user exactly what to do next.

I created a few rounds of mockups and prototypes for an updated design of the list import tool. To make it more intuitive for users to know what columns they were selecting, I chose to display the first 5 rows of the imported file as a preview in the same format they'd see in an Excel sheet.

On the backend, I modified the existing ColdFusion code and wrote completely new HTML, CSS, and JavaScript to bring this project to life.

I added graphics at the top of each line that would show a yellow arrow on the next column that needed to be mapped. Once it was mapped, I used JavaScript to change the graphic to a green checkmark, and also highlight the next column with the yellow arrow graphic. They could also chose to ignore the column, which would make an "x" appear in red. Then once all of the columns were mapped or ignored, the Done button would appear with a checkmark next to it.

After launching the updated list import tool, it became clear to clients how to quickly import a list. They received immediate feedback showing if a column was successfully mapped and which column they needed to look at next. These graphics were easily recognizable, even for first-time users.

Our support center also saw a dramatic and clear drop in the number of support tickets made concerning the list import tool. This clearly showed that the redesign made it much easier for our clients to import lists into their account.