Portfolio Manager
National Grid manages vital internal investments and projects, but tracking data scattered across multiple platforms often hinders employee productivity. Portfolio Manager is a streamlined tool designed to eliminate this friction. By consolidating complex data into a fast, accessible interface, it ensures seamless feature integration, improves usability, and maintains strict alignment with the corporate design system. Led by a sole UX Designer collaborating with a team of developers within an agile workflow to manage and modernise an established three-year-old application.
Project Duration
3 months
Year
2026
My Role
UX Designer
Client
National Grid UK
Active Users
1700+
As the UX Designer for Portfolio Manager, I inherited and improved upon an enterprise application with over three years of existing architecture, previously worked on by another UX Designer. Operating within an agile workflow, I partnered with front end and back end developers to translate complex user requirements into a seamless, accessible product.
My key responsibilities included:
Delivering new layouts and interface designs in response to continuous feature requests, ranging from minor field additions to comprehensive page redesigns.
Target Users
Primary Users
Secondary Users
Extended Users
User Research
Najil
"I was hoping there was some digital support or some agent support or assistant support so that we don't have to depend upon another human to ask this question and wait for those answers."
Najil Kunnathur
Design Lead | IBM Consulting Advantage | Assets
"I use Claude or ChatGPT to navigate the Carbon Design System documentation more efficiently, especially when I need to find a specific component, pattern, or guideline within the extensive documentation.”
Kavitha V
Senior Designer | IBM Consulting Advantage
Kavitha
20%
Designers waste time searching for information.
Designers that use Carbon find the most challenging or time-consuming part of the process to be searching for information and documentation.
36%
Designers want conversational peer answers
Designers that use Carbon find the most challenging or time-consuming part of the process to be searching for information and documentation.
18%
Designers lack consistent design validation.
Designers that use Carbon find the most challenging or time-consuming part of the process to be searching for information and documentation.
Click
to view
Designers building with the IBM Carbon Design System lack a unified, instant way to find component guidance and validate their work, resulting in delayed project timelines and an over-reliance on manual peer support.
…bring Carbon documentation, Slack expertise, and component guidelines into a single, instantly accessible source of truth for designers?
…provide product teams with a consistent, reliable way to audit and validate their designs against Carbon standards before development?
The Solution
Carbonara - An Agent for Carbon
Carbonara is a grounded AI assistant built specifically for the IBM Carbon Design System. It delivers real-time, conversational expertise directly to designers. By providing instant component suggestions and automated compliance audits, Carbonara eliminates decision-making bottlenecks.
Click
to Play
See the
product
in action
for the old workflow
Asking questions on Slack Channels
Designers that use Carbon find the most challenging or time-consuming part of the process to be searching for information and documentation.
for the new workflow
Asking questions to Carbonara
Designers that use Carbon find the most challenging or time-consuming part of the process to be searching for information and documentation.
New
workflow
Old
workflow
Constraints
Agent Intelligence
Carbonara is powered by ICA, IBM’s internal AI tool. ICA often struggled to understand the vast amount of documentation and would hallucinate information.
Time Limit
Given the 2 week time limit for this hackathon, we did not have time for much user testing.
Lack of MCP Compatibility
The best version of Carbonara is connected to the Carbon MCP, but unfortunately ICA Agents cannot connect to MCP servers (for now).
Use Cases and Features
We wanted to keep the agent's focus on the things the users really needed, so we shaped our product's capabilities according to our user research.
Home Screen
Onboards designers with quick-start prompt examples to immediately demonstrate core capabilities.
Audit Designs
Evaluates uploaded screens for Carbon compliance and provides actionable fixes for layout, components, and accessibility.
Conversational Guidance
Answers general questions about the Carbon Design System instantly to unblock design momentum.
Component Advice
Suggests specific components or pattern combinations tailored to the designer's unique use case.
Sourced Answers
Builds trust by attaching direct links to the exact Carbon documentation pages used to generate the response.
Chat Management
Organizes multiple conversation threads and allows pinning of chats for long term projects.
Resource Hub
Centralizes links to official documentation and existing Slack channels for complex escalations.
Click to
view full
screen
Dev Tools
Bridges the gap between design and development by providing technical specs and code snippets when needed.
Token Tracking
Displays real-time API token usage to promote efficient prompting and resource management.
Tools Used
AI Agent
ICA 2.0
Front End
Figma + Figma Make
Vibe Coding
Claude
Debugging
ChatGPT
How does Carbonara work?
Carbonara started as just an assistant on ICA, before evolving through multiple iterations to a dedicated separate application.
Carbonara's brain is an Agent on ICA. The tool is connected using an API key to the ICA workspace. Claude was used to help vibe code the application, and Figma and Figma Make were used to create the frontend of Carbonara.
Future Development
Linked to Slack Channels & Other Forums
Linking Carbonara to Slack and online forums enables it to answer frequently asked questions.
Generate Custom Components
Carbonara can use GenAI to create mockups of custom components or prototypes for designers.
Future Development of Carbon Design
Frequent requests for new Carbon components show the Carbon Design team what to include in future updates.
Carbon MCP Integration
Integrating the Carbon MCP keeps Carbonara’s info updated. This isn’t currently possible as it is an Agent and not an Agentic App.
Retrospective
What went well
Maintained constant forward momentum as a team, even when facing project roadblocks.
Found immense value in cross-collaboration with the other designers.
Realized that having dedicated time to bounce ideas off peers leads to much stronger final concepts.
What surprised me
Observed that designers frequently cut corners, defaulting to familiar components rather than searching through documentation.
Realized that even the most comprehensive design system loses its value if it isn't effortless to navigate.
Learned that a design system's scale must be matched with extreme accessibility for users to actually use it properly.
Challenges and constraints
Struggled initially with the ICA platform's technical constraints and accuracy limitations.
Used these limitations as an opportunity to pivot, leading us to build a dedicated application with a custom UI for complex tasks like audit reports.
Gained a much deeper, practical understanding of how to work with and design for AI agents.
What I would do differently
Spend less time exploring alternate concepts during the initial discovery phase.
Be more decisive when working under tight project deadlines.
Focus on taking a "good" idea and refining it into something "amazing," rather than getting stuck trying to find the perfect initial concept.