Before
Many steps to reach a task. People only found out they had a pending task after searching for the project, opening it and finding the right specialty.
Case study
Case study
Redesigning the project management platform for Argentina’s largest energy company
Redesigning the project management platform for Argentina’s largest energy company
Redesigning the project management platform for Argentina’s largest energy company
Industry
Industry
Upstream
Upstream
Upstream
Oil and gas
Oil and gas
Oil and gas
Year
Year
2019
2019
Platform
Platform
Web
Web
Overview
Overview
Overview
Every phase of an upstream project at Argentina’s largest energy company has to pass technical validation by several areas. It ran on a SharePoint site where people couldn’t tell where to act or whose turn it was, and project managers couldn’t see what was late. I led design of an internal platform that makes each project’s phase, area and status visible at a glance.
The UI shown in this case study is translated from Spanish, the app’s original language.
My role
Led design. I ran twice-weekly working sessions with the client, designed the flows and interface, and built the interactive prototype, which let the business analyst test user scenarios and helped developers see how the whole project fit together. Delivered at IT Resources, a software consultancy.
Timeline
Started in July 2019, launched in April 2020.
- Months 1–2: Working sessions with the client twice a week, wireframes and the hardest screens
- Months 3–4: Remaining screens and prototype, then handoff
- After handoff: Development and implementation, then launch
What I solved
- Finding where to act: My profile puts pending tasks first, so people no longer learn the path by heart.
- Knowing whose turn it is: Each card and status shows who acts next.
- Seeing progress: Project managers see each project's phase, area and status at a glance.
- Clearer emails: Notifications carry one message and one action, in the same style as the interface.
Impact
Live within days of its original target, despite the pandemic and lockdown, and well received from day one: good feedback on accessibility, ease of use and visual design, in both the portal and its emails. The client's project lead called it "a great achievement."
Credits
- UX/UI design: Melisa Hildt
- Branding: branding designer
- UI development: UI developer
- Also on the team: team leader, tech lead, two business analysts, two developers
Every phase of an upstream project at Argentina’s largest energy company has to pass technical validation by several areas. It ran on a SharePoint site where people couldn’t tell where to act or whose turn it was, and project managers couldn’t see what was late. I led design of an internal platform that makes each project’s phase, area and status visible at a glance.
The UI shown in this case study is translated from Spanish, the app’s original language.
My role
Led design. I ran twice-weekly working sessions with the client, designed the flows and interface, and built the interactive prototype, which let the business analyst test user scenarios and helped developers see how the whole project fit together. Delivered at IT Resources, a software consultancy.
Timeline
Started in July 2019, launched in April 2020.
- Months 1–2: Working sessions with the client twice a week, wireframes and the hardest screens
- Months 3–4: Remaining screens and prototype, then handoff
- After handoff: Development and implementation, then launch
What I solved
- Finding where to act: My profile puts pending tasks first, so people no longer learn the path by heart.
- Knowing whose turn it is: Each card and status shows who acts next.
- Seeing progress: Project managers see each project's phase, area and status at a glance.
- Clearer emails: Notifications carry one message and one action, in the same style as the interface.
Impact
Live within days of its original target, despite the pandemic and lockdown, and well received from day one: good feedback on accessibility, ease of use and visual design, in both the portal and its emails. The client's project lead called it "a great achievement."
Credits
- UX/UI design: Melisa Hildt
- Branding: branding designer
- UI development: UI developer
- Also on the team: team leader, tech lead, two business analysts, two developers
Every phase of an upstream project at Argentina’s largest energy company has to pass technical validation by several areas. It ran on a SharePoint site where people couldn’t tell where to act or whose turn it was, and project managers couldn’t see what was late. I led design of an internal platform that makes each project’s phase, area and status visible at a glance.
The UI shown in this case study is translated from Spanish, the app’s original language.
My role
Led design. I ran twice-weekly working sessions with the client, designed the flows and interface, and built the interactive prototype, which let the business analyst test user scenarios and helped developers see how the whole project fit together. Delivered at IT Resources, a software consultancy.
Timeline
Started in July 2019, launched in April 2020.
- Months 1–2: Working sessions with the client twice a week, wireframes and the hardest screens
- Months 3–4: Remaining screens and prototype, then handoff
- After handoff: Development and implementation, then launch
What I solved
- Finding where to act: My profile puts pending tasks first, so people no longer learn the path by heart.
- Knowing whose turn it is: Each card and status shows who acts next.
- Seeing progress: Project managers see each project's phase, area and status at a glance.
- Clearer emails: Notifications carry one message and one action, in the same style as the interface.
Impact
Live within days of its original target, despite the pandemic and lockdown, and well received from day one: good feedback on accessibility, ease of use and visual design, in both the portal and its emails. The client's project lead called it "a great achievement."
Credits
- UX/UI design: Melisa Hildt
- Branding: branding designer
- UI development: UI developer
- Also on the team: team leader, tech lead, two business analysts, two developers
Before: How the project management platform worked
Before
One long, crowded page. Everything on one scroll: more information than anyone needed, hard to scan, and formatted like raw HTML.
Pending
Documentation sent
Observation sent
Observation answered
Validated
Before
Colors with no logic. “Observation answered” is a normal step, but in red it looked urgent, as if someone had done something wrong. The colors followed no logic.
BeforeAfter
From wireframes to a branded interface
From wireframes to a branded interface
Project Management
Project Management
Each upstream project has different phases and sub-projects attached to it. The challenge was how to display them and make them easy to interact with.
After clicking on one of the phases, it shows below all the areas of work involved to get the approval of that phase in question (small cards).
The color of each card represents the progress of that area and the tag on it, the latest update.
A new card that brings together information that used to be spread across several screens.
Anatomy of a project card
A new card that brings together information that used to be spread across several screens.
A
Project ID
A unique number, so people find a project without searching by name.
B
Project name
The name people use day to day.
C
Current phase
Which phase the project is in, for example Phase 2.
D
Current area involved
The technical area that has the ball right now, for example Environment.
E
Area status
The color bar on the left, from the neutral status palette. It shows progress without reading as good or bad.
F
Remaining days
Days left to complete the current step.
G
Participants
Who is involved.
H
History
What happened and when.
I
Project information
The details of the project.
HOVER TO INSPECTTAP TO INSPECT
Observation answered
# 40282.SRE
Secondary Recovery Expansion
Phase 2
Environment
15 days
Status options
Overview
A new card that brings together information that used to be spread across several screens.
Anatomy of a project card
A new card that brings together information that used to be spread across several screens.
A
Project ID
A unique number, so people find a project without searching by name.
B
Project name
The name people use day to day.
C
Current phase
Which phase the project is in, for example Phase 2.
D
Current area involved
The technical area that has the ball right now, for example Environment.
E
Area status
The color bar on the left, from the neutral status palette. It shows progress without reading as good or bad.
F
Remaining days
Days left to complete the current step.
G
Participants
Who is involved.
H
History
What happened and when.
I
Project information
The details of the project.
HOVER TO INSPECTTAP TO INSPECT
Observation answered
# 40282.SRE
Secondary Recovery Expansion
Phase 2
Environment
15 days
Status options
Overview
User Dashboard
User Dashboard
I focused first on the main flow, completing a pending project’s task, as it was the most complex, for which I created wireframes to validate with them and later the rest of the secondary user flows.
