“Tell me about a time when a design didn’t work as expected.”

If you've interviewed for a UX job before, this question might sound familiar. I've definitely been asked a similar question every time I've had an interview! These prompts can seem like an attempt to make you feels like a design imposter. But really, it's about taking what you learned and explaining how you re-solved a problem and improved your design approach based on what you learned.

I can answer – without hesitation – this is that design.

The existing design

What's a 'Project Vital'? It's a section in Filevine where law firms can store important project details for quick reference. It includes customizable information like client contact details, assigned lawyer, project phase, and tags. Previously, this information was displayed as a blue bar at the top of the application, but it was not responsive on smaller screens. On larger screens, users had to navigate through expanding panels while hovering.

Along with the big blue bar of project information,  you can also see the primary navigation is made up of a hamburger menu and some icons in a row across the top of the page.

When we started ideating on how to make vitals more consistent and accessible, we also did lots of explorations on updating the primary navigation. Let’s take a trip back in time to see how the work began.

Early explorations

My first iterations were based on concept work and screen size data from Pendo that told us a significant majority of users engaged with the product in browser sizes at or above 1920px wide. I wanted to take advantage of the under-utilized space on the left and right sides of the screens at large breakpoints.

The first designs shared with users included a left-aide primary navigation and a couple of variations on where the vitals would live: one on top and one using a slide-in panel on the right-side of the screen.

Left-side Navigation

During user testing it became obvious that the amount of change being presented was overwhelming to users.

The next round of testing was more narrowly focused by placing the primary navigation back at the top and focusing on the location and interaction with the vitals.

Top-aligned Navigation

During this testing, users liked the clarity of having vitals in a side panel where they could use vertical space without needing to hover to see more information and removed the need for a hover interaction making this more accessible, too.

We felt we had created a good pattern and something we could refine and handoff for development. While we were excited about the changes, they got placed into a backlog for a while.

A New Hope (for vitals)!

The designs got prioritized and picked up with a quick dusting-off to align to the design system, which was much more robust at that point. Here the designs are seen in the Classic theme to match the previous color palette.

We released these changes to a group of our opt-in beta users and began to receive great feedback! The CSAT scores were comparable to the previous score so the decision was made to release the update to all users.

Feedback started pouring in

When it rained, it absolutely stormed. This was a drastic change that affected users in ways we hadn’t seen or heard through our previous testing. Side-by-side browser windows, zoomed screens, and using tags as workarounds project information were some of the main culprits.

We kept tabs on the usage data to find any correlation between screen size, increased clicking, and score in a few different ways without seeing any obvious trends.

Back to the users

Our vital mistake?

Not re-validating the designs before the development cycle.

By this time, almost a year after the initial testing had been competed, the product had begun a transition into new interface with an updated font, a new palette, and components getting swapped out from unique buttons and inputs into consistent, Svelte versions.

Filevine had also continued to expand in both types of users and size of companies using the product. Needs and workflows had continued to change while our research got stale.

I started talking to any user I could to collect feedback and share ideas.

Balancing all user needs

While we were getting a lot of feedback asking for the old style of vitals back, we now had to balance that request with users that favored the new style and our desire to maintain a much more accessible way to view this information.

I explored adding in a large amount of user customization, but users just wanted a quick way to see the vitals in the place of their choosing without thinking about it.

The result was to keep the side panel we had previously created while adding a way to mirror the vitals at the top. While a user can open both at the same time, it would be a highly-recoverable and low-risk interaction.

Take a look at the final prototype using both the side panel and the vitals in the page title:

Ship it & (don’t) forget it

We were able to catch the trends on this work is thanks to our user tool Pendo and our teams keeping a pulse on feedback at intervals post-release.

It’s easy to release a feature and quickly pivot to the next item in your queue, but you’ll probably miss out on valuable information. Continued testing and feedback on features into the future helps us to see how new users approach existing features and to capture trends such as ‘new feature forgiveness’ wearing off.

This is a project I worked on while employed at Filevine.

Up next