STEAR
Logistic Optimisation Solutions
- Home
- Projects
- STEAR
- About
About STEAR
STEAR is a logistics project of PETRONAS. It was established to solve internal logistics problems such as vessel reservation, demand visibility and vessel tracking, and to minimize costs in the offshore logistics industry. STEAR is a first-of-its-kind industry-leading platform that aims to offer “logistics on demand” through an uberized model where demand and supply for shipping vessels are optimally balanced.
The Challenges
PETRONAS built STEAR to address these challenges by streamlining logistics operations, cutting costs, enhancing visibility, and offering a flexible, on-demand model. The goal is to improve efficiency, reduce expenses, and set new industry standards for offshore logistics.
STEAR faces several operational challenges, including efficiently managing vessel schedules, coordinating between stakeholders, and maintaining accurate real-time tracking. The platform must also adapt to demand fluctuations, ensure effective resource allocation, and minimize operational downtime while handling large volumes of data and providing a user-friendly interface.
The Project & Modules
Role Description
As a Lead UI/UX Designer, I oversee the design and user experience of digital products, ensuring they are intuitive, visually appealing, and user-friendly. My role involves leading a team of designers, collaborating with stakeholders, conducting user research, and creating wireframes, prototypes, and high-fidelity designs. I focus on optimizing the user journey, improving usability, and maintaining consistency across all design elements to enhance overall user satisfaction and engagement.
Design Process & Deliverables
In my current role, I follow a streamlined UI Design Development Process. It starts with gathering requirements, followed by research, wireframing, prototyping, and creating high-fidelity designs. I collaborate closely with developers and iterate designs based on feedback, ensuring a user-centered and technically feasible outcome.
1. Requirement Gathering
Receive and review user stories provided by the Product Owner.
2. Research and Analysis
Conduct detailed research to understand the requirements outlined in the user stories.
3. Wireframing
Develop wireframes to outline the basic structure and layout of the UI, ensuring alignment with user stories and requirements.
4. Design Drafting
Translate the wireframes and prototypes into high-fidelity UI designs, incorporating detailed design elements
5. Initial Proposal and Collaboration
Present the first draft of the UI design in a grooming session. Collaborate with developers to gather feedback and discuss technical feasibility
6. Iteration
Refine the UI design based on feedback from the grooming session and further collaboration with the development team.
7. Submission and Asset Transfer
Finalize and submit the UI design to the development team for implementation
UI/UX Agile Design Workflow
Effective collaboration and structured workflows are essential for successful UI/UX teams. By using a sprint-based approach, teams can manage projects efficiently, ensuring continuous progress and adaptability. This workflow guides UI/UX teams from receiving a project brief to reflecting on completed work, promoting continuous improvement and high-quality deliverables.
Product & Tech Collaborations
Here’s an outline of how deliverables are managed between Prod and Tech: The process is cyclical and adapts according to task and sprint planning. Both teams collaborate closely to ensure alignment and adjust workflows as needed throughout each sprint.
Design System
I led the creation of STEAR Design Language System (DLS 2.0), establishing a structured and scalable foundation for product design across the platform. This includes defining reusable UI components, interaction patterns, typography, color systems, and design guidelines to ensure consistency, efficiency, and a unified user experience across all modules.
Marketing Website for Platform+
Project Overview
STEAR is a logistics platform under PETRONAS designed to optimise offshore vessel operations through a smart, demand-driven system. The marketing website was created to introduce STEAR to external clients, communicate its value proposition, and position it as a modern, “logistics-on-demand” solution for the offshore industry.
My role was to design the end-to-end user experience and interface for the marketing website, working closely with stakeholders and product teams to ensure clarity, consistency, and strong brand storytelling.
Problem Statement
The STEAR platform was highly technical and system-focused, making it difficult for external audiences to quickly understand its value. There was no dedicated digital presence to clearly communicate what STEAR is, how it works, and why it matters to potential clients.
Goal / Objective
- Clearly explain STEAR’s value proposition to external stakeholders
- Translate a complex system into a simple, engaging narrative
- Build trust and credibility with potential clients
- Drive awareness and interest in STEAR’s capabilities
Key Features & Solutions
- Clear product storytelling sections (What STEAR is, How it works)
- Value proposition breakdown for clients and partners
- Simplified visualization of complex logistics workflows
- Strong CTA sections for engagement and enquiries
- Modular layout for scalability and future updates
User Flow & Site Map
- Improved clarity of STEAR’s value proposition for external users
- Established a strong digital presence for client engagement
- Simplified complex system messaging into an accessible format
- Created a scalable marketing structure for future expansion
Website Demo
The final website was designed as an interactive marketing experience, allowing users to explore STEAR through a structured flow of information. The prototype includes responsive layouts, interactive sections, and smooth navigation designed for both desktop and mobile users.
UI Design
The UI design was crafted to present complex logistics information in a clean, structured, and visually engaging way. A modern layout system was used with strong hierarchy, clear spacing, and consistent typography to improve readability and user flow.
Platform+ (Core System)
Project Overview
STEAR is a logistics platform under PETRONAS designed to optimise offshore vessel operations through a smart, demand-driven system. The marketing website was created to introduce STEAR to external clients, communicate its value proposition, and position it as a modern, “logistics-on-demand” solution for the offshore industry.
My role was to design the end-to-end user experience and interface for the marketing website, working closely with stakeholders and product teams to ensure clarity, consistency, and strong brand storytelling.
Problem Statement
The STEAR platform was highly technical and system-focused, making it difficult for external audiences to quickly understand its value. There was no dedicated digital presence to clearly communicate what STEAR is, how it works, and why it matters to potential clients.
Goal / Objective
- Clearly explain STEAR’s value proposition to external stakeholders
- Translate a complex system into a simple, engaging narrative
- Build trust and credibility with potential clients
- Drive awareness and interest in STEAR’s capabilities
Key Features & Solutions
- Clear product storytelling sections (What STEAR is, How it works)
- Value proposition breakdown for clients and partners
- Simplified visualization of complex logistics workflows
- Strong CTA sections for engagement and enquiries
- Modular layout for scalability and future updates
User Flow & Site Map
- Improved clarity of STEAR’s value proposition for external users
- Established a strong digital presence for client engagement
- Simplified complex system messaging into an accessible format
- Created a scalable marketing structure for future expansion
Website Demo
The final website was designed as an interactive marketing experience, allowing users to explore STEAR through a structured flow of information. The prototype includes responsive layouts, interactive sections, and smooth navigation designed for both desktop and mobile users.
UI Design
The UI design was crafted to present complex logistics information in a clean, structured, and visually engaging way. A modern layout system was used with strong hierarchy, clear spacing, and consistent typography to improve readability and user flow.