Maximo eLearning
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
2 years
Years
2024 - 2026
My Role
Visual & 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
User Research
National Grid technical teams struggle to manage complex portfolios because critical investment data is scattered across multiple slow legacy platforms. This fragmentation causes severe operational friction.
…consolidate scattered project and investment data into a single high speed interface to eliminate workflow bottlenecks for technical teams?
…optimise the data retrieval experience so users can access vital portfolio information instantly without relying on slow external databases?
The Solution
Screens
Portfolio Manager is an application with over 3 years of design and development, so all screens are not presented here.
Investments List View
A central data table for all active investments, allowing users to search, filter, and save custom column layouts.
Edit Mode
Projects List View
Similar to Investments List; a streamlined project database with quick search and filtering tools to help users isolate exact details.
Investment Filters
Filters allow users to show only relevant fields. This is important with 50+ fields, & most new features being new field additions.
Feature Highlight
Investment Details Page
This page allows users to see all details related to an investment or project in one place.
Open Section
One-Pager
Users can edit all relevant investment information in one place and also export it as a pdf. Designed for live editing during daily stand-ups.
Edit Mode
Change Request Flow
A secure approval pipeline ensuring data modifications are reviewed and authorised before updating the central database.
Feature Highlight
The One-Pager Redesign
To demonstrate how our team operated within an agile workflow, let's look at the evolution of the One-Pager. As we added more custom fields at the client's request, the standard detail pages became complex. The initial PRM page, later renamed the One-Pager, naturally evolved into a tool teams used to organise live meetings and update fields on the fly. Instead of forcing users into a rigid predefined path, we embraced this emergent behaviour to fulfil a real user need.
As the product matured, the One-Pager became overstuffed with content. This introduced significant friction for technical users. Finding specific fields during a fast paced stand up meeting became unnecessarily complex and visually overwhelming.
Breakup the content fields across the various sections to make navigation easier.
Speak with clients and representatives of the different personas to understand how the fields are being used to help break them into sections in a way that made sense for clients, and to understand any other points of friction.
Learnings from User Research
Direct conversations with clients and representatives of different user personas revealed exactly how and where specific fields should be grouped into new sections.
Users required a dedicated space to quickly note next steps during meetings.
Teams naturally adapted the One-Pager as a convenient tool to organise live meetings, with the most important section being the “Gates” field.
No users utilized the finance table on the One-Pager as they had a different tool for it.
One-Pager Redesign
Old Design
New Design
Retrospective
Embracing Emergent Behaviour
It was eye-opening to see how teams naturally repurposed the One-Pager to run their live meetings. Instead of forcing them into a rigid workflow, leaning into what they were already doing helped us design a tool that actually fit their daily routine.
Designing for Scale
Handling constant feature requests and adding over 50 custom fields taught me a lot about managing complexity. When a page gets that heavy, modular design is essential. Breaking the data into distinct sections and adding strong filters kept the interface from feeling overwhelming.
Fast Iteration as a Solo Designer
Being the only UX designer working closely with a team of developers meant communication was everything. Our agile setup required us to move quickly, and staying constantly aligned made sure we could integrate complex new fields without sacrificing usability or missing tight deadlines.