top of page

Petromotic

Petromotic is a redesigned remote control platform for managing gas stations across Spain. The company had an existing tool but found it difficult to use, with a cluttered and outdated interface. My role began with in-depth research to understand the platform’s current functionalities and identify areas for improvement. Based on these insights, I reimagined the user experience from scratch, developing wireframes and defining intuitive user flows to create a more accessible and streamlined system. I then designed a comprehensive design system with over 500 components, including color schemes, alert levels, icons, buttons, and sliders. The final high-fidelity prototype was built in Figma and handed off to the development team for implementation.

​

Time frame: 2024-2025

My roles: UX Research, Ux Design, UI Design 

Discovery & Inspiration

During my research for Petromotic, I discovered that operators needed to resolve incidents that arose during their shifts as quickly and efficiently as possible. While the existing platform displayed these incidents, it lacked an intuitive flow for immediate action, forcing users to navigate through a heavy interface that slowed down their response time. The key challenge was to design a seamless experience where operators could be notified of an issue and instantly interact with the affected station to take action.

 

Visually, I drew inspiration from NASA control panels and sci-fi films depicting space missions—interfaces where clarity, hierarchy, and quick readability are essential. This led to a modern, sleek dashboard design where operators could monitor and act without distraction, ensuring efficiency and control at every step.

Image by Frames For Your Heart

UX Research & Ideation

To better understand the challenges operators faced, I began by analyzing the existing platform and conducting interviews with team members who used the system daily. My goal was to uncover what tasks were essential during their shifts and how the current tool was supporting—or hindering—their ability to resolve incidents.

​

Through this process, I discovered that while the platform did notify users of issues at gas stations, it lacked an intuitive flow for immediate response. Operators often had to navigate multiple layers just to take action, which led to frustration and inefficiency. These insights shaped the core goal of the redesign: to create a seamless and actionable incident response system.

Screenshot 2025-05-15 at 11.25.44.png

Users Interviews

To understand the real challenges faced by operators, I conducted in-depth interviews with platform managers who guided me through their daily tasks and walked me step-by-step through the current system. These conversations helped me identify both functional gaps and usability frustrations in the existing platform.

I used a set of core scripted questions to guide the sessions and uncover pain points in the incident management workflow:

​

Interview transcript

​

  • What do you do when your shift begins and when it ends?

  • What happens when you have to resolve multiple incidents simultaneously?

  • How do you prioritize incidents?

  • How do you keep track of unresolved issues?

  • What is the most difficult task you face?

  • What is the easiest task for you?

  • What would you love to see in the new platform?

 

From these interviews, I identified key areas for improvement and began defining the user flow for a more responsive and intuitive control center. This qualitative input directly informed my design decisions and helped shape a user persona representing the operators' needs and expectations.​​

​

Starting the Design

With the problem statement and user interviews in mind, I began the design process by sketching paper wireframes focused on simplifying the user flow. The main goal was to allow operators to resolve an incident immediately, using as few steps as possible.

​

The initial wireframes helped visualize how users would be notified, assess the incident, and interact directly with the affected station, all within a streamlined interface. As the design process evolved, the wireframes were refined both on paper and digitally, always guided by usability principles and the real needs of the operators.

Screenshot 2025-05-15 at 11.27.34.png

UI Design

The UI design was grounded in Petromotic’s established visual identity. I created a modern and highly functional interface that aligned with the brand’s guidelines while improving the overall user experience.

​

To support complex workflows and incident management, I designed a scalable design system with over 500 components, including alert colors, icons, buttons, sliders, and input elements. The system ensured consistency across the platform and made it easier for developers to implement the interface efficiently.

The final UI balances clarity, responsiveness, and control, providing operators with the tools they need to act quickly and confidently in high-pressure situations.

Concept

The Petromotic platform is a control center used to monitor and resolve incidents at gas stations across Spain. To support this complex and high-responsibility environment, I drew visual inspiration from NASA dashboard control centers and futuristic interfaces seen in space-related films.

​

The result is a clean, modern UI that emphasizes real-time awareness, quick decision-making, and clarity. Dark backgrounds with accent colors were used to highlight status changes and alerts, helping operators stay focused and informed throughout their shifts.

Screenshot 2025-05-15 at 11.33.18.png

I used Petromotic’s brand colors to develop a priority-based color scheme that clearly communicates the urgency of different incidents. This hierarchy helps operators quickly identify and respond to critical issues.

​

To give the interface a contemporary and clean look, I incorporated modern UI trends such as subtle shadows, floating rounded buttons, and spacious layouts. These elements not only improved the visual appeal but also enhanced usability by reducing visual clutter and guiding the user's attention.

Screenshot 2025-05-15 at 11.34.20.png
  • Instagram
  • LinkedIn

© 2035 by Sasha Blake. Orgullosamente creado con Wix.com

bottom of page