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.
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.
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.
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.
I conducted interviews and facilitated workshops with the SMEs to understand physicians’ needs, challenges, and workflows.
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
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.
Based on the information from SMEs and discovery, I create user personas and their corresponding use cases.
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.
I defined features based on opportunities in the existing user journey, user needs, and form statuses.
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.
I defined user flows that each persona would take through the app using the filter feature based on their needs, feasibility, and business impact.
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.
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.
The feedback received led to revisions and refining of the design.
Usability testing on the low-fidelity wireframes helped identify potential issues before they became significant problems in the high-fidelity design stage.
The new Advanced Multi-Select Filter Dropdown underwent a heuristic evaluation by a dedicated team and gained approval for inclusion in the design system.
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.
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.
Hire me for contract, freelance, or full time hire.