Situation
Mesh-AI are a global consultancy that uses data, machine learning and AI, to accelerate business outcomes for it's clients. I joined a squad of data scientists, data engineers and other specialists a year into a project that intended to reimagine outage planning at National Grid Energy Transmission.
Outage planning is when a sub station is intentionally switched off to carry out essential works, to repair, maintain or upgrade the electricity network. Think of it as a planned power cut.
Problem
Outage planning suffered from a number of issues which negatively affected operational performance and profits. With this carried the threat of multi-million-pound fines from OFGEM, the energy regulator.
Goals
Visualise an outage plan.
Remove manual steps in the planning process.
Make recommendations when specific works can be carried out.
Streamline the process to use a single tool.
Enrich data to enable better decision-making on work items that can/cannot be taken in sequence.
Identify consequences in the plan to prevent regulatory fines.
My Role
Ran ideation sessions/workshops to solve problems, form research goals, and align all contributors.
UI design + prototyping with Figma.
Practiced and coached the squad on face-to-face, moderated usability testing, including capturing observations and actioning insights.
Building prototypes and validating functionality through usability testing was a big part of the role.
Complication
The project was riddled with complexities and challenges throughout:
Lack of trust planners our target users were not engaged in this project. Some were concerned that AI would replace them.
Non-uniformity understanding how planners perform their roles — the different workflows and tools they used to achieve the same outcomes.
Intricacies of building an interactive Gantt chart in Figma.
Ways of Working data scientists and data engineers were not familiar with UX or product design practices.
Gantt chart being told this is what we should build from the outset.
Why a Gantt chart?
All planners used an Excel Gantt chart to perform their roles. They believed it was the best way to visualise an outage plan. Our research also suggested that a Gantt chart was the planners data visualisation of choice — enabling critical paths to be identified for what could/could not be completed in sequence.
Doom Scrolling
We were aware outages can last for as little as 30 minutes and in some cases stretch beyond 20 years. We imagined planners horizontally scrolling forever, and getting frustrated. We hadn't designed or built zoom in/out capability. Even if we had, the likely hood of doom scrolling was inevitable.
Outcome Expectation
If the web app at a minimum, failed to achieve parity with existing tools, planners would not use Pulse and were likely to stick with familiar tools to perform their roles. If this were the case, it would have been a major setback to the overall project.
Getting it right would enable more features to be built and other project goals realised — ultimately to enable AI integration. It also had the potential to save the client huge sums of money, especially fines imposed by OFGEM, which in some cases had exceeded £100 million.
Remedial Action
4 weeks to go
The production ready Gantt chart as we had it, didn't offer planners any real improvements over their Excel equivalent. Concerned about the doom scrolling issue, I led a deep-dive session with the React engineer to study scales and zoom in/out behaviour.
The graphs below show scales for 2 views: (A) Hours and (B) Days.
Outages are plotted for: 20 mins, 1 hour, 0.5 day and 1 day.
Zoom was set at 0 and +1
Maths to calculate dimensions
I built prototypes to understand how time related to pixels and to demonstrate doom scrolling.
A) Days/Hours
20 mins = 16px
1 hour = 48px
12 hours = 576px
1 day = 1152px (Doom scrolling)
B) Weeks/Days
20 mins = 4px (Too small)
1 hour = 12px
12 hours = 144px
1 day = 288px
Prototyping these graphs demonstrated that some outages were barely large enough to interact with or required too much scrolling.
Figma prototypes were shared with a lead planner to gauge how significant the issues we had identified were, and as anticipated the opinion was shared.
Time to Pivot
I looked back at a previous workshop for inspiration. Something jumped out as a possibility to create a more suitable data visualisation — something that did not rely on scales and complicated filtering.
Eureka Moment
A graph that doesn't rely on scales, but instead shows opportunities and dependencies at a glance. This idea set the momentum for a major pivot.
A new Data Visualisation
The pivotal concept I designed that offered quick access to critical information.
Graph Components
With iterations brought improved ways to build interactive, accessible components in Figma: design tokens were used throughout and variables for a dark theme. UI Kits: MD3, MUI and Tailwind CSS were used for foundational elements.
Pulse Evolution
As knowledge and understanding grew for how different planners performed their roles, designs evolved to handle specific use cases and work flows.
Figma Prototypes
These were regularly validated with outage planners during usability testing and research.
Filtering Data
A concept we explored that grouped different filters into a single panel, to determine if this was more effective than single filters triggered from a tool bar.
Usability Testing
A Miro board was used during usability testing for the moderation script. It also doubled up as the observation space for note taking. I ran the observation side with internal/external stakeholders, to maximise opportunities to learn, build empathy and align.
Getting it Right
One of the biggest challenges throughout this project was to ensure we built the right things for planners. I took it upon myself to run sessions with the squad to ensure planners needs were captured and aligned to specific features. These were then arranged on a time/value graph to ensure we delivered the most value within the given time frames.
End Results
This new graph showed a list of outages, and the order in which these could be taken. It also indicated the number of days (Gap) between outages.
This offered an 'at-a-glance' view of opportunities, to enable planners to decide where additional works could be added — an essential part of optimising a plan.
Planning Reimagined
Taking this approach was a major pivot, thankfully it payed off. We ran a final usability test with planners to see how they performed typical scenarios. Little friction was observed and it proved to be more effective and efficient than the Gantt chart.
Summary
Improved relations with planners by Involving them in the design process.
Validated concepts through usability testing prototypes.
Successfully pivoted our idea to offer a more effective and efficient data visualisation.
Delivered the web app by the deadline.
Achieved a System Usability Scale rating of 80/100.
