Role: Research, UX, UI
Team: Solo project
Tools: Figma
Duration: 1 week
The App's Narrative
Imagine an app called "DeviceManagerPro," which is used by IT administrators in large organizations to oversee a myriad of devices, from computers and phones to printers and servers. The app's strength lies in its ability to filter through thousands of assets quickly and intuitively.
The User
Meet Alex, an IT admin, who needs to ensure all devices in the Poland office are updated with the latest security patches. Alex uses "DeviceManagerPro" to filter devices by location, type, and update status.
Explaining the Terms
Free Text Filter - A search bar where Alex types in keywords like "unpatched" or "Poland office." The debounce mechanism means the system waits for Alex to finish typing before it starts searching, preventing unnecessary loads on the system.
Serial Number Search - This lets Alex find a specific device by its unique ID. It is like looking for a book in a library on its ISBN.
Asset Type: Alex can select from a list (like a dropdown menu) to filter devices by their type, like PCs or phones.
Cost Center - This filter helps Alex track which department the device's cost is assigned to. It is helpful for budgeting and financial oversight.
Debounce Mechanism - This ensures that the system searches for items after Alex stops typing, reducing the number of searches the system performs and improving performance.
Clearing Filters - If Alex wants to start a new search, he can remove all his filters with one click using "Clear all filters.”
Acceptance criteria
1. By default, above the list system displays "Free text" filter: User can type in any keyword. Debounce mechanism is applied to the field + at least one character required to filter the data (filter not taken into consideration if empty). The system searches only within the data (columns) displayed on the list (columns not displayed are not included in the search). For the columns containing more than one piece of information - search is performed on all information displayed in the column. Search is case insensitive.
2. User can additionally filter the list of assets based on filters available:
a. Serial number: text Search for the assets which serial number contains filtering value, case insensitive. b. Asset Type: Multiple choice picker: PC, Server, Keyboard, Monitor, Phone, Printer c. Cost center: Multiple choice, List of all cost centers defined within a system: (ex. Poland, Finland, USA + option: "No cost center". d. Used by: multiple choice picker, List of all users defined + option: "No user assigned". It is possible to display the assets assigned to selected users (or not assigned to any user). e. Location: multiple choice picker List of locations defined within the system. Displayed all location data. Search by text possible (searching through all location fields). Filter not displayed if there are no locations defined for the bundle.
3. User can apply various filters to the list - user can set the filtering conditions (see the details for each filter) - system applies defined filters to the list (see the description below), - system displays applied filters on the main asset page.
4. When user changes the filtering condition of one of the filters displayed directly on the list, filtering is applied immediately after selecting the filtering value (excluding "Free text" filter - where debounce mechanism should be applied).
5. Appropriate message is displayed if no assets meeting filtering criteria found.
6. User can clear individual filters (by clicking appropriate option).
7. User can clear all the filters (by clicking option "Clear all filters").
2. User can additionally filter the list of assets based on filters available:
a. Serial number: text Search for the assets which serial number contains filtering value, case insensitive. b. Asset Type: Multiple choice picker: PC, Server, Keyboard, Monitor, Phone, Printer c. Cost center: Multiple choice, List of all cost centers defined within a system: (ex. Poland, Finland, USA + option: "No cost center". d. Used by: multiple choice picker, List of all users defined + option: "No user assigned". It is possible to display the assets assigned to selected users (or not assigned to any user). e. Location: multiple choice picker List of locations defined within the system. Displayed all location data. Search by text possible (searching through all location fields). Filter not displayed if there are no locations defined for the bundle.
3. User can apply various filters to the list - user can set the filtering conditions (see the details for each filter) - system applies defined filters to the list (see the description below), - system displays applied filters on the main asset page.
4. When user changes the filtering condition of one of the filters displayed directly on the list, filtering is applied immediately after selecting the filtering value (excluding "Free text" filter - where debounce mechanism should be applied).
5. Appropriate message is displayed if no assets meeting filtering criteria found.
6. User can clear individual filters (by clicking appropriate option).
7. User can clear all the filters (by clicking option "Clear all filters").
My process
Final look!
Old one:
New one:
