Shell International
Case Study Details
Date May to September 2021
Client Shell International
Project Liquefied Natural Gas (LNG) Platform
Role Senior Experience Designer
Tools Figma / FigJam / InVision / Jira / Sketch / Slack / Zeplin
Introduction
As a contract UX/UI designer, I had the opportunity to work with Shell International on a challenging project: designing a web-based application to monitor and manage the global supply and demand of liquefied natural gas (LNG). This case study highlights my approach to designing the user experience (UX) and user interface (UI) for this intricate application. My focus was on using Figma prototypes, contributing improvements to an existing design system and creating advanced interactive components.
Client Background
Shell International, a global energy and petrochemicals leader, valued a data-driven approach, both quantitatively and qualitatively, when making decisions about global LNG supply and demand.
The Challenge
Shell International needed a digital solution that could provide real-time insights into the global LNG market. My task was to gain a deep understanding of LNG supply and demand intricacies while delivering a user-friendly and visually appealing interface.
My Approach
Research and Discovery
Collaborated closely with business analysts and traders drawing on their industry expertise.
Conducted extensive research, diving into detailed user personas to gain valuable insights into their wants, need and challenges (see Fig 1.1 below)
Analysed detailed data platform background to identify gaps and opportunities.
Design System Development
Contributed to a comprehensive design system to ensure design consistency and maintain scalability (see Fig 1.2 below).
Developed a range of on-brand UI components including custom charts, graphs and data visualisations tailored specifically to meet the specific need of the LNG industry.
Ensured the application met the accessibility standards of Shell International
Prototyping (Figma)
Utilised Figma to craft interactive prototypes that provided a realistic user experience.
Conducted sprint demos with stakeholders to gather feedback, allowing for iterative design improvements.
Leveraged Figma's advanced interactive components to simulate real-time data updates, enhancing the prototype's authenticity.
Information Architecture
Structured the application's information logically to create an intuitive user journey.
Designed the user interface that offered a comprehensive view of global LNG supply and demand while enabling users to drill down to specific regions and metrics.
Data Visualisation
Employed advanced data visualisation techniques to present quantitative data in a user-friendly format.
Integrated real-time data feeds to ensure users had access to the most up-to-date information.
Fig 1.1 - Persona for user of LNG platform
1.2 Design system molecules
Results and Outcomes
Collaborated closely with Shell International's highly skilled internal Experience Design team ensured the application met Shell’s strict brand guidelines.
The Figma prototype allowed stakeholders to interact with the design early in the process, facilitating a smoother development phase and faster time-to-development.
Stakeholders praised the advanced interactive components, indicating that users found the application engaging and informative.
The design system I contributed to maintained consistency and scalability, supporting the application's evolution.
Fig 1.3 - Sample screen from detailed Figma prototype
Conclusion
My contract work with Shell International on the LNG supply and demand monitoring application showcased my dedication to crafting bespoke solutions while adhering to strict brand governance. Through Figma prototypes, a robust design system and advanced interactive components, I enabled analysts and traders to make data-driven decisions in the ever-changing LNG market. This project underscores my commitment to delivering outstanding user experiences and helping clients succeed in their respective industries as an individual designer on contract.
