Search builder
A component revamp for the legal-solutions eDiscovery content management service — giving users the grouped, nested searches they’d been asking for.
- Company
- Epiq · Legal solutions
- DURATION
- 2 months
- Team
- Remote, two time zones
- Product
- Epiq Discovery
Users outgrew the basics
Epiq’s legal solutions unit provides SaaS products for eDiscovery in litigation and investigations involving electronically stored information. Epiq Discovery is the main product, and it’s where the search builder lives.
Once base functionality was in place, users started asking to group searches with parentheses. The existing feature didn’t allow grouped nesting or drag and drop.
The search builder only supported basic searches, so users couldn’t build the grouped, nested queries their legal work needed.
Why does the search builder seem limiting to users?
Understand before designing
Organize thoughts
I broke the medium-to-large user story into requirements, categorized persona needs, and noted past efforts, articles and UI references.
Organize references
Sometimes the team had a specific interface for me to reference, so I gathered those alongside existing patterns.
Clarifying questions
How do we aim for minimum dev effort? Which existing components could we use? How far should I take my explorations?
Jamming with my co-designer and cross-functional team
Four themes came out of our jam sessions. They became our yardstick for every concept and guided the competitive analysis and layout proposals.
Competitive analysis
I gathered query-builder examples for inspiration to align with my team and see what they were open to exploring — one nested-group pattern quickly became the team favorite.
Layout proposals
I captured approach types broadly, then built lo-fi wireframes so the team focused on flow instead of styling details. Circling back, the themes pointed to one goal: enhance features.
Layout and styling first, then micro interactions
Layout & styling
- Moved from a detailed lo-fi wireframe to hi-fi.
- Compared a full-screen view against a popover with a query preview.
- Proposed moving action buttons from the bottom into the header.
Micro interactions
- Drag and drop a single criterion.
- Drag and drop a whole group of criteria.
- Action buttons that make building nested groups quick.
Balancing new ideas with dev effort
Refining layout
Feedback and urgent time constraints shaped the improvements. We balanced new and existing elements to reduce dev effort.
Refining interactions
We stayed close to the existing layout and displayed all operators (NOT, AND, OR) rather than tucking them into a dropdown.
Deliverables
Phase 1 shipped the default popover state. The query preview and full-screen view were planned as fast follows.
Also at Epiq
Log-ins, dashboards, content management and complex micro-interactions, all consistent with our design language system.
Epiq Notify
A net-new app with account management, built to leverage Epiq’s mass printing facility.
Court automation
A new application automating scripts for managing Chapter 11 bankruptcy court cases.
Epiq Discovery
A redesigned document list view with a bottom panel and various table view settings.
Keep communication open with developers — reducing dev effort can help drive prioritization.
Request more references and artifacts of data-driven feedback, not just team insight.