Filter Feature for Medical App
Project Overview
The goal of this project was to design a filter feature for a medical app to help physicians locate forms needed for patient care quickly. This design enhancement aimed to reduce the time doctors spent navigating the app and allow them more time to focus on patients.
Problem
Physicians were required to scroll through various sections of the app to locate necessary forms, which consumed valuable time that could have been better used caring for patients.
My Role
As the lead UX/UI designer, I worked with the Product Manager, guided the team through the design process, collaborated with Subject Matter Experts (SMEs – retired doctors and nurses), and coordinated with the Human Factors Team for usability testing.
Tools Used
Whiteboard
Miro
Sketch
InVision
Process
Kickoff
I started the project with a kickoff meeting involving all stakeholders, including the development team and Subject Matter Experts (SMEs). This meeting’s primary goal was to understand the project’s scope and constraints, both technical and design-wise, and ensure everyone was on the same page.
Key Takeaways:
- Resource constraints
- I learned that we had limited developer resources, so it was essential to leverage the existing design system components and keep the solution straightforward for efficient implementation.
However, I was able to innovate within the constraints, and as the project progressed, I proposed introducing a multi-select filter dropdown to enhance the user experience. This new component underwent a heuristic evaluation by a dedicated team before gaining approval for inclusion in the design system.
- I learned that we had limited developer resources, so it was essential to leverage the existing design system components and keep the solution straightforward for efficient implementation.
Discovery & Research
Interviews
I conducted interviews and facilitated workshops with the SMEs to understand physicians’ needs, challenges, and workflows.
Key Takeaways:
- During these sessions, I discovered that additional users, such as nurses and students, also had to navigate the forms.
- I learned how users currently navigated the app to find forms, which entailed searching and scrolling and made their workflow difficult.
- Their goal is to see as many patients as possible a day, and slowing them down may introduce risks in other ways.
- Based on feedback from SMEs, I was able to define the most effective filter options, which included form status – Completed, In Progress, and Pending Validation, Author, and Date.
- When clinicians encounter patients, they must quickly review their history and complete and approve forms in progress.
- They used mobile phones and desktop computers to access the app.
Existing Workflow
I requested a demo to observe the SMEs using the application to find forms. This insight was valuable in understanding their needs and pain points.
User Journey Map
Summary:
In the current workflow, the lack of a centralized “Forms” section and a filtering feature creates significant challenges for users. These opportunities can inform the redesign of the application to enhance user efficiency and overall experience.
Define
User Personas
Based on the information from SMEs and discovery, I create user personas and their corresponding use cases.
Use Cases
- A physician must authenticate a medical student’s documentation. They need to locate, review, and sign the specific charted form.
- A nurse must locate a previously viewed form tagged as “Completed” for further reference or action.
- Users need a simplified way to locate “In Progress” forms they previously worked on.
Problem Statement
The application’s current design makes it hard for physicians to find the forms they need to complete their workflow and reduces their time to care for patients.
Features
I defined features based on opportunities in the existing user journey, user needs, and form statuses.
- Forms Section: Introduce a “Forms” section that organizes all forms in one location to address the issue of navigating through various areas of the app to find forms.
- Advanced Multi-Select Filter: Introduce a dropdown in the Forms section that allows users to apply multiple filters across form statuses (“Completed,” “In Progress,” “Pending Validation,” “Author,” and “Date”). This will cut down the time spent in locating specific forms.
- Clear Filters Option: Implement an option to clear all active filters with a single click or individually. This will allow users to reset their search quickly and efficiently.
- Filter Button: Add a filter button that activates the filters selected from the multi-select dropdown. This gives users the control to apply filters when they are ready.
Ideation
Sketches
In the next step, I brainstormed potential solutions. Since I had to work within the existing design system, I focused my ideation within these boundaries.
I explored a range of filter options through sketches and presented them to the team for feedback, and we decided on the best way forward.
User Flows
I defined user flows that each persona would take through the app using the filter feature based on their needs, feasibility, and business impact.
Nurses
- Starts from the main dashboard
- Navigate to the "Forms" section
- Use the filter feature to select "Completed" status
- Browse through the filtered list and find the specific form they saw earlier
- Click to open the form and review the details
Medical Students
- Begin at the main dashboard
- Move to the "Forms" section
- Apply filter to display forms with "Pending Validation" status
- Identify the forms they have created, waiting for a physician's review
- Monitor the status of these forms and await authorization
Physicians
- Start from the main dashboard
- Navigate to the "Forms" section
- Use the filter feature to display "In Progress" or "Pending Validation" status forms
- Open the form, complete review, or sign off
- Return to the "Forms" section and continue with the next form in the list
Wireframes/Prototypes
I created low-fidelity wireframes in Miro mapped to user flows and use cases. I incorporated existing elements to build a new component – the dropdown filter.
After iterating and finalizing the wireframes, I transferred them to Sketch, followed by a clickable prototype in InVision.
Usability Testing
The wireframes then underwent usability testing with tasks the Human Factors Team prepared.
Usability testing was conducted with 10 participants, including nurses, physicians, and medical students, to evaluate the features’ effectiveness, efficiency, and satisfaction.
Results:
- Centralized Forms Section
- 100% of the participants found the forms quickly and easily.
- Participants’ feedback was positive. They stated that having all forms in one place simplified the navigation process.
- Advanced Multi-Select Filter
- Participants found forms 80% faster compared to the previous design, with 90% accuracy on the first attempt.
- 100% of the participants found the multi-select filter easy to use.
- Participants appreciated the flexibility of multi-selection and commented that it significantly streamlined their search process.
- Clear Filters Option
- All participants found the clear filter option and used it successfully to reset their searches.
- Participants found it helpful, especially when they wanted to start a new search quickly.
- Filter Button
- 100% of participants understood and correctly used the filter button.
- Feedback indicated that it added extra control to their search process.
Design Revisions
The feedback received led to revisions and refining of the design.
- It wasn’t clear that users needed to press the button labeled with the Filter Icon to enter the feature.
- Recommendation: make the icon of the filter button more understandable. Consider adding “Filter” to the label or replacing the icon altogether.
- Resolution: The team agreed to put the text “Filter” on the button.
Usability testing on the low-fidelity wireframes helped identify potential issues before they became significant problems in the high-fidelity design stage.
Heuristic Evaluation
The new Advanced Multi-Select Filter Dropdown underwent a heuristic evaluation by a dedicated team and gained approval for inclusion in the design system.
High-Fidelity Design
The approved dropdown and wireframes were converted into high-fidelity mockups following the company’s Design System. I created a final prototype shared with SMEs and other stakeholders.
Final Prototype
I created a final prototype shared with SMEs and other stakeholders.
Handoff
After the high-fidelity design was approved, I prepared a detailed design specification, including annotations and links to the components in the design system, to guide the development team in coding the feature.
During development, I collaborated with the development team to ensure that the Filter Feature aligned with the prototypes.
Results
Implementing the filter feature reduced the time physicians, nurses, and students spent searching for forms, increased workflow efficiency, and allowed users to dedicate more time to patient care.
Let's Work Together on Your Next Project!
Hire me for contract, freelance, or full time hire.
Copyright © 2023. All rights reserved.