From Clutter to Clarity: Details revamp
Redesigned the Job Details page to reduce information overload and surface the right context at the right time.
Details page as a framework overgrew and become cluttered, and outdated. Every new feature was crammed in, amplifying chaos instead of clarity. Users were left frustrated, wasting time just to find what mattered.
We needed to reimagine the Job Details page not just for clarity, but for the future. By simplifying the framework and removing clutter, we created a foundation that could adapt dynamically and support AI-powered workflows
Preview
What prompted us to revamp details page?
All the data, none of the focus
The 3-pane layout crammed too much information together.
There was no clear hierarchy, forcing users to scan endlessly.
Mixpanel data showed users had to keep switching between pages to refer any associated details. This meant just to see status
Onboarding teams repeatedly highlighted that customers often described the first days of using the job details page as confusing and overly time-intensive.
The Job Details page wasn’t just overloaded with core features. It also became the place where custom requests (like sending job updates to HubSpot) were added. These often took the form of ad-hoc buttons and controls that broke our design language.
This made it clear that we didn’t just need a redesign for today’s problems, but a fresh, scalable framework
Finding the Friction: A Visual Audit of Cognitive Load
How does this make users feel?
Overwhelmed
The Job Details page demanded more effort than it gave back.
Users had to spend extra hours each week just keeping up with what was happening on their jobs. What should have been one quick glance often turned into minutes of scanning across panes, tabs, and buttons.
Managers and Back-office users we spoke with shared stories of the their frustrations navigating throughout the page to find out What’s the current status? What checklist is pending? Which service task is remaining? Where's that inspection form? - questions that demanded too much effort to answer.
What can we do?
Our findings showed the page created clutter and cognitive load. The solution had to reduce noise, surface only what’s relevant, and save time while staying intuitive, adaptive, and scalable.
So we focused on three things
Cut down noise
Highlight essentials, subdue others
Drive context with hierarchy
Reduce time spent navigating
Scalability & Future-Proofing
Create a versatile framework
Information Architecture
Exploring how information is distributed and hierarchy is established.
New mental model
We aimed at a simpler mental model that would solve how humans interact with the page in a framework level.
Prototyping
We quickly built usable prototypes exploring divergent design directions. These provided multiple frames of reference that could be validated with users and internal teams, helping us narrow down to the most effective solution
Launch
Outcome
Next steps
We’ve successfully created a new framework that already makes a clear difference in usability and scalability. The next step is to conduct user interviews to validate impact in real-world scenarios and, in parallel, adapt this framework across other modules to bring consistency and clarity throughout the platform
Thank you for your curiosity
Feel free to reach out to me to explore opportunities, seek design advice, or just say hello
Copy my email