Oil and Gas Company
R E A L - T I M E A L E R T S A N D N O T I F I C A T I O N S
R E A L - T I M E A L E R T S A N D N O T I F I C A T I O N S
Embarking on a project aimed at unifying digital tools for streamlining the planning of sales, storage, and delivery of petroleum-derived fuels, I delved into the design process. The objective was clear: to create a cohesive system that empowers schedulers with real-time alerts and notifications, ensuring seamless management of inventory discrepancies. By collaborating with stakeholders and employing user-centric design principles, we aimed to develop intuitive solutions that catered to user needs and operational requirements.
Info
C L I E N T
For confidentiality reasons I can only say that it was an Oil and Gas Company
For confidentiality reasons I can only say that it was an Oil and Gas Company
Y E A R
2023
2023
R O L E
UX/UI Designer
UX/UI Designer
T O O L S
Adobe XD, Figma, Teams
Adobe XD, Figma, Teams
Process
1. Understanding Stakeholder Needs
To kickstart the project, I engaged stakeholders to gather project requirements and user stories. Among the identified features, alerts and notifications emerged as critical components for enhancing user efficiency and inventory management.
2. Establishing Clear Requirements
Translating user stories into concrete requirements, we outlined the essential functionalities for the alert system. This included setting alert rules, visual indicators, and detailed alert information access to enable timely inventory adjustments.
User Stories and Requirements Documentation
Feature:
Alerts and Notifications
Background:
Users need to be notified when there is an alert on a rule they set in their settings.
User Story 1:
As a scheduler, I want to be able to see a reconciliation alert in the workspace, right side panel, and see more details when I create an alert rule so that I can make changes where necessary and update the inventory to match what actually happened.
Requirements:
• Users need to be notified when there is an alert on a rule they set in their settings;
• The tool must be able to:
• Set the reconciliation alert rule in the notifications settings;
• Show the alert icon in the workspace when an alert is kicked off in the inventory cell where the alert occurs;
• Allow the user to click on the alert icon and be brought to the right side panel;
• Show the alert rule in the card of the right side panel;
• Allow the user to open the right side panel and be brought to the alert in the workspace;
• Allow the user to click on a link to open the reconciliation modal pop up with more details;
• Be able to dismiss the alert from the modal pop up.
Alerts and Notifications
Background:
Users need to be notified when there is an alert on a rule they set in their settings.
User Story 1:
As a scheduler, I want to be able to see a reconciliation alert in the workspace, right side panel, and see more details when I create an alert rule so that I can make changes where necessary and update the inventory to match what actually happened.
Requirements:
• Users need to be notified when there is an alert on a rule they set in their settings;
• The tool must be able to:
• Set the reconciliation alert rule in the notifications settings;
• Show the alert icon in the workspace when an alert is kicked off in the inventory cell where the alert occurs;
• Allow the user to click on the alert icon and be brought to the right side panel;
• Show the alert rule in the card of the right side panel;
• Allow the user to open the right side panel and be brought to the alert in the workspace;
• Allow the user to click on a link to open the reconciliation modal pop up with more details;
• Be able to dismiss the alert from the modal pop up.
User Story 2:
As a scheduler, I want to be able to see an ETA (Estimate Time of Arrival) alert in the workspace, right side panel, and see more details when I create an alert rule so that I can make changes where necessary and update the inventory to match what actually happened.
Requirements:
• The tool must be able to:
• Set the ETA alert rule in the notifications settings;
• Show the alert icon in the workspace when an alert is kicked off in the inventory cell where the alert occurs;
• Allow the user to click on the alert icon and be brought to the right side panel;
• Show the alert rule in the card of the right side panel;
• Allow the user to click on a link to open the ETA modal pop up with more details.
User Story 3:
As a scheduler I want to get an alert when the inventory is above max ELS and max Inventory, and when it is below min ESL and min Inventory so that I can take immediate action on these issues with my inventory.
Requirements:
The tool must automatically create an alert when inventory is above or below following the guidelines below:
• Greater than Max. Inventory then danger;
• Greater than Max. ESL but below Max. Inventory then warning;
• Below Min. ESL but more than Min. Inventory then warning;
• Below Min. Inventory then danger.
As a scheduler, I want to be able to see an ETA (Estimate Time of Arrival) alert in the workspace, right side panel, and see more details when I create an alert rule so that I can make changes where necessary and update the inventory to match what actually happened.
Requirements:
• The tool must be able to:
• Set the ETA alert rule in the notifications settings;
• Show the alert icon in the workspace when an alert is kicked off in the inventory cell where the alert occurs;
• Allow the user to click on the alert icon and be brought to the right side panel;
• Show the alert rule in the card of the right side panel;
• Allow the user to click on a link to open the ETA modal pop up with more details.
User Story 3:
As a scheduler I want to get an alert when the inventory is above max ELS and max Inventory, and when it is below min ESL and min Inventory so that I can take immediate action on these issues with my inventory.
Requirements:
The tool must automatically create an alert when inventory is above or below following the guidelines below:
• Greater than Max. Inventory then danger;
• Greater than Max. ESL but below Max. Inventory then warning;
• Below Min. ESL but more than Min. Inventory then warning;
• Below Min. Inventory then danger.
3. Crafting User Flows and Wireframes
Leveraging insights from stakeholders, I collaborated closely with the development leader to craft user flows, ensuring alignment with technical feasibility and user requirements. These flows served as a foundation for creating wireframes, outlining the interface structure and functionalities. This collaborative approach facilitated a comprehensive understanding of user interactions and system requirements.
As stakeholders occasionally brought new information to each meeting, the wireframes also played a crucial role in helping them grasp the proposed solutions and align their perspectives. After several meetings and iterative refinements, I received approval to proceed with the design of high-fidelity prototypes.
Create New Alarm Userflow
Mid Fidelity Wireframes
4. UI Design and Validating Solutions
During the design phase, I crafted prototypes that were presented to stakeholders for validation. Through iterative discussions and feedback sessions, we refined the prototypes, ensuring that they aligned perfectly with stakeholder requirements and user expectations.
4.1. Inventory Parameters
In designing the inventory parameters page, our focus was on creating a streamlined and intuitive interface that enables users to efficiently manage tank parameters for fuel storage, essential for creating alerts. We structured the page to group tanks by terminal, providing users with a clear organizational framework. Each tank is associated with specific fuel types, enhancing clarity and ease of navigation. To empower users in customizing inventory parameters, we incorporated editable parameters such as Heels (any material remaining in a tank following unloading, delivery, or discharge of the transported cargo), maximum and minimum inventory levels, as well as maximum and minimum ESL. Two key features of the design are the dynamic visual feedback: when users hover over an editable cell, the stroke color changes to blue, indicating its editability; and when users modify a parameter, the cell background instantly turns yellow, signaling changes and activating the save button. This visual cue ensures users are aware of their actions and prompts them to save their modifications promptly.
Inventory Parameters - Hi Fi Prototype
Inventory Parameters (Row Focus and Edited Highlight) - Hi Fi Prototype
4.2. Alerts and Notifications
In conceptualizing the 'Alerts and Notifications' page, my aim was to devise a user-centric interface that optimizes alert management and fosters clarity in user interactions. To achieve this, I implemented several key features tailored to enhance usability and functionality.
Firstly, alerts are intelligently grouped for each material within each terminal, facilitating efficient organization and navigation. I incorporated a toggle functionality to seamlessly toggle between showing and hiding deleted rules, enabling users to customize their view based on their preferences. To streamline the creation of alerts, I introduced a prominent button that, upon interaction, opens a configuration modal popup. Within the alert table, essential headers such as Rule number and Rule type provide users with quick access to critical information. Users are empowered to activate or deactivate notifications for each rule, with options to select preferred notification channels like Workspace, Email, and Teams app. For each active rule, users have the flexibility to perform various actions including viewing information about users receiving notifications, as well as editing or deleting rules. Additionally, I implemented a restore rule button for deleted rules, allowing users to seamlessly restore them if needed. Furthermore, the inclusion of Last Modified by and Last Modified on fields enhances transparency and accountability in rule management. At the terminal group level, users can conveniently activate or deactivate all alerts for a terminal, reflecting the practical scenario where users oversee multiple terminals.
Alerts and Notification - Hi Fi prototype
To facilitate the creation of alerts, we designed a user-friendly modal form that streamlines the process. Upon clicking the 'create new alert' button the modal will open, users are prompted to select the terminal and material for which the alert will be created. If an alert already exists for the chosen terminal and material, the system will automatically load the existing rules while enabling users to create a new rule. Users can select the type of rule from a dropdown menu, such as ETA, Reconciliation, Inventory, etc. Upon selecting a rule type, the system populates fields with default values, allowing users to customize parameters, including personalized options from the inventory parameters page. Users can also specify the frequency of notifications. The modal includes buttons for deleting or updating alerts, depending on whether an alert already exists. Additionally, the system detects duplicate rules and notifies users to prevent redundancy in alert creation.
Alert Creation modal - Hi Fi prototype
Alert Creation modal duplicated rule - Hi Fi prototype
Alert Creation modal, filled up form - Hi Fi prototype
Users are empowered to manage rules by deleting or editing them, however they can only do so if they are the sole recipients of notifications for that rule. If a user attempts to delete or edit a rule while other users are also receiving notifications for it, a modal popup will appear, indicating that they cannot proceed due to other recipients. But, the modal includes an option for the user to turn off notifications for themselves only, allowing them to make the desired modifications without affecting other users' notification settings.
'We are sorry' popup - Hi Fi prototype
'We are sorry' popup list of users expanded - Hi Fi prototype
When an alarm rule is triggered, notifications are promptly sent to both the workspace and the notification panel. Unread notifications will be indicated by a yellow dot atop the notifications button.
In the workspace, notifications appear within the corresponding cell of the cargo planning table, each accompanied by a notification icon. Hovering over this icon reveals a tooltip specifying the type of notification, enabling users to quickly identify the alert. Additionally, users can access the notification panel by either clicking directly on the notification icon or using the notification button. Clicking the icon directly opens the related notification in the panel.
Workspace - Hi Fi Prototype
Notifications panel - Hi Fi Prototype
Notification Panel: Positioned prominently on the right side, adjacent to the cargo planning table within the workspace, the notification panel serves as a central hub for managing alerts. Users can efficiently filter notifications by desk, terminal, material, and rule type, allowing them to focus on pertinent issues. By default, notifications are grouped based on desk, ensuring organized management. Customizable grouping options cater to individual preferences. To ensure no alerts are overlooked, a subtle blue indicator prompts users to reset filters for a comprehensive view of all notifications.
Notifications filtering - Hi Fi Prototype
Notification Cards: Each alert within the notification panel is presented succinctly on its own card, showcasing essential details such as desk, terminal, and material. Additionally, a summary of the issue, based on user-created alert rules, is provided along with the date the notification was generated. Users can effortlessly access additional information, navigate to relevant pages for issue resolution, and dismiss notifications as needed. This streamlined process facilitates efficient monitoring and resolution of alerts.
Reconciliation notification additional information modal - Hi Fi Prototype
4.3. Comment Component
In the midst of the project, stakeholders identified a crucial requirement: the integration of a comment component to enhance collaborative problem-solving among users. This insight was gleaned from comprehensive user feedback sessions and discussions, underscoring our commitment to iterative development and responsiveness to user needs.
To draw inspiration for the UI style, I explored design platforms such as Dribbble, Mobbin, and Behance. Additionally, benchmarking research was undertaken to analyze existing comment components and extract valuable insights.
Comments Component - Hi Fi Prototype
5. User Feedback and Iterative Refinement
Upon prototype approval, user testing was conducted by me and peers designers to gather feedback on usability and functionality. Findings were presented to stakeholders, informing further design adjustments to ensure optimal user experience and solution effectiveness.
User Testing outcome
User Testing outcome
User Testing outcome
6. Implement: Hand-off to Development
Following validation and refinement, the designs were finalized and handed off to the development team for implementation. This iterative approach, rooted in the principles of design thinking, enabled the creation of user-centered solutions tailored to streamline fuel management processes, ultimately enhancing operational efficiency and user satisfaction.
Following validation and refinement, the designs were finalized and handed off to the development team for implementation. This iterative approach, rooted in the principles of design thinking, enabled the creation of user-centered solutions tailored to streamline fuel management processes, ultimately enhancing operational efficiency and user satisfaction.
thanks
obrigado