PRIVATE CONTENT
Client:
CenterPoint Energy
Duration:
3 months
UX Research
UX Research
UX Research
IA
IA
IA
Buisness Architecture
Buisness Architecture
Buisness Architecture
Faster Flow
Faster Flow
Faster Flow
Faster Flow
Less Human Error
Less Human Error
Less Human Error
Less Human Error
Increased Work Load
Increased Work Load
Increased Work Load
Increased Work Load
Details
Details
Details
Details
Problem Statement:
The Asset Investment Strategy system had an outdated flow to add or remove questions for each template. The biggest issue with the picklist was the size of options made it scrollable to multiple viewports.
Goal:
To add a functional and user-friendly approach to an add and remove functionality while integrating the details page.
Target Audience:
Project managers who need to implement templates for optimization
Before and After
Before and After
Before and After
Before and After
The initial UI had some serious issues, but the biggest were the following:
The picklist would generate all plausible questions and thus would become scrollable across multiple viewports. This put the control CTA's in the center and hard for the user to find.
There was no way to sort the questions or do a proper search to help the user navigate to their preferred questions.
Initital Interview
Type:
Project Managers
Context:
Discussing the challenges of managing templates and the question management.
Role:
Project manager managing templates for the AIS
Initital Interview
Type:
Project Managers
Context:
Discussing the challenges of managing templates and the question management.
Role:
Project manager managing templates for the AIS
Initital Interview
Type:
Project Managers
Context:
Discussing the challenges of managing templates and the question management.
Role:
Project manager managing templates for the AIS
Initital Interview
Type:
Project Managers
Context:
Discussing the challenges of managing templates and the question management.
Role:
Project manager managing templates for the AIS
Key Takeaways
Key Takeaways
Key Takeaways
Key Takeaways
Testing Painpoints
The user would try to drag the selections when the CTA's were not visible
Find a way to help sort the questions
Users couldn't find details for the templates
User Interview
Workflow is extended by scrolling
User wants a data table like experience
Template Question Picklist – Drag & Drop Interaction Wireframe
This interface allows users to quickly build custom templates by selecting and dragging predefined questions into a template workspace. These templates are later used to evaluate project and program proposals based on their alignment with company goals.
🎯 Purpose
Designed for internal stakeholders (e.g., strategy, operations, planning teams), this tool simplifies the process of assembling evaluation forms for proposals. It ensures consistency while still allowing flexibility based on the department or project type.
🧠 Design Features
Left panel: A searchable list of available questions, filterable by keyword
Drag-and-drop support: Users can select multiple questions and drag them into the right panel to create a custom template
Visual feedback: Selected questions are highlighted with checkmarks and hover states for clear visibility
Drop zone: The right panel clearly indicates where questions can be dropped, reducing ambiguity
🗣️ Feedback
✅ “Makes it so much faster to build these compared to the old dropdown method.”
✅ “Love that I can drag multiple questions at once instead of doing them one at a time.”
🛠️ “Would be helpful to preview the full question text on hover before dragging.”
Template Question Picklist – Drag & Drop Interaction Wireframe
This interface allows users to quickly build custom templates by selecting and dragging predefined questions into a template workspace. These templates are later used to evaluate project and program proposals based on their alignment with company goals.
🎯 Purpose
Designed for internal stakeholders (e.g., strategy, operations, planning teams), this tool simplifies the process of assembling evaluation forms for proposals. It ensures consistency while still allowing flexibility based on the department or project type.
🧠 Design Features
Left panel: A searchable list of available questions, filterable by keyword
Drag-and-drop support: Users can select multiple questions and drag them into the right panel to create a custom template
Visual feedback: Selected questions are highlighted with checkmarks and hover states for clear visibility
Drop zone: The right panel clearly indicates where questions can be dropped, reducing ambiguity
🗣️ Feedback
✅ “Makes it so much faster to build these compared to the old dropdown method.”
✅ “Love that I can drag multiple questions at once instead of doing them one at a time.”
🛠️ “Would be helpful to preview the full question text on hover before dragging.”
Template Question Picklist – Drag & Drop Interaction Wireframe
This interface allows users to quickly build custom templates by selecting and dragging predefined questions into a template workspace. These templates are later used to evaluate project and program proposals based on their alignment with company goals.
🎯 Purpose
Designed for internal stakeholders (e.g., strategy, operations, planning teams), this tool simplifies the process of assembling evaluation forms for proposals. It ensures consistency while still allowing flexibility based on the department or project type.
🧠 Design Features
Left panel: A searchable list of available questions, filterable by keyword
Drag-and-drop support: Users can select multiple questions and drag them into the right panel to create a custom template
Visual feedback: Selected questions are highlighted with checkmarks and hover states for clear visibility
Drop zone: The right panel clearly indicates where questions can be dropped, reducing ambiguity
🗣️ Feedback
✅ “Makes it so much faster to build these compared to the old dropdown method.”
✅ “Love that I can drag multiple questions at once instead of doing them one at a time.”
🛠️ “Would be helpful to preview the full question text on hover before dragging.”
Template Question Picklist – Drag & Drop Interaction Wireframe
This interface allows users to quickly build custom templates by selecting and dragging predefined questions into a template workspace. These templates are later used to evaluate project and program proposals based on their alignment with company goals.
🎯 Purpose
Designed for internal stakeholders (e.g., strategy, operations, planning teams), this tool simplifies the process of assembling evaluation forms for proposals. It ensures consistency while still allowing flexibility based on the department or project type.
🧠 Design Features
Left panel: A searchable list of available questions, filterable by keyword
Drag-and-drop support: Users can select multiple questions and drag them into the right panel to create a custom template
Visual feedback: Selected questions are highlighted with checkmarks and hover states for clear visibility
Drop zone: The right panel clearly indicates where questions can be dropped, reducing ambiguity
🗣️ Feedback
✅ “Makes it so much faster to build these compared to the old dropdown method.”
✅ “Love that I can drag multiple questions at once instead of doing them one at a time.”
🛠️ “Would be helpful to preview the full question text on hover before dragging.”
Template Question Table – Row Selection & Sorting
This screen provides a tabular view of available questions that users can select to include in a template. Each row represents a question or functional unit, categorized by its hierarchy level, allowing users to quickly assemble evaluation templates based on organizational structure.
🎯 Purpose
This tool was designed for strategic teams building custom scoring templates to evaluate project and program proposals. Each selected row contributes to how proposals are assessed across different functional areas, portfolios, or business units.
🧠 Design Features
Selectable rows: Each row includes a checkbox, enabling multi-select interactions to streamline the process of adding multiple items
Hierarchy Level column: Provides context about each question’s classification (e.g., Functional Area, Organization Name)
Sortable headers: Users can click on column headers (e.g., Name or Hierarchy Level) to quickly reorganize and find specific entries
Expandable sections: Categories like “Questions” and “Details” are collapsible to reduce visual noise and focus on what’s important
🗣️ Feedback
✅ “Makes it easier to bulk select questions that match our team’s structure.”
✅ “Being able to sort by hierarchy level is a big win for large organizations like ours.”
🛠️ “Could we eventually add a filter or search bar to narrow by keywords or tags?”
Template Question Table – Row Selection & Sorting
This screen provides a tabular view of available questions that users can select to include in a template. Each row represents a question or functional unit, categorized by its hierarchy level, allowing users to quickly assemble evaluation templates based on organizational structure.
🎯 Purpose
This tool was designed for strategic teams building custom scoring templates to evaluate project and program proposals. Each selected row contributes to how proposals are assessed across different functional areas, portfolios, or business units.
🧠 Design Features
Selectable rows: Each row includes a checkbox, enabling multi-select interactions to streamline the process of adding multiple items
Hierarchy Level column: Provides context about each question’s classification (e.g., Functional Area, Organization Name)
Sortable headers: Users can click on column headers (e.g., Name or Hierarchy Level) to quickly reorganize and find specific entries
Expandable sections: Categories like “Questions” and “Details” are collapsible to reduce visual noise and focus on what’s important
🗣️ Feedback
✅ “Makes it easier to bulk select questions that match our team’s structure.”
✅ “Being able to sort by hierarchy level is a big win for large organizations like ours.”
🛠️ “Could we eventually add a filter or search bar to narrow by keywords or tags?”
Template Question Table – Row Selection & Sorting
This screen provides a tabular view of available questions that users can select to include in a template. Each row represents a question or functional unit, categorized by its hierarchy level, allowing users to quickly assemble evaluation templates based on organizational structure.
🎯 Purpose
This tool was designed for strategic teams building custom scoring templates to evaluate project and program proposals. Each selected row contributes to how proposals are assessed across different functional areas, portfolios, or business units.
🧠 Design Features
Selectable rows: Each row includes a checkbox, enabling multi-select interactions to streamline the process of adding multiple items
Hierarchy Level column: Provides context about each question’s classification (e.g., Functional Area, Organization Name)
Sortable headers: Users can click on column headers (e.g., Name or Hierarchy Level) to quickly reorganize and find specific entries
Expandable sections: Categories like “Questions” and “Details” are collapsible to reduce visual noise and focus on what’s important
🗣️ Feedback
✅ “Makes it easier to bulk select questions that match our team’s structure.”
✅ “Being able to sort by hierarchy level is a big win for large organizations like ours.”
🛠️ “Could we eventually add a filter or search bar to narrow by keywords or tags?”
Template Question Table – Row Selection & Sorting
This screen provides a tabular view of available questions that users can select to include in a template. Each row represents a question or functional unit, categorized by its hierarchy level, allowing users to quickly assemble evaluation templates based on organizational structure.
🎯 Purpose
This tool was designed for strategic teams building custom scoring templates to evaluate project and program proposals. Each selected row contributes to how proposals are assessed across different functional areas, portfolios, or business units.
🧠 Design Features
Selectable rows: Each row includes a checkbox, enabling multi-select interactions to streamline the process of adding multiple items
Hierarchy Level column: Provides context about each question’s classification (e.g., Functional Area, Organization Name)
Sortable headers: Users can click on column headers (e.g., Name or Hierarchy Level) to quickly reorganize and find specific entries
Expandable sections: Categories like “Questions” and “Details” are collapsible to reduce visual noise and focus on what’s important
🗣️ Feedback
✅ “Makes it easier to bulk select questions that match our team’s structure.”
✅ “Being able to sort by hierarchy level is a big win for large organizations like ours.”
🛠️ “Could we eventually add a filter or search bar to narrow by keywords or tags?”
Draggable Card View – Question Management for Templates
This evolved version of the picklist introduces a draggable, card-based interface to manage and organize questions within a scoring template. Each card represents a unique evaluation prompt that can be reordered, removed, or added from a structured list below.
🎯 Purpose
To give users full control over template customization in a way that is both visual and tactile, enabling them to:
See each question’s content and format at a glance
Easily reorder questions via drag-and-drop
Add selected rows from the lower table directly into the card layout
This hybrid view bridges the gap between table-based precision and card-based flexibility.
💡 Design Features
Drag-and-drop cards: Users can manually arrange the sequence of questions to reflect their preferred order of evaluation
Card type indicators (e.g., Narrative, Multiple Choice) for quick scanning
Batch actions from the lower table: multiple selections can be added at once
Real-time feedback: hovering shows a visual drop zone with text like “Move questions” to confirm action intent
🗣️ Feedback
✅ “The cards give me better visibility into the actual content — this is much easier to manage than a long list.”
✅ “I like being able to preview the question type before I add it.”
🛠️ “Would love to group or collapse cards by hierarchy level in the future.”
Draggable Card View – Question Management for Templates
This evolved version of the picklist introduces a draggable, card-based interface to manage and organize questions within a scoring template. Each card represents a unique evaluation prompt that can be reordered, removed, or added from a structured list below.
🎯 Purpose
To give users full control over template customization in a way that is both visual and tactile, enabling them to:
See each question’s content and format at a glance
Easily reorder questions via drag-and-drop
Add selected rows from the lower table directly into the card layout
This hybrid view bridges the gap between table-based precision and card-based flexibility.
💡 Design Features
Drag-and-drop cards: Users can manually arrange the sequence of questions to reflect their preferred order of evaluation
Card type indicators (e.g., Narrative, Multiple Choice) for quick scanning
Batch actions from the lower table: multiple selections can be added at once
Real-time feedback: hovering shows a visual drop zone with text like “Move questions” to confirm action intent
🗣️ Feedback
✅ “The cards give me better visibility into the actual content — this is much easier to manage than a long list.”
✅ “I like being able to preview the question type before I add it.”
🛠️ “Would love to group or collapse cards by hierarchy level in the future.”
Draggable Card View – Question Management for Templates
This evolved version of the picklist introduces a draggable, card-based interface to manage and organize questions within a scoring template. Each card represents a unique evaluation prompt that can be reordered, removed, or added from a structured list below.
🎯 Purpose
To give users full control over template customization in a way that is both visual and tactile, enabling them to:
See each question’s content and format at a glance
Easily reorder questions via drag-and-drop
Add selected rows from the lower table directly into the card layout
This hybrid view bridges the gap between table-based precision and card-based flexibility.
💡 Design Features
Drag-and-drop cards: Users can manually arrange the sequence of questions to reflect their preferred order of evaluation
Card type indicators (e.g., Narrative, Multiple Choice) for quick scanning
Batch actions from the lower table: multiple selections can be added at once
Real-time feedback: hovering shows a visual drop zone with text like “Move questions” to confirm action intent
🗣️ Feedback
✅ “The cards give me better visibility into the actual content — this is much easier to manage than a long list.”
✅ “I like being able to preview the question type before I add it.”
🛠️ “Would love to group or collapse cards by hierarchy level in the future.”
Draggable Card View – Question Management for Templates
This evolved version of the picklist introduces a draggable, card-based interface to manage and organize questions within a scoring template. Each card represents a unique evaluation prompt that can be reordered, removed, or added from a structured list below.
🎯 Purpose
To give users full control over template customization in a way that is both visual and tactile, enabling them to:
See each question’s content and format at a glance
Easily reorder questions via drag-and-drop
Add selected rows from the lower table directly into the card layout
This hybrid view bridges the gap between table-based precision and card-based flexibility.
💡 Design Features
Drag-and-drop cards: Users can manually arrange the sequence of questions to reflect their preferred order of evaluation
Card type indicators (e.g., Narrative, Multiple Choice) for quick scanning
Batch actions from the lower table: multiple selections can be added at once
Real-time feedback: hovering shows a visual drop zone with text like “Move questions” to confirm action intent
🗣️ Feedback
✅ “The cards give me better visibility into the actual content — this is much easier to manage than a long list.”
✅ “I like being able to preview the question type before I add it.”
🛠️ “Would love to group or collapse cards by hierarchy level in the future.”
Manual Sorting with Input Controls – Template Question Organizer
This iteration of the question management interface introduces manual sorting controls that let users directly set the position of a question within the template using numeric inputs.
🎯 Purpose
While drag-and-drop was useful for quick adjustments, it became inefficient with large sets of questions. This enhancement allows for precise reordering, especially when creating long, structured templates across departments or business units.
💡 Design Features
Numeric input fields appear upon clicking the “Order” option on a question card
Users can assign a specific position number to a question (e.g., “Position 2”), and the system will automatically reorder the cards accordingly
Additional card actions include Edit and Remove, giving users full control over template contents from a single interface
Visual feedback ensures the order change is clear before the user clicks “Save”
🗂️ Use Case Benefits
Streamlines workflows for power users managing complex scoring frameworks
Enables faster setup when adding multiple questions at once
Reduces reliance on drag-and-drop for long lists where scrolling becomes cumbersome
🗣️ Feedback
✅ “Love being able to just type in the position instead of dragging through 20 questions.”
✅ “Feels more reliable — I know exactly where something will go.”
🛠️ “Could be helpful to auto-adjust the positions of other cards dynamically as I type.”
Manual Sorting with Input Controls – Template Question Organizer
This iteration of the question management interface introduces manual sorting controls that let users directly set the position of a question within the template using numeric inputs.
🎯 Purpose
While drag-and-drop was useful for quick adjustments, it became inefficient with large sets of questions. This enhancement allows for precise reordering, especially when creating long, structured templates across departments or business units.
💡 Design Features
Numeric input fields appear upon clicking the “Order” option on a question card
Users can assign a specific position number to a question (e.g., “Position 2”), and the system will automatically reorder the cards accordingly
Additional card actions include Edit and Remove, giving users full control over template contents from a single interface
Visual feedback ensures the order change is clear before the user clicks “Save”
🗂️ Use Case Benefits
Streamlines workflows for power users managing complex scoring frameworks
Enables faster setup when adding multiple questions at once
Reduces reliance on drag-and-drop for long lists where scrolling becomes cumbersome
🗣️ Feedback
✅ “Love being able to just type in the position instead of dragging through 20 questions.”
✅ “Feels more reliable — I know exactly where something will go.”
🛠️ “Could be helpful to auto-adjust the positions of other cards dynamically as I type.”
Manual Sorting with Input Controls – Template Question Organizer
This iteration of the question management interface introduces manual sorting controls that let users directly set the position of a question within the template using numeric inputs.
🎯 Purpose
While drag-and-drop was useful for quick adjustments, it became inefficient with large sets of questions. This enhancement allows for precise reordering, especially when creating long, structured templates across departments or business units.
💡 Design Features
Numeric input fields appear upon clicking the “Order” option on a question card
Users can assign a specific position number to a question (e.g., “Position 2”), and the system will automatically reorder the cards accordingly
Additional card actions include Edit and Remove, giving users full control over template contents from a single interface
Visual feedback ensures the order change is clear before the user clicks “Save”
🗂️ Use Case Benefits
Streamlines workflows for power users managing complex scoring frameworks
Enables faster setup when adding multiple questions at once
Reduces reliance on drag-and-drop for long lists where scrolling becomes cumbersome
🗣️ Feedback
✅ “Love being able to just type in the position instead of dragging through 20 questions.”
✅ “Feels more reliable — I know exactly where something will go.”
🛠️ “Could be helpful to auto-adjust the positions of other cards dynamically as I type.”
Manual Sorting with Input Controls – Template Question Organizer
This iteration of the question management interface introduces manual sorting controls that let users directly set the position of a question within the template using numeric inputs.
🎯 Purpose
While drag-and-drop was useful for quick adjustments, it became inefficient with large sets of questions. This enhancement allows for precise reordering, especially when creating long, structured templates across departments or business units.
💡 Design Features
Numeric input fields appear upon clicking the “Order” option on a question card
Users can assign a specific position number to a question (e.g., “Position 2”), and the system will automatically reorder the cards accordingly
Additional card actions include Edit and Remove, giving users full control over template contents from a single interface
Visual feedback ensures the order change is clear before the user clicks “Save”
🗂️ Use Case Benefits
Streamlines workflows for power users managing complex scoring frameworks
Enables faster setup when adding multiple questions at once
Reduces reliance on drag-and-drop for long lists where scrolling becomes cumbersome
🗣️ Feedback
✅ “Love being able to just type in the position instead of dragging through 20 questions.”
✅ “Feels more reliable — I know exactly where something will go.”
🛠️ “Could be helpful to auto-adjust the positions of other cards dynamically as I type.”
Other Projects
Other Projects
Other Projects
Other Projects
© 2025. All rights Reserved.
© 2025. All rights Reserved.
© 2025. All rights Reserved.
© 2025. All rights Reserved.