Hive HR Exports

Hive HR · UX Design Placement

Refreshing a neglected feature to match the rest of the product.

UX design Design systems

Exports had been used 36 times in six months. Before redesigning it, I needed to decide whether it deserved investment at all.

The feature still mattered to the people who used it, but it had fallen behind the rest of Hive HR. I approached the work with a strict MVP mindset — prioritising necessary functionality over nice-to-haves that would consume development time.

Hive Exports prototype

Current flow

Hive HR exports feature flow before redesign

Feature usage

Only 36 interactions in six months — low enough to question whether the feature warranted a full redesign. I kept scope tight and focused on what would make the export flow clearer for the people who actually used it.

Chart showing low usage of the Hive HR exports feature

Wireframing

The project was highly iterative, and I wanted to be careful with changes. I spent a lot of time on quick wireframes with small adjustments until the solution felt right, then tested and refined based on feedback.

Early wireframe sketches for Hive HR exportsComplete wireframe set for exports redesign

Initial proposal

The initial prototype was in a good spot but still needed some tweaks. After speaking to J and E we came to the following conclusions. The grey banner I'd added at the top needed to change, as it doesn't fit with the rest of the system. For Hive Fives, it made more sense to leave the HF category outside of the filter builder section and have it separate. Rethink the 'overview' info at the top being shown.

Initial Hive HR exports redesign proposal

Refinement

Cut out overview info at the top, moved total HFs to the bottom. Added a filters subheading to help distinguish areas. Moved 'active filters' to the top and changed from button to checkbox. Removed heading from filter group.

Refined Hive HR exports filter layout

Final modal design

After going through refinement, I had final designs for the export modal. Testing reinforced my confidence in the direction.

On the surface this looks like a small feature, but it was a useful early lesson in MVP thinking and the value of careful UX work on low-traffic flows.

Final Hive HR export modal design

Creating the components

One mistake in the initial prototype was not using Figma components, which made edits harder than they needed to be.

I rebuilt the individual elements as reusable components — a lesson I have carried into every project since.

Figma component library for Hive HR exports

Animation

As a small nice-to-have, I developed a short loading animation for when users exported their dataset. Small interactions like this can add a sense of quality to otherwise functional flows.

Loading animation when exporting a CSV from Hive HR

Hive Exports prototype