Redesigning Resource Flow for Better Usability
The Problem
The “Add Resource” workflow in a project management tool needed a significant redesign to improve usability and reduce cognitive load. The earlier interface used a wide horizontal layout to list resources, making it difficult to view, input, and compare data—especially as the number of resources grew.
Role
Sole Designer working on the project - created a solution for the complete workflow as well as the complete UI for it
Tools
Figma was used for wireframing and creating the high-fidelity designs.
Client
Timeline
Goals for the Redesign
- Eliminate horizontal scrolling and create a more intuitive layout.
- Improve data readability and hierarchy for better decision-making.
- Enhance user interaction through better UI microinteractions like hover states.
- Retain key metrics (summations/totals) in locations familiar to users.
- Provide a smoother path for adding people to each resource using a calculator-based flow.
The Solution
After understanding the problem statements, talking with stakeholders and using the goals defined in the process as an anchor I came up with additonal features and layout changes to improve the workflow usability, functionality and aesthetics
Vertical Stack Redesign
Transformed the workflow from horizontal to vertical, where each added resource appears as an expandable section, allowing users to focus on one resource at a time.
Fixed Key Columns
Key metrics and columns were moved to the right and made sticky, ensuring users always have visibility of critical data.
Summation Layout Experiments
Initially explored a split column layout with resource details on the left and summaries on the right. However, based on usability feedback, we reverted to the original bottom-positioning of totals to respect users' familiarity with the tool.
Hover States
Less critical information was tucked into intuitive hover states, providing a cleaner UI while still making all information accessible on demand.
Calculator Popup Flow
Introduced a calculator-style popup that allows users to add people to each resource. The flow supports both assigning to existing phases or creating a new phase entirely, giving flexibility in planning.
Plan Calculator Flow
Design Highlights
- Clean, modular vertical layout with improved visual hierarchy.
- Expandable sections for each resource, enhancing focus and editability.
- Hover interactions that simplify complexity and provide visual cues.
- Calculator popup for quick assignment of personnel with conditional branching.
- UI consistency and enhanced legibility through spacing and sectioning.
Impact
Users reported a significant improvement in the overall experience of adding new resources.
The layout changes also reduced errors during resource addition and made the process faster and more intuitive.
Stakeholders praised the functional clarity and visual refinement of the new interface.
