ADNOC
OneProject Portal
The challenge:
ADNOC runs one of the largest capital project portfolios in the energy sector. The people who manage it (executives, project managers, controllers) need to answer the same questions every day: which projects are on schedule, where is the budget changing, which risks need attention, and what is waiting for my approval.
OneProject is the portal built to answer them. The challenge was designing a product with a huge amount of information (budgets, schedules, risks, contractors, safety data) so that it stays fast to read, consistent and scalable as new modules arrive.
01
The result
.png)
02
How I approached it
Two levels of reading. The portal works at two levels:
the whole portfolio (Landing) and a single project (Project Overview). Both follow the same logic: first the summary, then the detail, so users can scan quickly and go deeper only where something needs attention. A system, not isolated screens.
Every card, chart and table comes from the UI Kit. That makes each new module faster to design and build, and keeps the product consistent for users and developers. Dense data, organised. Data is not simplified away, it is grouped and prioritised: status first, numbers second, charts third.
The Landing is the daily starting point. It is organised in layers, from most urgent to most strategic: Personal header: a greeting, pinned projects (Quick Links) and a search bar. Portfolio Summary: filters by Directorate, Company and Project Status, and key counters (155 active, 47 proposed, 123 completed, 15 waiting closure, 52 cancelled, 325 in total). Action area: Inbox with pending requests, Portfolio FID Insights and Project Foresight, so users know what needs them today. Portfolio Performance Indicators: Schedule, Budget, ACPI, Budget and Project changes, Risks, Contractors, Monthly Report submission and HSE, each as a widget. Strategic Themes: the same indicators filtered by the company's strategic programmes. Dark mode. The Landing also exists in a dark theme, designed so charts, status colours and data tables stay readable and consistent in both modes.
.png)
.png)
The project overview
The Project Overview is the single-project page.
It brings together project details, scope, location, executive summary, contracts, KPIs, S-curve, milestones, risks and media, organised in tabs (Overview, Schedule, Budget & Cost, Stage & Gate, Progress & Report, Changes, Risks, Documents, Resources, More) with quick actions always at hand.
Intelligent Insights: new cards with suggestions, such as potential cost reductions. In Progress Requests: pending approvals visible inside the project, with their status.
New metrics: Deliverable progress, Project Changes and Quality Inspection. Tighter layout: better hierarchy in the Executive Summary and the Contracts table, with a clearer status per row.
As a result of this project, 20+ new flows and 50+ new screens since November 2024.
A UI Kit of 120+ components in constant evolution.
A redesigned Project Overview (Release 2) and a Landing in light and dark mode.
Inside a request: the Decision Support Package
Behind the Inbox there is a more internal side of the portal: the detail page of an approval request. Here a reviewer opens a Decision Support Package and has to read a lot before deciding: project overview, investment planning, risks and opportunities, planning and control, contracting strategy, recommendations and more.
Behind the Inbox there is a more internal side of the portal: the detail page of an approval request. Here a reviewer opens a Decision Support Package and has to read a lot before deciding: project overview, investment planning, risks and opportunities, planning and control, contracting strategy, recommendations and more. The challenge was a very long, text-heavy document that people have to review carefully.
My approach:
Collapsible sections with a clear title, so the reviewer can jump to what matters and not lose their place. Header with the context (requester, project, status and approvers), always at the top. Hierarchical tables for planning: Stage > Gate > Milestone, with colour-coded levels and expandable rows, so a complex schedule can be read at a glance. Attachments as first-class items: every supporting document appears as a row with its type, size, and preview and download actions.