Portfolio

A collection of shipped projects, designs and concept studies created for my clients or simply for fun. You can find some of them on my Dribbble and Behance profiles.

The importance of Design Patterns in complex environments

Not so long ago I has the pleasure to prototype few screens for an infrastructure and application monitoring tool, checkmk.

The challenge was to help users navigate their custom dashboards, applications monitored and data displayed in a fast and intuitive manner without limiting their possibilities in such a complex environment.

My main business requirement, stemming from the UX Researchers findings, was the optimization of the multitude of already available Filters. To my surprise, despite the total number of variables being over 3 digits, there was no search bar available: the filters were a very long scrollable list of sometimes very technical terms.

I considered various option and, after considering the short additional audit I prepared for the screens, I opted for a modal with grouped filters which could be expanded and collapsed. Additionally I designed a new search bar at the top of the filters and prototyped it to show the new elements behaviour and specifics: typing into the search bar would prompt a view showing only the filters containing the searched sequence of letters, displayed under the relevant, expanded category for further clarity and education.

This solution would allow less experienced users to quickly find the exact variable they were looking for while displaying the category it belongs to, expanding on the progressive onboarding of the tool.

For more experienced users, grouping the various filters would allow a quicker navigation and selection without prolonged scrolling and risk of tunnel vision due to the amount of text displayed all at once.

Once I had my high fidelity wireframes and a functioning prototype, I would leave the copy of the remaining categories to the technical writers. Here is a quick view of the first rudimental prototype I created in Figma.

The final design included some changes to the Options button (namely icon and exact functionality to match users expectations) and an additional Save checkbox.

While working on this project, I realised that despite the filters and search bar patterns usefulness, and despite the natural mapping often occurring when users are being presented with multiple paths and choices, not all UX designs take in consideration the potential choice paralysis, tunnel vision and consequent frustration which may result from the lack of these patterns.

I think this might show how sometimes as UX Designers we focus on beautiful and complex solutions while overlooking the effectiveness of simplicity and customization.