When checking out, the page assumes the user will check out as a guest. The checkout flow by default, does not force the user to login or create an account. When filling out the form fields, email is listed with an asterisk so the user will be aware that this information is mandatory to complete on the page.
Redesigning Search Filters
for Law Firms: User Testing
By. Jennifer Christensen
PracticePanther is a case management system for attorneys in the SaaS tech space.
Jump to a specific phase of my design process, within this case study
Table of Contents:
What is a search filter in PracticePanther?
Users have the ability to filter rows of information, by selecting from dropdown menus at the top of a grid.
Example: Filter by bank account, payment method, etc.
Original (previous) Payments Screen:
Problems to Solve:
-
Search filters are not intuitive or consistent in their functionality across the product
-
Don't have a modern look
-
Currently there is no ability to see the status of the payment (failed, pending, successful, etc)
Solutions:
-
Create consistent and intuitive functionality for all filters, with the goal of implementing the new filters on all grids in the product
-
Modernize the UI of the search filters
-
Include a filter for payment status and allow users to select multiple at once
My Role: UX Researcher - What Did I Do?
I became involved with the project after initial designs were created by the UI designer.
-
Developed a script for one-on-one usability testing via Zoom, to gain qualitative data
-
Performed usability tests one-on-one with existing users, via Zoom
-
Created a Figma prototype to utilize during usability testing
-
Created a separate usability test using Maze, to acquire quantitative information and heat maps, to see what users struggle with while using the filters
-
Synthesized results via affinity mapping in FigJam
-
Provided design suggestions for final designs based on results of testing
Why did I decide to use both Maze and one-on-one usability testing methods?
-
Maze links are put inside the product itself, for users to click on. We can gather a large amount of quantitative data from numerous users via Maze.
-
One-on-one usability tests allow us to gain more qualitative data from each individual user, and allow us to ask them follow up questions when they provide comments.
Validation Phase (User Testing)
Goals of User Testing:
-
Evaluate if users understand that they can click multiple items in some dropdowns (this functionality did not exist in the old filters)
-
Users should understand they can click “more filters” to see all filters
-
Gauge the level of intuitiveness of the design, and provide possible solutions to any problems found during testing
467 Users: Maze Tests
Created a test in Maze, that could be clicked on by users directly from PracticePanther.
467 users initially clicked on the test!
229 users finished the entire test and all questions at the end.
4 Users: One-On-One User Tests
Performed one-on-one testing via Zoom with 4 users
All user testing focused on 2 tasks:
1. Search for payments by status (requires the user to select multiple statuses, to ensure they understand they can select multiple).
2. Filter by payment method - this requires the user to select "More Filters" to see all. To save space, if there are many filters, we hide some filters unless users click "More Filters". Ensure that users understand how to see all filters.
Heat Map Results
When presented with the first task (to filter by 2 payment statuses) users explored the screen, getting acquainted with the new design. However, this is fairly normal.
When asked to perform the second task (filtering by payment method), a few users selected the actual Payment Method column on the right side. But almost all users selected the correct area on the left after a few seconds - 14 seconds was the average amount of time spent).
Ease of Use: Users rated the design an 8.3 out of 10
(on average)
Synthesizing Data - Affinity Mapping
Main Issues Found:
-
Users disliked the additional click to see all filters
-
Filters were not located close enough to the grid
-
Some colors were not dark/accessible enough
Affinity mapping - I used color coding to sort the items based on what part of the screen was mentioned, if a user mentioned something they disliked. This helped me figure out which parts of the design should be changed.
Three types of issues emerged from looking at the data:
-
Items that were difficult to understand/tasks that took too much work
-
Accessibility problems with color contrast
-
Discoverability
Design Decisions and Iterations
Three things we should change to create a better user experience: (based on affinity map results)
.png)
Solution and Final Design
.png)
Before
After
What I Learned
Never forget about accessibility - some users during the test were unable to read the blue text on the grid. After this project, when I helped create a new design system, I tested all color combinations for contrast accessibility outlined by WCAG standards.
Gestalt principles of design - the filters were separated from the grid by a grey row. In the final design, we moved the proximity of similar elements, so the filters were directly above the grid where users would expect them to be.
User Feedback and Quotes
“I’ve been a PracticePanther user for a while, and this kind of filtering and ability to drill down on stuff is much improved.”
- 20 user firm in Utah
“I would like this to be implemented system-wide. It’s a lot more user friendly than the current system.”
- 9 user firm in Florida