This is a Case Study for a project I designed, led and delivered; revamping of search in matrices and lists.
To comply with my non-disclosure agreement final solution images are not made available and specific details have been omitted.
The UX objective of the project was to provide users with a modern and consistent searching experience in matrices and lists so they could find the data they needed faster. Users interact with matrices and lists hundreds of times per day in their usage of pricing and booking screens, position management screens and configuration screens.
Implementing a simple filter...
...in screens like this
Doing UX on a 30 year old B2B Enterprise platform, big UX projects can focus purely on upgrading experience. In these cases modern solutions that seem simple to execute can run into complexities due to existing code base and design evolution over decades.
The unified target design may have multiple technological implementations behind it.
Ensure a consistent and unobtrusive experience for the user no matter what technological implementation is in the background.
transition from specialized to unified
Over time solutions had become specialized for individual use cases. To introduce visual and behavioral consistency, you have to be sensitive to the fact that losing functionality may be unacceptable for users. In addition, if an experience is optimized to a certain number of steps, has a certain effort score, that score had better not increase as search is literally used hundreds of times a day.
Ensure a consistent and intuitive experience for the user so the transition from one solution to the next is smooth and doesn't interfere with their work.
I did all design, discovery, interaction specifications and user testing. I also acted as project manager, leading three development teams in execution, coordinated with QC, wrote and distributed all internal communication to project teams, support teams and upper management.
I followed a 5-step process with the last 4 steps iterating three times before the final solution was delivered.
I started the project by observing users using the current filtering functionality and then talking to them about what they thought was working for them and what they thought was missing for them. In some cases users were happy with the functionality but unaware of the real effort it took them to find what they were looking for. In other cases, users didn't even use the existing feature; since it didn't do what they expected the first time they assumed it was broken and never tried using it again.
I wanted a filter solution that was in line with what users see all over the place every day: auto-filtering functionality that filters on results that contain the search term. I compiled lists of search boxes from multiple web sites and applications. I not only looked at the visuals but the way functional options were integrated. If options were used where were they? How many were there?
Research turned up many visual solutions with few set in stone standards. This gave us the confidence to move forward with one that worked for the functionality we needed to integrate.
Micro interaction Analysis
Since users filtered on matrices and lists hundreds of times per day it was important to understand exact patterns of behavior in the current solution and how that would change in the new solution. I ensured extra keyboard strokes or mouse interactions were not introduced and where they could be, eliminated.
A small sample of the interactions analyzed:
- When a user starts typing in a list, what happens?
- When a user changes filter options, is re-execution automatic?
- When filtering in a matrix, does focus remain in the filter box or jump to the matrix after filter execution?
Search boxes are simple but with so few elements the impact of placement and access becomes much bigger. I considered access to options from the keyboard very important to support traders with milliseconds to spare. I placed the search options after the text area so that 'Tab' could be used to access them after the search term was typed. This placement provided the best flow, and the least use of the mouse.
It was also important to consider position and permanence of the filtering box to ensure seamless integration within hundreds of existing screens.
Finally, I carefully considered iconography, working with a visual designer to test multiple variations to ensure a search icon and options icon would not conflict with the icons in existing screens.
Prototyping was essential to confirm assumptions about placement and access in screens. I created paper prototypes for all primary use cases and I tested with both novice and expert users; the former to ensure learnability, the latter to test adaptability and change aversion.
Paper prototyping proved a powerful tool to convincing stakeholders; stakeholders essentially being the heads of all product teams. Not only did it demonstrate that full screen impact had been considered but the feedback from testers gave confidence that users would react positively to the updates.
Based on the user observation and interviews I had done in the Discovery phase, I created user tests that moved the user through all primary use cases. It was important that I didn't just put users in front of a matrix or list and ask them to find a single item. Filtering is done as a means to an end, a tiny step in the overall goal. Instead I asked users to do their normal activities: price and book deals, load and analyze trade positions, find blocked trade confirmations.
The best user tests results: when the user didn't even notice there was a new way to filter!
Build & Pre-validate
As lead designer and project lead, I worked daily with the three development teams responsible for the implementation. Pre-validation of the design consisted of me writing the use cases I would later user test, executing them and then stress testing the design (trying every what-if scenario I and the team could come up with). I found this a fantastic way to uncover sticky "Uh-oh, why did THAT happen moments" before my user testers did. It rapidly accelerated my design sensitivity and decisiveness for design modifications made later after user testing.
Multiple search solutions were unified into one search bar which incorporated filter and go-to functionality. Benefits for users include:
- Increased search speed.
- Reduced mental overhead: one type of filtering versus three.
- Increased learnability.
Finding what you are looking for in matrices and lists depends not only on a correct search tool, but on correct data presentation.
Here is an example. I have a list of currencies and currency pairs. First bad design of the data you are searching, display of an ID. Second bad design, sort by ID. In this scenario, if you search for 'EUR' you get very different results depending on the sort of the lists. If they aren't sorted in ascending order, you don't get 'EUR' returned as the first result even though it makes the most sense as that is the primary content you are looking up.
Bad search experience.
Your matrix isn't sorted on your key search term so to get the value you want you have to first find your value manually then use either 1) arrow key down three times or 2) your mouse to select the desired value.
How does the user feel when this happens? Angry! Angry at the filtering even though technically it's the sorting causing the problem. This is a good reminder that user experience extends beyond ensuring a user can DO what they want and ensuring the following steps give them WHAT they want.
Good search experience.
Your matrix is ordered on your key search term so the first value you get is what you were looking for. You now need one action, <Enter> key or double-click, to select what you were looking for.