How might we make filtering notes and cases on a phone as clear as it already is on desktop?
Filtering flow prototype.
Timeframe
The time limit of Hackday allowed us to prototype quickly and a review, but did not leave time for usability testing and measurement.
A live product with a real codebase
We were designing for a portal that already exists and is maintained by Slovensko.Digital, so every idea had to be compliant with the existing logic.
Engineering reality
The full redesign turned out to be too complex to ship as one change. That is how the scope got cut, and it is the most important constraint in this case.
Collaboration
This was my first collaborative project. I had to explain and defend design decisions to people with different priorities.
The problem was listed on Github as Issue with unclear Mobile Filtering behavior. To explore the problem thoroughly, both Michal and I tested the mobile version, looking for more details about the problem.
Main painpoints turned to be page payout, behavior of the filter modal and unclear active filters.
Next up, we ran a brainstorm session for possible sollutions and Michal kept notes on the problems. To ensure we solve the correct problems, I proposed to prioritize the list.
Filtering modal closed after each action. This approach worked well on desktop, however on mobile it created confusion. This was a nested pain point, because after applying the filter immediatelly and closing the modal, user did not see how many filter he had applied.
The prototype I built was approved after review by the software developer and the PM. The developer's review marked the change as too complex to build in one go, so Michal split it into a GitHub issue with separate tickets.
The filter-count badge could ship first while the rest waits its turn. The credit for implementing the badge goes to software developer Kateryna Bobyr.
Listing screen. Before and After
1. Show how many filters are active
Problem: Users could not tell how many filters are active.
Decision: A filter-count badge on the filter control.
Evidence: Shipped and visible in production. Kateryna implemented the sollution on Hackathon Day 2.
2. An icon and behavior for the default Note listing
Problem: Search Icon links defaultly to Note listing page.
Decision: Michal proposed different icon, 4 squares for the default Note listing in the header.
Evidence: The new icon issue is listed in Github ask task.
Proposed Icon on final version
3. A cleaner listing page
Problem: Layout of the page was translated as flexbox from desktop version. Major part of the screen real estate was taken by buttons.
Decision: I proposed using a three way switch for a group of buttons for Mapa, Zoznam and Štatistika.
Evidence: Approved in the developer and PM review. Listed as Github issue
Note listing page iterations. Fourth screen marked as final.
4. Filtering Modal
Problem: Modal that opens after tapping on Filter button auto-closed after each action taken in it.
Decision: I proposed to use new layout of the modal, sync the dropdown behavior and make them searcheable. Michal reasoned for adding a Reset button next to Confirm, making the whole concept feaseable.
Evidence: Approved in the developer and PM review. Listed as task in Github issue.
Filtering Modal Before and After
Shipped
The filter-count badge, live on the portal.
Approved and handed over
The rest of the prototype passed the developer and PM review. It is split into tickets under GitHub issue slovensko-digital/ops-portal #171.
Not measured yet
There was no time for usability testing, so I cannot claim an effect on mobile filter use or confusion.
The badge is evidence of adoption, however, improvement on overall Note listing page can be measured after implementing the passed sollution.
What I learned first is how a design survives contact with engineering. The best prototype may be the one that can be split into shippable pieces. This experience changed how I thing about problem complexity in context of development in my future projects.
This was the first project where my decisions had to survive other people's input. Michal brought structure and priorities, Katerina turned a design into running code, and with Michal’s help, I owned the visual work and the reasoning.
Michal specifically changed how I looked on a problem with search icon routing into a page. Instead of proposing complicated logic change, he articulated the icon change that got approval.
