Optimizing the Person Look-up Tool for Easier Search
Ending the secrecy that protects police misconduct by changing police secrecy laws and empowering the defense community to track police misconduct through a web-based application.
Client
National Association of Criminal Defense Lawyers
Timeline
4 weeks
Tasks
UX Design, User Research
Tools
Figma, UXMetrics, Slack, Jira, Confluence
Project Overview
The National Association of Criminal Defense Lawyers (NACDL) is an organization that advocates for practice and policy improvements in the current legal system.
The Full Disclosure Project (FDP) aims to end the secrecy that protects police misconduct by changing police secrecy laws and empowering the defense community to track police misconduct through a web-based application.
Design a new way for data entry users to look up and add people to the "Relationship" section of the officer profiles.
The existing tool contained the following issues:
The information displayed was too crowded and users found it difficult to discern what each piece of information meant.
If officers had the same name/similar identifying information, users would have to open a new window to view the full profiles.
Task
How might we make the person look-up experience faster and more efficient?
Before beginning the design process, I established the following goals to guide my ideation:
Allow users to preview identifying information about officers at a glance.
Provide more information in the search preview.
Add a feature that allows users to open the officer's full profile in a new tab directly from the look up tool.
Design Goals
Users can now view more information about an officer before committing to a selection.
I built a mid-fidelity wireframe to test my initial design and send it to the developer team and stakeholders. Was it intuitive? Was I addressing our users' pain points?
I wanted to focus on creating an information preview because one of the primary user concerns was that they had to click the officer’s name and open their profile in a new tab to verify that they had clicked the correct officer. To address this, I added the following features:
Two Columns: Adding 2 columns would prevent the overcrowding of information. Having extra space on the right column "card" allowed me to display more information in a more breathable way.
Hovering Capability: Users can hover over the list of names on the left column to see the respective information populate on the card on the right column. This allows them to browse through the list of names easily and quickly. If users want to select a name, they can click it on the left column.
View Full Profile: Users can click the "View Full Profile" button that will open the full profile in a new tab.
Mid-Fidelity Wireframe
User testing revealed that the following changes needed to be made.
Add a scroll bar to accommodate search queries with 5+ results.
Add identifying information to the list (left column).
Move the "View Profile" button from the right to the left column.
Feedback
Refining the wireframes
Users can now scroll through relevant search results and view more information about an officer if they need to.
After receiving feedback, I designed an interactive hi-fidelity prototype with the following features:
Scroll Bar: I added a scroll bar on the left column so that users could browse through a list of officers.
View Full Profile Button: I added a button to view the full profile and added an icon to indicate that clicking it would open a new tab.
Placeholder Images: I added placeholder images for officer profiles that did not yet have a picture.
Hi-Fidelity Prototype
This feature was developed and is currently live for users! With more time and resources, I would consider taking the next steps.
Future Considerations
How do users experience the revised look-up tool within the entire data entry experience?
Due to time constraints, we were not able to conduct testing after the development of the tool. WIth more time, it would be interesting to see if the addition of this tool benefits or hinders the overall data entry process.
Where else can this tool be implemented in the Full Disclosure Project?
The relationships section is not the only look-up tool in the project, and I would love to add this to other areas such as Identifiers and Commands to make the entire data entry process more efficient.