Matthew Mocniak – Human Centered Designer
Associated Search Cover.png

Adding Associated Search

Adding Associated Search


I was recently tasked with an interesting design challenge. Without access to user analytics or research, I was asked to design a new user experience for a web application that allows a case worker to interact with case member information and initiate investigations from a case-based workspace. The case worker needed a way to search for a case member and receive suggestions for people associated with that member.

I worked with the software architects to gather requirements, coordinate with developers, and meet with end users.

In addition, there were several challenges to face with this assignment:

  • There was no existing design library

  • The UI is locked down, so I had to work with what already exists

  • The users don't trust the application



I began by sketching common elements that exist in other parts of the application to see how my design may fit within them.

Certain functions, like action menus, expanding lists, and table organization were explored in my sketches before moving to Balsamiq.



Mockups in Balsamiq

For the mockups shown, I had roughly one week to produce them with documentation. Since a design library did not exist, I used Balsamiq to recreate the structure of the existing application before designing the rest of the prototype.

The existing users do not trust that the application shows them all possible information. This is a result of the application dynamically hiding details on other screens. I needed to account for an exhaustive approach to display information without being redundant.

Mockup Close Up.png

Process Flow@1x.png

Building a Process Flow

As I iterated on screen mockups, I ended up with a "hub" where a lot of the other screens would stem from. As the other screens came together, I connected them with process flow arrows. This also provided a starting point for the developers to begin incorporating this design into their development sprint.

Navigating through a series of pop-up modals is not ideal, but it is required functionality for how the rest of this application is built. If I could revisit this design, I would focus on creating a single-page layout to prevent the user from jumping screen to screen.



Documentation & Demonstration

For each iteration of my design, I kept track of a documentation file that describes the elements on the screen and how they connect to backend elements. This documentation is useful for the developers and testers to complete their tasks, but it is also required for our stakeholders to ultimately review and approve.

I also produced a use-case scenario in which a case worker could use the new associated search functionality to add new information for a case participant, thanks to an association the participant had on another case.

This scenario was presented to stakeholders and end users to gather feedback. Our development team created a demo environment so I could walk through my scenario. Following the demo, my team received positive feedback on the design. Having a single workspace for the end user to interact with was a standout feature. We were requested to improve other parts of the user experience of the application, based on this design.

PDF Stack.png


Next Steps

By the end of my design sprint, I had created a design library in Balsamiq to make future mockups. With design documentation, the developers were able to continue implementing the functionality to the application.

I have recommended a user field test once this new feature is fully launched. It would be an effective way to obtain user feedback and hear their thoughts of how their everyday workflow is affected by it.