Form Filtering

My Role

UX/UI Design
User Research
Wireframes
Prototypes

Tools I Used

Miro
Sketch

Methods

Interviews
Personas

The Problem

Users must navigate to a different part of the application to view completed forms. For example, if they need to look at notes, they have to quit, find the information, and then restart their workflow.

My Process

Research

Interviews
To better understand which features they thought were most important and the issues they were facing, I conducted interviews with stakeholders and SMEs of varying roles. I wanted to know how their answers would vary depending on their skill level.

Key Findings & Insights
The interviews helped me understand the current flow and define the users: nurses, physicians, and students.

  • Users don’t want to spend more time documenting on a computer than they have to. Every add, click, loading time, processing time – all of these add up and don’t take long to build up frustration.
  • Their goal is to see as many patients as they can a day.
  • Slowing them down may introduce risks in other ways.
  • They use the Charting section to review, tag, unchart, modify or complete the workflow.

Use Cases

  • If a physician needs to sign unauthorized documentation (by student), they would pull up the charted views, review them, and sign for it.
  • A physician could be looking for a view in a completed status because they know they saw it earlier and now want to tag it. They know what they are looking for, or they see the status.
  • They do not see something they thought they charted or would have to come back to something they were In Progress on. They know they left a form In Progress and need to come back to it.

Define

Problem Statement
Users need a way to quickly filter forms based on statuses in desktop and mobile views. Their goal is to move through their workflow more efficiently to see as many patients as possible per day.

User Personas
I found that users of varying roles have different needs. As a result, I created three user personas for nurses, physicians, and students. I revisited these personas often to remind myself of users’ needs and frustrations and maintain a user-centric focus for the duration of the project. 

Core Features

With a better understanding of users and their needs, I identified core features and data points that I need to focus on the filtering:

  • Access filters
  • Select multiple filter options (Status, Author, Date)
  • View Applied Filters
  • Clear All Filters or individual filters

Wireframes

Simplicity and ease of use are my biggest aims, the number of screens was kept to a minimum, and I wanted to highlight the core features. So I explored different solutions with sketches until I found a combination of elements and features that would be as intuitive as much as possible.

Next, I created mid-fidelity versions of the wireframes in Miro. 

Previous
Next

Prototype/Usability Testing

After receiving feedback from stakeholders and multiple iterations, I made a prototype and worked with the Human Factors team to test it with usability testing. Participants were asked to complete a few scenario-based tasks that would test the main features of the filtering feature and were asked how they felt about the feature in general. The results of the usability test were recorded and analyzed.

CLICK HERE to view the final prototype.

Key Findings

The HF Team made notes of the positive and negative feedback so that I knew what to rework.

Positive

  • Clear Call To Actions
  • Global sticky sidebar
  • Search Bar
  • Brand Identity
  • Clear Value Proposition
  • News section

Negative

  • It’s not clear in the UI that users need to press the button labeled with the Filter Icon to enter the feature.

Areas for Improvement: make the icon of the filter button more understandable. Consider adding the term “Filter” to the label or replacing the icon altogether. 

Resolution: The team agreed to put the text “Filter” on the button with the icon. 

Hi-Fidelity Mockups

I made changes based on the user feedback and then reached out for additional feedback from fellow designers. I created a high-fidelity version of the feature and added the label “Filter” to the button. 

Final

After many iterations and testing, my final feature aligned with the objectives I had set in place – it includes core features necessary for users to filter forms quickly and efficiently while appearing visually appealing and simple to use.