From functional to usable: Redesigning a results view users called a game changer

Image of design after the redesign of the landing page, with a cleaner design and a focus on the search functionality.
Image of design after the redesign of the landing page, with a cleaner design and a focus on the search functionality.
Image of design after the redesign of the landing page, with a cleaner design and a focus on the search functionality.

Designed for law enforcement and intelligence teams, this tool reveals a person’s digital footprint by searching multiple data sources in one go - one of which exposes detailed personal data such as known associates, contact details, past employers, financial details and more.

Prototyping

Prototyping

Prototyping

Design system

Design system

Design system

Usability testing

Usability testing

Usability testing

Sept to Oct 2024

Sept to Oct 2024

Sept to Oct 2024

The results view for this data source was functional but failed where it mattered most: usability.

Researchers couldn’t interact with the data, the layout didn’t support their workflow, and the experience fell short of what they expected from competing tools.

Developers were reluctant to revisit code they’d already invested heavily in, and usability wasn’t yet a shared priority among stakeholders.

My challenge was to shift priorities, advocate for users, and redesign a key part of the product - not just to make it work, but to make it usable, useful, and reliable.

redesign impact

Scannable results, competitive product

Results are now easy to scan, making it faster to review large datasets. The product feels more aligned with user workflows and stands up better against competitors.

Trackable journey, trustworthy results

Users can now drill down confidently, track their path, and document their work—crucial for building evidence.

constraints that influenced the design

Lack of UX mindset

  • Usability wasn’t a priority: the team saw the feature as done and were eager to move on.

Limited design system

Rough design system

Rough design system

  • Only black and blue as primary colours

  • Basic components were missing or limited

solution preview

From column chaos to readable rows

Toggle between the before and after version by dragging the icon in the centre

Key insights

Key insights

Key insights

Clunky” was how one user described the results view — though the data was valuable, the experience made it hard to use. Some couldn’t fit it into their workflow, others chose not to use it at all.

key pain points

Hard to scan at a glance

The layout forced constant eye-jumping, slowing researchers down when speed was key.

Can't keep track of search journey

Users had no way to trace their steps while drilling into data—crucial for documenting findings and building evidence.

Source confusion while drilling

Users kept second-guessing where they were drilling—undermining trust and making them question the tool's reliability.

Reworking the page layout

Reworking the page layout

Reworking the page layout

The design made scanning uncomfortable, with too much eye movement required and key details shifting out of view, breaking the user’s flow.

Use the scroll to see the data falling outside the viewport

Tables made sense, but the mix of data called for smart organisation. Using realistic data, I tried different layouts to find a structure that supports comfortable scanning.

1st iteration

To start, I attempted to arrange tables side by side, placing the smallest ones next to larger ones to maximise space.

REJECTED: Too much wasted space and limited scalability

2nd iteration

I tried placing contextual data, such as the first time the data was collected and how often it was found, below the main data to provide more context.

REJECTED: Cumbersome layout and hard to scan efficiently.

The final layout lets each categories span the full page for clarity, with static details like gender are in the header. Only tables with data appear, showing info in single rows and adding columns as needed.

ADOPTED: Final page layout using table format spread across the page

Next step

Once the page layout was sorted, I tackled the table and header design to address the remaining user pain points.

Building a better table pattern

Building a better table pattern

Building a better table pattern

With no existing table pattern, I iterated on table structures to optimise data hierarchy, spacing, and readability, landing on a design that supports effortless scanning and adapts to varying data sizes.

ADOPTED: Clearer column and table headers, simplified alignment and wording for readability.

Turning resistance into collaboration

To get buy-in from reluctant developers, I pitched the table design as a strategic solution—not just a one-off fix, but a pattern to unify the entire product suite.

I worked closely with a UX colleague redesigning a key user report, testing each table iteration to ensure compatibility and consistency across use cases.

I sold the benefits: for developers, tired of maintaining inconsistent designs across products, this was a chance to save time and reduce friction. Framing it as a “two birds with one stone” solution won them over and set the foundation for a more maintainable design system.

Next step

Designing the tables took time, since the format had to work across all products. With that sorted, I moved on to tackling users’ drilling confusion with a new, unique header.

Bring visual clarity with a unique header

Bring visual clarity with a unique header

Bring visual clarity with a unique header

This data source reveals detailed personal info and lets users drill into any item—click an associate to see their details or an address to find everyone linked to it—making exploration dynamic and interconnected.

That’s why a distinct design was essential to signal when users were navigating this source.

Example of drilling flow

To clear up confusion about drilling into the same data source, I created a distinct header highlighting its uniqueness. This also allowed me to introduce an accent colour within the limited design system.

Distinct header to bring clarity and visual interest

I also added distinct icons to quickly identify what type of data is on the page and add visual interest.

Person

Mobile

Email

Location

Landline

Ip address

Next step

What’s left is making it easier for users to track and document their searches.

Tracking the journey with breadcrumbs

Tracking the journey with breadcrumbs

Tracking the journey with breadcrumbs

A breadcrumb navigation was added at the top of the page to help users track their progress, navigate with ease and document their search for evidential purpose.

Basic breadcrumb structure

Make the logic visual to the developers

To explain the breadcrumb behaviour, I mapped out real user scenarios and created visuals for each page in the app.

Why it mattered: Breadcrumbs are simple to use but the logic behind-the-scene isn’t. Showing how breadcrumbs behaved across edge cases helped everyone, from developers to client-facing stakeholders understand the rules.

How it helped: I built the user story and acceptance criteria with the developers, using the illustrations to resolve confusion and validate assumptions faster.

Breadcrumbs rule - Scenario 1 out of 8

Final version

Final version

Final version

Use the scroll to see the data falling outside the viewport

key pain points addressed

Hard to scan at a glance

Table layout reduces eye movement and improves readability. Users preferred this, even with extra scrolling.

Can't keep track of search journey

Breadcrumbs help users track steps and switch paths with ease.

Source confusion while drilling

Clearer visual cues reduce distraction and help users stay focused on the right source.

Next step

Next step

Next step

Unfortunately, the project was cancelled shortly as the last piece of the updated design was implemented. But here is what I would have done given more time.

More user testing!

As this was the final piece of the redesign, I had hoped to run a full usability test on the entire product. The last round revealed users needed more context to fully understand the data.

Impact

Impact

Impact

Quotes from users

👨‍🦱

👨‍🦱

👨‍🦱

"New layout is so much easier to read and scan!"

🧔🏻

🧔🏻

🧔🏻

"A real improvement from the clunky layout"

👩🏻‍🦰

👩🏻‍🦰

👩🏻‍🦰

"Drilling into the data is a game changer"

👩🏽‍🦱

👩🏽‍🦱

👩🏽‍🦱

"This is so much better! I can document my findings and explain them to my manager."

Missing person found

Customer support informed the team that the data source was used in a missing person case and played a crucial role in helping locate the individual.

Identifying key details in national security cases

It was also reported that the data source was used to identify addresses and associates of a person of interest in a national security case.

Reflection

Reflection

Reflection

Improving the approach

I underestimated how resistant stakeholders would be to change. I should’ve run a workshop early on to show the value of the redesign, backed by user research, and aligned on a clear timeline.

I also wish I’d involved key stakeholders sooner to build trust and gain support: a lesson I’ve carried into future projects.

Simplicity beats aesthetic

For serious work, efficiency trumps aesthetics. I thought the limited design system would be a hurdle, but once key components were adjusted, consistency was all that mattered.