Batch Export & Delete

  • research
  • ui design
  • visual design
  • figma

TL;DR

Clients who used our geofence uploader asked for the ability to batch export and batch delete geofences as well as search the geofence table. Before this project, users could only individually delete or export geofences.

My Role

For this project, I lead brainstorming sessions, created user flows with the project manager, created wireframes, prototypes and final designs.

Why?

Unless the client was a developer, the only way for them to delete or export was individually. This caused frustration when users wanted to delete more than one geofence at a time.

Research

A previous version of the dashboard had a batch delete and export option that was then removed during another round of design. I evaluated the previous design, spoke to the designer who chose to remove it, and did external research as well.

user-flow exploration

previous designs of the dashboard

Design Iterations

For a seemingly simple change, this project went through a lot of iterations. The previous design that had the proper functionality seemed a bit disjointed, with the action buttons being quite far away from the objects that were being acted upon. My solution was a "drawer" that would pop open when the user checked off a geofence. This seemed to work well but in presenting it to the project manager, I realized I had missed a key component. The main ask for this project was the ability to mass-export or delete, with a focus on being able to delete or export all of the geofences. This solution made the user go through too many actions to delete all geofences. First the user had to check off the top box, then "select all" and then delete all. This works well if the user usually deletes one and may want to delete 2 or 3, but if the main point was to allow a fast way to delete/export all geofences, then this design missed the mark.

final un-selected state

final selected state

I took a step back and looked at the project from a different lens and thought about how I could make delete all and export all more accessible. A drop-down menu was mentioned as a solution but seemed to be a bandaid rather than something well thought out. After careful consideration, I decided to make the first action available be "export all (xnumber)" and "delete all (xnumber)". After the user ticked off a checkbox, this would change to "export (xnumber)" and "delete (xnumber)". This change allowed for the main action to be easily taken without putting the user through a multi-step process.

Next Steps & Key Learnings

This project is currently in its dev handoff stage. Once implemented, we will solicit feedback from users, especially those who asked for this change. The biggest learning from this project was the importance of keeping the users' needs front and center.

Next