Report Pages Redesign
A redesign of ecoPortal's main reporting feature, built to support complex workflows across teams.
Company
ecoPortal
My role
Product designer
Tools
Figma, Maze and Claude Code
Context and process
Pages is ecoPortal's core feature for creating and submitting safety reports. On mobile, the experience had grown fragmented, inconsistent field patterns, no clear error recovery, and a header that worked against users in the field.
Aligning on assumptions
Cross-functional sessions with the product and customer service teams mapped out what was broken, what users were likely struggling with, and where the biggest opportunities sat, before any design work began.
Validating with real users
Interviews with field workers and site managers stress-tested those assumptions, surfaced blockers that hadn't been anticipated, and shaped the workflow logic that guided the final design.
Design in conversation
Screens were built and iterated alongside team feedback. Claude Code enabled rapid prototyping of interaction ideas, cutting the gap between concept and something testable.
Design question
How might we make safety report creation feel as natural on mobile as it does at a desk, while respecting the field worker's context?
Before and after
What changed and why
Highlighting the main design changes and reasons why
Context without cost
The header was redesigned to show progress and stage context clearly, then collapse into a slim persistent bar on scroll, keeping critical context visible without eating screen real estate while filling fields.
Distinct inputs for distinct interactions
Text, date, selection, and multi-value fields were given differentiated visual treatments so the affordance, what to do, is clear before a user taps anything.
Responsive, not just scaled
Rather than stretching the mobile layout to fit tablet screens, a distinct two-column arrangement and sticky-condensed header behavior were designed for the wider canvas.