CASE STUDY

Petrol

A long-term design strategy focused on expanding the user base of VW’s virtual machine tool

Context

Petrol was initiated by a team of German developers aiming to comply with Volkswagen’s security guidelines for cloud-based virtual machines. Unlike market alternatives, Petrol offers a more user-friendly interface while keeping critical data within the company.

Client

Role

Senior product designer – January 2024 / Present

Services

Research & discovery, information architecture, wireframing, user flows, UI/UX design, visual design, prototyping, product management, business roadmapping, agile coaching, mentorship for junior designers

Team

A multidisciplinary team in Portugal, including full-stack developers, site reliability engineers, and myself as a product designer, collaborating with a product owner and agile enabler based in Germany.

Tools

Figma, Figjam, Miro, Dovetail, Userzoom, Jira, Confluence

Challenges

Lack of direction in design
led to UI inconsistencies

Convoluted UX
and navigation

Unclear prioritization
and backlog issues
hurting team morale

Objectives

Identify key
UX/UI issues

Propose and prioritise fixes
and enhancements

Engage team members
on important
product decisions

Solution

Reduced visual
inconsistencies

Simplified
navigation

Established design documentation and future strategies

Reduced visual
inconsistencies

Simplified
navigation

Established design
documentation and
future strategies

Current key results

32%+

Screens and user flows refactored

4%↓

Reduced platform navigation time

12%↑

Increased
sprint velocity

43%↑

Boost in team office attendance

Background

Obstacles

Petrol was ideated as a layer of abstraction over Azure’s virtual machine tools to make complex operations more accessible, particularly for users who found Azure’s interface unintuitive.

Petrol gained traction as it aimed to solve the need for a compliant, user-friendly way for non-technical managers to manage access and resources.

However, despite benchmarking Azure’s workflows, Petrol’s lack of cohesive design direction failed to deliver the intended simplicity. Many users returned to Azure, as Petrol did not provide the ease of use they needed.

Why they sought my expertise

The project’s scalability was severely impacted by overly complex navigation patterns that frustrated users, coupled with challenges in prioritising new features and an absence of comprehensive design documentation to guide development efforts.

the team working on Petrol was grappling with low morale and a sense of demotivation. This stemmed from a lack of clear direction and alignment, which left many feeling disconnected from the broader vision of the project

Auditing the product …and the project

Auditing the product
…and the project

My first step was to thoroughly assess the current needs of the team and the project. I met with each team member individually and interviewed them about their challenges and concerns.

After documenting their feedback anonymously, I grouped it by area of concern and shared the results with stakeholders in Germany and upper management in Lisbon.

My first step was to thoroughly assess the current needs of the team and the project. I met with each team member individually and interviewed them about their challenges and concerns.

After documenting their feedback anonymously, I grouped it by area of concern and shared the results with stakeholders in Germany and upper management in Lisbon.

Insights and opportunities

During these interviews, my colleagues in Lisbon highlighted several issues, including the need for more team-building activities, language barriers with the German team, and concerns about the application of Agile methodologies and software deployment best practices.

In parallel, I was tasked with assessing the design maturity of the stakeholders, product owner, and developers on the German side of the project, while also supervising the education and professional development of their design intern.

Mitigation plan

Back to basics: we revisited foundational design artefacts, such as journey mapping, due to outdated, incomplete, or missing documentation.

This information guided my decisions on usability and interface improvements, as well as my efforts to boost team morale and productivity. It also helped me implement more efficient Agile ceremonies and enhance internal communication.

Improve Petrol’s user experience.

Continuously advocate to stakeholders for the ROI of quality product design and consistent Agile practices.

Build community among team members through creative workshops and social events, both in and out of the office.

Back to basics: we revisited foundational design artefacts, such as journey mapping, due to outdated, incomplete, or missing documentation.

This information guided my decisions on usability and interface improvements, as well as my efforts to boost team morale and productivity. It also helped me implement more efficient Agile ceremonies and enhance internal communication.

Improve Petrol’s user experience.

Continuously advocate to stakeholders for the ROI of quality product design and consistent Agile practices.

Build community among team members through creative workshops and social events, both in and out of the office.

Roadmapping

Initiatives were scheduled by quarter as part of our design and business strategy, with timelines shared with the team, management, and stakeholders.

  • Re-evaluate the current product scope
  • Reframe team ceremonies with support from an Agile enabler
  • Assist the FE team in delivering features in the pipeline
  • Refactor Figma files
  • Mentor design intern
  • Deepen understanding of Petrol’s users
  • Conduct re-discovery to assess current features
  • Refactor the product’s front-end
  • Refactor Figma files
  • Mentor design intern
  • Implement new internal search engine
  • Support the FE team in delivering new features
  • Refactor Figma files
  • Conduct usability tests on new features
  • Rebuild admin dashboards
  • Provide CSS workshop for FE team
  • Assess progress and potential re-scoping
Q1-24
  • Re-evaluate the current product scope
  • Reframe team ceremonies with support from an Agile enabler
  • Assist the FE team in delivering features in the pipeline
  • Refactor Figma files
  • Mentor design intern
Q2-24
  • Deepen understanding of Petrol’s users
  • Conduct re-discovery to assess current features
  • Refactor the product’s front-end
  • Refactor Figma files
  • Mentor design intern
Q3-24
  • Implement new internal search engine
  • Support the FE team in delivering new features
  • Refactor Figma files
Q4-24
  • Conduct usability tests on new features
  • Rebuild admin dashboards
  • Provide CSS workshop for FE team
  • Assess progress and potential re-scoping
2025

Improving UX

1

To improve Petrol’s UX, I tackled documentation debt from direct code implementation, guided by an evaluation based on Nielsen’s 10 usability heuristics. Conducted by three impartial colleagues, this evaluation provided key insights that guided my subsequent decisions. here’s what i did:

1

To improve Petrol’s UX, I tackled documentation debt from direct code implementation, guided by an evaluation based on Nielsen’s 10 usability heuristics. Conducted by three impartial colleagues, this evaluation provided key insights that guided my subsequent decisions. here’s what i did:

● Refactored the handover Figma files to industry standards, organising sections by user journey stage to simplify Jira linking. Using a Figma plugin, I quickly extracted screens directly from the browser.

● Reviewed the code architecture with developers, prioritising elements for refactoring and enhancing critical flows, such as VM creation. We standardised navigation, reorganised alerts, and added loading animations for better feedback.

● Identified and prioritised critical usability issues through end-user interviews and presented the findings to stakeholders.

● In the Q&A session, clients were surprised to learn that many features they valued weren’t essential to users, and the overall experience was unclear.

● Identified and prioritised critical usability issues through end-user interviews and presented the findings to stakeholders.

● In the Q&A session, clients were surprised to learn that many features they valued weren’t essential to users, and the overall experience was unclear.

Design advocating

2

To advocate for design, I worked with Lisbon senior management, stressing the importance of buy-in while considering our German stakeholders. Building trust has helped the Lisbon team improve product, structure, and task prioritisation.

Changes included revamping the Jira task pipeline, refining user story templates, optimising sprint and PI flows, and improving Agile ceremonies. With the design intern, I led roundtables with Agile enablers to guide juniors in task refinement, estimation, and breakdown.

2

To advocate for design, I worked with Lisbon senior management, stressing the importance of buy-in while considering our German stakeholders. Building trust has helped the Lisbon team improve product, structure, and task prioritisation.

Changes included revamping the Jira task pipeline, refining user story templates, optimising sprint and PI flows, and improving Agile ceremonies. With the design intern, I led roundtables with Agile enablers to guide juniors in task refinement, estimation, and breakdown.

Building Community

3

Since day one, I’ve introduced measures to build team morale, such as adding an extra office day and organising brunches. These efforts have led to higher meeting attendance and more collaborative activities, like pair programming sessions.

These initiatives have encouraged Lisbon’s junior team members to voice their ideas and concerns, supported by the trust I’ve built with stakeholders. Activities like visual culture workshops and movie nights have strengthened team unity, creating an open environment for discussions on both work and personal matters.

I’m organising a CSS workshop for the fourth quarter, inspired by the CSS Zen Garden exercise, to further develop our team’s visual and communication skills.

3

Since day one, I’ve introduced measures to build team morale, such as adding an extra office day and organising brunches. These efforts have led to higher meeting attendance and more collaborative activities, like pair programming sessions.

These initiatives have encouraged Lisbon’s junior team members to voice their ideas and concerns, supported by the trust I’ve built with stakeholders. Activities like visual culture workshops and movie nights have strengthened team unity, creating an open environment for discussions on both work and personal matters.

I’m organising a CSS workshop for the fourth quarter, inspired by the CSS Zen Garden exercise, to further develop our team’s visual and communication skills.

Petrol as a learning experience

I used Petrol as a training platform for junior team members, prioritising their career growth. To boost my colleagues’ work maturity, I launched a visual guide that centralised crucial information, such as file naming conventions, folder organisation, Jira task ticket standards, and a design thesaurus.

Some end notes…

This case study is continuously updated to reflect ongoing developments. Adding this layer of design consistency is already a success, yielding results such as:

  • Securing a contract with a German multinational in the consumer goods and home appliances market for our product’s use by their development teams.
  • Renewing our partnership with the client for 2025, despite significant budget cuts from our parent company across projects.
  • Integrating two additional internal products into our portfolio.

Petrol remains an ongoing project!

Some end notes…

This case study is continuously updated to reflect ongoing developments. Adding this layer of design consistency is already a success, yielding results such as:

  • Securing a contract with a German multinational in the consumer goods and home appliances market for our product’s use by their development teams.
  • Renewing our partnership with the client for 2025, despite significant budget cuts from our parent company across projects.
  • Integrating two additional internal products into our portfolio.

Petrol remains an ongoing project!

Thank you for reading!

I hope you found this project insightful. If you’d like to discuss it further or explore other topics, feel free to reach out.

Leave a Reply

Your email address will not be published. Required fields are marked *

Fill out this field
Fill out this field
Please enter a valid email address.
You need to agree with the terms to proceed