Komdat

Komdat specializes in providing tailored software solutions for water management organizations.

In this project, I utilized my UX expertise to enhance the filter functionality in Komdat's software, delivering a more intuitive and user-friendly experience.

Red wave of

Role

Overview

Goal

UX/UI Designer
The focus was on redesigning the filter functionality of their software. This involved user research, wireframing, prototyping, and testing to ensure the solution met both user needs and business objectives
Create an intuitive and efficient filtering experience, improving usability and enabling users to find relevant data more effectively

Design Process

Briefing, Problem statement
Brainstorming
Sketching, Low fidelity wireframes
High fidelity wireframes
Usability testings
Finalization and documentation
Empathize

Briefing

The project began with a briefing from the CEO, who outlined the need for a more intuitive filtering system to align with the company's vision of delivering user-centric software solutions

Here the link to the entire document

Problem statement

Users found the existing filter feature unintuitive and struggled to efficiently locate relevant data, impacting productivity and satisfaction

Possible solutions

  • Simplified UI 
  • Use a clean and minimal design to reduce cognitive load
  • Organize filters into collapsible categories for better navigation
  • Implement visual hierarchy to emphasize important filter options
  • Add a search bar within the filter section to let users type and locate specific filter options quickly
  • Enable Dynamic Filter Feedback, by providing real-time results as users adjust filter criteria, so they can immediately see the impact of their selections

Blendi's Note: 
"This showcases how the CEO's vision and a clearly defined problem statement drove the redesign process. By focusing on user needs and aligning with the company’s goals, the briefing and problem identification stages set the stage for a thoughtful, user-centered approach. The proposed solutions emerged from a collaborative effort to balance simplicity, functionality, and innovation, ensuring the final design would genuinely address user pain points and enhance overall productivity."

Define

Brainstorming

The brainstorming session focused on improving the navigation structure of the filter function to enhance user efficiency and satisfaction

Step 1:

How Might We (HMW) Questions

Pain point: Users find it difficult to filter results in their sheets

  • How might we make the filtering process simpler and more intuitive?
  • How might we visually emphasize the filters without overwhelming the user interface?
  • How might we provide immediate feedback to help users understand the impact of their selections?
  • How might we create filters that work seamlessly across different devices and screen sizes?
  • How might we help users easily recover if they apply the wrong filters?
  • How might we design filters that feel lightweight and non-intrusive?
  • How might we enable users to combine multiple filters without confusion?

These questions encouraged the exploration of multiple aspects of the user experience, from simplifying the interface to introducing advanced features and ensuring accessibility.

Step 2:

Video Call with the CEO

We used the above questions as prompts for brainstorming to encourage a solution-focused mindset.

Insights from the call: 

Mind Mapping

Blendi's Note:
"The brainstorming session and CEO discussion highlighted key priorities: simplifying the filtering process, ensuring accessibility across devices, and providing tools for error recovery. Balancing simplicity with functionality was a core challenge, as was designing a clean yet flexible interface. Using structured HMW questions fostered creativity and collaboration, enabling solutions that aligned with user needs and business goals. This phase reinforced the importance of iterative exploration in delivering impactful design."

Ideate

Sketching

Filter at its initial state

Filter function now

1st idea

To maintain the existing structure of the layout, I proposed condensing the left menu into icons only and introducing a collapsible section for the filter.

Each filter is represented as a dropdown menu. To select a filter, users can expand the dropdown by clicking on the chevron icon.

Sketch of the first idea

2nd idea

Continuing with the same layout structure, I proposed an alternative solution where the filter section is collapsed into icons. Upon selection, a pop-up window would appear, allowing users to interact with the filter options.

Sketch of the second idea

3rd idea

A more modern approach involved integrating the filter as a button positioned at the top.

Sketch of the third idea

4th idea

A contemporary and up-to-date solution was to add the single filter options on the top, always visible (as in the actual state), with a chevron to make the filter collapsable

Sketch of the forth idea

Low Fidelity Wireframes

1st idea

Low fidelity wireframe of the first idea

2nd idea

Low fidelity wireframe of the second idea

3rd idea

Low fidelity wireframe of the third idea

4th idea

Low fidelity of the forth idea

After a quick test, we used to move forward with the 4th option.

Prototype

High Fidelity Wireframes

As

Test
Implement

The redesigned filter improved task completion times by 30% and received positive feedback from both users and stakeholders, aligning with the company's goal of enhancing user satisfaction