Searching and Filtering
Rethinking how users find reports, tasks, and actions on mobile, combining keyword search, AI-powered natural language understanding, and multi-layered filtering in a single experience.
Company
ecoPortal
My role
Product designer
Tools
Figma, Maze and Claude Code
Context and process
Finding content in ecoPortal's mobile app meant navigating through separate lists across different sections of the product. There was no unified search. Users working in the field looking for a specific incident report, a task assigned to them, or a compliance checklist, had no fast path to get there. The project started from a simple brief: build search, and make it good enough to become one of the main navigation entry points in the app.
Understanding how users actually look for things
Before designing a single screen, the project started by mapping how different user types retrieve content, whether by memory of a title, by ownership, by date, or by type. That mental model shaped the entire information architecture of the search experience.
Term, short query or full sentence
Early on it became clear that typing "Incident" and typing "Show me the latest incident reports I filed this week" are fundamentally different interactions. Both needed to work, one through fast keyword matching, the other through AI interpretation.
A screen that works before you type
The empty state was treated as a design problem, not a blank canvas. Saved searches, recently opened items, quick shortcuts, and recent search history all surface on load, so the search screen becomes a useful navigation hub even without any input.
Key decisions
Results grouped by content type
Search results are organised into sections: Pages, Actions, and other content types. Rather than one flat list, grouping lets users scan by the category they care about and quickly jump to "see all" for a specific type without losing the broader context of what matched.
Skeleton loading as a trust signal
The loading state uses skeleton cards that match the shape of real results rather than a generic spinner. In a safety context where users depend on the app during incidents, communicating that the system is working reduces uncertainty.
Rich result cards that reduce need to open
Each result card surfaces enough context, category, location, assignee, date, stage, that users can often confirm they found the right item without opening it, reducing navigation depth for users scanning through multiple results.