ChiaLeLuan

🗂️

Projects

🙋‍♂️

About

📬

Contact

📄

Resume

work project

A Faster Way to the Right Report:
Software Filter Redesign

role

UI/UX Designer

type

Software

category

Medical Instrument

Problem

Asthecompanyaddsmoremedicaltestitemsandreporttypes,thecurrentsoftware’sfilterswillnolongerhelpusersquicklyfindthereportstheyneed.

Solution

-Useadrop-downinsteadofapop-uptoavoiddisruptingtheuserflow.

-Integratethefilterintothelisttitleforacleanerinterface.

-Expandfilteroptionstohelpusersfindreportsmoreaccurately.

Result

Intestingwithourlabcolleagues,allofwhomusethesoftware,thenewfiltercutreportsearchtimeby38%comparedtotheoldversion.

Scroll down to see more details

⬇️

During this project,

I worked with the Product Manager and a Full-Stack Engineer

👨‍💼👨‍💻

We finished the design, testing, and release

We finished the design, testing, and release in 3 weeks

We finished the design, testing, and release

💨

in 3 weeks

💪

I responsible for:

Clarifying the user's requirement
Establishing the user flow
Designing the product interface

Clarifying the user's requirement
Establishing the user flow
Designing the product interface

Clarifying the user's requirement
Establishing the user flow
Designing the product interface

Background

This software, called S10, was developed by Bonraybio, the company I previously worked for. Its primary purpose is to help users efficiently organize, edit, and verify reports generated by all of Bonraybio’s medical instruments.

Problem

I conducted multiple interviews with our sales team and clients to understand and define the issues with the filter.

The primary users of S10 are professionals working in hospitals, clinics, or laboratories, where they manage a large volume of reports daily.

Problems with the Current Version

Limited filtering: Reports can only be filtered by instrument or abnormal case, which restricts flexibility.
Interruptive pop-ups: The pop-up overlays disrupt the user’s flow and take extra time to open and close.
Scalability issues: As more types of reports and testing items are added, the categories will become increasingly complex, making reports harder to locate using the current system.

Problems with the Current Version

Limited filtering: Reports can only be filtered by instrument or abnormal case, which restricts flexibility.
Interruptive pop-ups: The pop-up overlays disrupt the user’s flow and take extra time to open and close.
Scalability issues: As more types of reports and testing items are added, the categories will become increasingly complex, making reports harder to locate using the current system.

Analysis

Due to the time constraint, I researched similar products, focusing on travel booking platforms because they also manage large databases and require different filter options to help users find results quickly.

I took a deep dive into evaluating whether these designs were suitable for S10’s context ~

Vertical sidebar filter
Some booking platforms use sidebars for filters, but in S10, the sidebar is already for the feature menu. Adding another would shrink the report list and hurt readability.

Horizontal dropdown filter

Other booking sites use dropdown filters at the top, which could work better for S10’s layout. This way, users can adjust filters while still seeing the report list, unlike the old pop-up that interrupted the flow.

Horizontal dropdown filter

Sketch

In my first sketch, I placed the drop-down button under the title of each item. Additionally, after observing how users searched for reports, I noticed they often filtered by time and report type, so I included these options in the filter.

After further consideration…

I've noticed that many users rely on names to distinguish between reports or during their search. To address this, I've included names in the subsequent sketching.

I've noticed that many users rely on names to distinguish between reports or during their search. To address this, I've included names in the subsequent sketching.

To create a cleaner and more harmonious layout, I've created a new sketching integrating the dropdown filter into the list headers.

To create a cleaner and more harmonious layout, I've created a new sketching integrating the dropdown filter into the list headers.

To filter for abnormal reports, a toggle button next to the search bar would be efficient, since this is a common task when searching for specific patient information.

To filter for abnormal reports, a toggle button next to the search bar would be efficient, since this is a common task when searching for specific patient information.

Testing

After finishing the initial design, I built a prototype and tested it with colleagues, whose feedback pointed out areas for improvement.

Unclear Filter State
Participants said they often forgot which filters were applied or couldn’t tell if the list was filtered, since active filters weren’t visible without reopening the dropdown.

Outcome

New Filter Interaction
I replaced the pop-up with a dropdown, so users can adjust filters without being disrupted. The filter now includes test type and time, making report searches faster and easier.

Drag the handle to check the difference

Filter Status Cue
The dropdown arrow turns light blue when filters are applied, providing a visual cue to indicate which items are currently filtered.

Result
After the update, I tested the new filter with colleagues in our lab who use S10 daily. I asked them to find specific reports using both the old and new filters.
Results showed the new filter reduced search time by 38% compared to the old version.