REIMAGINING AND OPTIMISING THE DESIGN FOR XELERON COCKPIT'S PORTFOLIO MANAGEMENT TOOL
Product design
UX` design
UX strategy
B2B Enterprise software
Overview
Xeleron Cockpit, a startup with a tested MVP, recognized the need to enhance product experience and unify the user journey as their customer base expanded.
I led cross functional teams to brainstorm and formulate solutions that suit our needs. Collaborated with produt managers, business units, and engineering teams to develop practical and scalable design solutions. Which led to the following impact.
43% decrease in rage clicks with the updated designs.
18% Decrease in error rates since the new design launch.
03+ New onboarded clients with successful onboarding on the tool.
Discovery and research
The UX audit of the existing tool uncovered several critical challenges that were deeply embedded within the product experience. Many of these issues had gone unnoticed over time, largely because users had adapted to the tool’s limitations.
However, this familiarity also meant that any redesign or improvement would represent a significant shift. Introducing changes required a thoughtful approach to ensure that enhancements improved usability without disrupting the workflows of long-time users.
lack of essential information, missing breadcrumbs, and page titles
Unclear information hierarchy
Component inconsistencies
The guidelines for component usage were missing, which acted like a breeding ground for inconsistancy
Dead ends
We found multiple flows leading to a dead end with now way for a user to return back
UX pattern inconsistencies
across multiple actions and flows. The same journey contained multiple patterns for the same processes.
KEY AUDIT INSIGHTS
Audit screenshots @xelerocockpit
Our job was not to just follow the tasks but instead to listen in between the tasks.
40+
Interviews and usability testing sessions
10+
Working sessions with differenet stakeholders
We conducted over in-depth sessions with program managers, engineers, scrum masters, and senior executives. These conversations often went beyond standard interviews, revealing deep user frustration and creative workarounds. Many participants shared that they maintained parallel Excel systems due to a lack of trust in the platform. One user described their experience as "searching for a needle in a haystack, while the haystack is on fire"—a vivid reflection of the cognitive load the tool imposed.
End to end product workflow
Phase 1 - Discovery
Xeleron cockpit 2022
User journey map
Phase 1 - Discovery
Xeleron cockpit 2022
Reflection
PERSONAS
Portfolio Users
Product managers, team leads, designers, and engineers
Portfolio Manager
Directors, key leaders
Admin
IT Operations teams, portfolio owners, Directors
Reflecting on our process, we started by immersing ourselves in the tool to understand its depth and the complexity of its user journeys. Defining specialised personas helped us uncover user priorities and pinpoint the most frequent tasks, laying the groundwork for a more intuitive information hierarchy. With these insights, we mapped role-based workflows to ensure the user experience aligned with real-world usage and expectations.
APPROACH
Understand the user flow
First, we concentrated on gaining an in-depth understanding of the tool and its functions.
Define hierarchy
We needed to understand user priorities and identify the most common tasks they would perform in the tool to lay a strong foundation for information hierarchy in the tool
Map key flows
After that we detailed key flows to map the user journey while performing various actions
Setting a foundation for a scalable future.
To lay a strong foundation for the tool, we focused on establishing clear semantics, intuitive affordances, and behavior design patterns that align with how users naturally think and act. Every interaction was crafted to reduce cognitive load and support decision-making at a glance. By grounding the experience in meaningful hierarchies and mental models, we ensured that the interface not only looked clean but also felt purposeful, predictable, and scalable for complex workflows.
Navigation and layout design explorations
Phase 2 - Ideation
Xeleron cockpit 2022
Journey Map - Low fidelity wires
Phase 2 - Ideation
Xeleron cockpit 2022
Outcome
Loved by stakeholders
The stakeholders and business units unanimously agreed to proceed with the suggested designs.
Ease of navigation
Switching to a sidebar navigation made all the tool's features accessible, with clear indications of their capabilities.
Scalable Solutions
As the tool grows and functionality increases, the new designs will easily accommodate additional features.
Learning
Technology is not so kind
We were able to define a new color palette with the team, but due to the effort behind moving to a new design library, we stuck to the original semantic design system.
Focus on standardizing interaction patterns and components
We focused on defining a better design system using the existing semantic component library. Making sure that the component patters were consistent across the tool in the new design.
Frozen designs: High fidelity screens
Phase 3 - Execution
Xeleron cockpit 2022
Final Designs: Key user flows
#Dashboard
Capabilities
Dashboard is one of the most used functions of the tool as it facilitates managing workitems and tracking them across different phases.
Create and manage phases
Users could track and manage their workitems (epics and features) across each phase. The dashboard supports moving the work items from one phase to another.
Manage and track items concerning each phase
As each phase is configured based on the business needs , the dashboard allows users to track information across each phases and across the parent strategic goal.
#Dasboard final design
#Workitem anatomy
RoadMap
An essential feature to perceive complex pieces of information with ease, while navigating and tracking the organization's progress across hundreds of teams.
Frozen designs: High fidelity screens - Roadmap
Capabilities
Manage/Track PIs
Users could track and manage their workitems (epics and features) across each phase. The dashboard supports moving the work items from one phase to another.
Manage portfolio level milestones and work items
As each phase is configured based on the business needs , the dashboard allows users to track information across each phases and across the parent strategic goal.
Create Dependencies for each blocked item
Phase 3 - Execution
Xeleron cockpit 2022
Prioritization
The tools USP that enables organizations to prioritize their work based on standard and custom formula. This screen
Capabilities
Prioritise items and Goals
Capability to prioritize countless work items.
Auto Calculation
Prioritization enables organizations to auto-calculate their work item priorities based on their custom formulas
Adding items to the roadmap
Based on the priorities, users can add their epics and features to roadmap directly from prioritization.
The tools USP was the capability to help users prioritize their work item by ranking them based on predefined(but customizable) formula in the tool.
An option to add the linked workitems to the Roadmap directly from prioritization screen was a big help for the users
Nobody likes a horizontal scroll, to give user more control over the horizontal space we put collapsable table columns in place.
Some of our biggest wins showed up in behavior. Teams started using the platform as a source of truth instead of a place to extract data for workarounds. People began trusting the tool enough to plan futures in it. That shift from compliance to confidence is the true success of UX.
For me, this project was a reminder that good design doesn’t shout. It listens, simplifies without stripping, and always honors the complexity of its users' work.
But what makes our success tangible?
Xeleron cockpit onboarded 03 new clients within four months of the tools' redesign and was able to capture feedback from the users. The most common feedback we received was that the tool did not overwhelm the users. This was in line with our initial research insight, where the users found the project management tools in the market very overwhelming and cognitively heavy.
We faced multiple challenges along the way, lack of early user testing led them to create a product that was built around features. We had to make assumptions to move swiftly without losing traction, it required rigorous feedback multiple rounds of ideation to finalise each screen.
I very strongly believe that good is design is always a byproduct of good research and discovery, and ignoring that creates a unstable foundation for the products, especially the ones that need scaling. While we did not had strong data to start with, we compensated for it by continuous iteration and usability testing with early users. It helped us reach our destination all we needed was a little bit of struggle, stamina, and surrender.
Design lead
Product design
User research
Other snapshots And visualizations
Showcasing additional finalised designs and interface directions created throughout the process. These screens reflect iterative thinking, evolving interaction patterns, and alternative layouts that informed key decisions. Each screen represents a moment of inquiry,testing visual hierarchy, refining microinteractions, and evaluating affordances in context.
Shivansh.
Shivansh Verma 2025
Process
Bored? hear me instead
Research
Outcome
Learnings