Piper Alpha
User interface design
UI designer
2025
Piper Alpha is a case study that reimagines the role of design in documenting one of history’s deadliest offshore disasters. By using storytelling, interface design, and visual communication, it explores how digital tools can preserve memory, convey lessons learned, and build awareness for safer futures.
Problem Statement
The Piper Alpha disaster remains one of the most significant offshore tragedies, but existing educational materials often feel static and fail to convey the urgency and human impact of the event. There was a need for an immersive and engaging medium to communicate the story, highlight safety lessons, and create stronger awareness for disaster preparedness.
User Needs
Easy navigation across simulations.
Clear feedback and guidance.
Flexible controls (pause, exit, restart).
Quick access to performance results.
Design Response
Design a human-centered UI that guides users through the story intuitively.
Creating clear, accessible interaction patterns suited for VR, and ensured that the emotional depth of the narrative was supported by a simple, distraction-free interface.
Balanced impactful storytelling with intuitive usability to avoid overwhelming users.
User flow
I then created a detailed user flow to define how users would navigate from one part of the experience to another. This allowed me to simplify complex transitions, minimize cognitive load, and ensure the narrative unfolded seamlessly without breaking immersion.
UI Design Approach
My UI design approach focused on creating a balance between immersion and usability. I designed a minimal, human-centered interface that guided users without disrupting the storytelling. By keeping interactions simple, providing contextual prompts, and ensuring accessibility within a VR environment
Colors
Primary Blue
#BBE5EB
100%
80%
20%
Usage
Used in primary buttons, and call-to-action elements.
Provides highlighting for critical actions (e.g., Login, Start Simulation, Submit).
Transparency (80% / 50%) applied in hover states and accent highlights.
Neutral White
#FBFAFF
100%
80%
20%
Usage
Used for backgrounds, form fields, and neutral containers.
Ensures readability and contrast for dark text/icons.
Softer variations (80%, 50%) applied to disabled states, dividers, or secondary elements.
Navy Blue
#1B283A
100%
80%
20%
Usage
Provides contrast against lighter CTAs.
Works as a neutral color for text and icons.
Variants (80%, 50%) used for gradients or layered depth.
Neutral White
#000000
100%
80%
20%
Usage
Used for primary text, icons, and high-contrast elements.
Adds legibility and structure on lighter backgrounds.
Opacity variants (90%, 50%) used for secondary text, placeholder text, and subtle outlines.
Red - Danger - #F64C4C
Yellow - Warning - #F64C4C
Green - safe - #03E493
Buttons
Primary
Pressed
Disabled
Default
Secondary
Default
Pressed
Disabled
Tertiary
Default
Disabled
Pressed
Icons
Tab bar
Login & Onboarding
Designed a simple and distraction-free login flow to get users into the experience quickly.
Clear CTAs and high-contrast text ensure readability inside the VR headset.
Minimal steps reduce friction and avoid breaking immersion at the very start.
Onboarding
Piper Alpha
An immersive simulation of the events leading to the Piper Alpha tragedy.
Signup
Already have an account?
Login
Signup to continue!
Enter Your Email
create Password
Confirm Password
Create Account
Already have an account?
Login
Login to continue!
Enter your email
Password
Remember me
Forgot password?
Login
don’t have an account?
signup
Password recovery flow
Login to continue!
Enter your email
Password
Remember me
Forgot password?
Login
don’t have an account?
signup
Forgot Password?
Enter your email
Submit
A reset link will be sent to your mail shortly,
click here if you didn’t receive the mail
Forgot Password?
New password
Confirm Password
Reset Password
Login
Dashboard & Navigation
Created a central hub (dashboard) that gives users access to training modules, settings and activity status.
Used layered panels with transparent backgrounds to maintain context with the VR environment.
Prioritized legibility by using large, accessible typography and iconography suited for VR viewing.
Interaction patterns were simplified to ensure ease of use with VR controllers.
Chapter 1: Introduction to Piper Alpha
Start simulation
Chapters
Reports
6/10
Chapters Completed
87.5%
Pass rate
45 min
Avg time spent
79 points
Total score
Notification
Mark as read
Today
You’ve completed 70% of the simulation. Continue your journey.
System & VR Tips: New navigation feature added: Quick return to Home screen.
Training Achievements: Congratulations! You’ve completed the Evacuation Protocols module."
Yesterday
Course completion Report
6/10
Chapters Completed
87.5%
Pass rate
45 min
Avg time spent
79 points
Total score
Chapter Progress
Total Score
Time Left
Chapter 1 : Introduction to Piper Alpha
Chapter 2 : Arrival on Piper Alpha
Chapter 3 : Maintanance room
0/100
0/100
79/100
27 min
55 min
55 min
Download report
VR Environment UI
Integrated lightweight UI elements into the 3D environment without overwhelming the narrative.
Contextual prompts and floating action buttons guide users while keeping focus on the story.
Designed warning and alert states that balance emotional impact with clarity of instruction.
Ensured consistency in placement and scale, so the UI adapts naturally to user movements.
Exit
Designated space for voice over subtitles
Exit
Designated space for AI voice over subtitles
Gas condensate leak
Evacuate Now
Raise Alarm
Exit
Designated space for voice over subtitles
User Personas
The Frontline Port Worker
Attributes: 30 years old, dockside operator, hands-on, practical, prefers clear instructions.
Pain Points:
Finds safety manuals and paperwork overwhelming.
Needs training that feels realistic and easy to remember.
Gets easily distracted in classroom-style training.
The Safety Supervisor
Attributes: 40 years old, responsible for port worker safety, values compliance, focused on reducing incidents.
Pain Points:
Hard to ensure every worker retains safety training.
Traditional drills don’t replicate real stress scenarios.
Needs tools to evaluate worker performance under pressure.
Piper Alpha
User interface design
UI designer
2025
Piper Alpha is a case study that reimagines the role of design in documenting one of history’s deadliest offshore disasters. By using storytelling, interface design, and visual communication, it explores how digital tools can preserve memory, convey lessons learned, and build awareness for safer futures.
Problem Statement
The Piper Alpha disaster remains one of the most significant offshore tragedies, but existing educational materials often feel static and fail to convey the urgency and human impact of the event. There was a need for an immersive and engaging medium to communicate the story, highlight safety lessons, and create stronger awareness for disaster preparedness.
User Needs
Easy navigation across simulations.
Clear feedback and guidance.
Flexible controls (pause, exit, restart).
Quick access to performance results.
User flow
I then created a detailed user flow to define how users would navigate from one part of the experience to another. This allowed me to simplify complex transitions, minimize cognitive load, and ensure the narrative unfolded seamlessly without breaking immersion.
UI Design Approach
My UI design approach focused on creating a balance between immersion and usability. I designed a minimal, human-centered interface that guided users without disrupting the storytelling. By keeping interactions simple, providing contextual prompts, and ensuring accessibility within a VR environment
Colors
Primary Blue
#BBE5EB
100%
80%
20%
Usage
Used in primary buttons, and call-to-action elements.
Provides highlighting for critical actions (e.g., Login, Start Simulation, Submit).
Transparency (80% / 50%) applied in hover states and accent highlights.
Navy Blue
#1B283A
100%
80%
20%
Usage
Provides contrast against lighter CTAs.
Works as a neutral color for text and icons.
Variants (80%, 50%) used for gradients or layered depth.
Neutral White
#FBFAFF
100%
80%
20%
Usage
Used for backgrounds, form fields, and neutral containers.
Ensures readability and contrast for dark text/icons.
Softer variations (80%, 50%) applied to disabled states, dividers, or secondary elements.
Neutral White
#000000
100%
80%
20%
Usage
Used for primary text, icons, and high-contrast elements.
Adds legibility and structure on lighter backgrounds.
Opacity variants (90%, 50%) used for secondary text, placeholder text, and subtle outlines.
Tab Bars
Buttons
Primary
Pressed
Disabled
Default
Secondary
Default
Pressed
Disabled
Tertiary
Default
Disabled
Pressed
Login & Onboarding
Designed a simple and distraction-free login flow to get users into the experience quickly.
Clear CTAs and high-contrast text ensure readability inside the VR headset.
Minimal steps reduce friction and avoid breaking immersion at the very start.
Onboarding
Piper Alpha
An immersive simulation of the events leading to the Piper Alpha tragedy.
Signup
Already have an account?
Login
Signup to continue!
Enter Your Email
create Password
Confirm Password
Create Account
Already have an account?
Login
Login to continue!
Enter your email
Password
Remember me
Forgot password?
Login
don’t have an account?
signup
Password Recovery
Forgot Password?
New password
Confirm Password
Reset Password
Login
Login to continue!
Enter your email
Password
Remember me
Forgot password?
Login
don’t have an account?
signup
Forgot Password?
Enter your email
Submit
A reset link will be sent to your mail shortly,
click here if you didn’t receive the mail
Dashboard & Navigation
Created a central hub (dashboard) that gives users access to training modules, settings and activity status.
Used layered panels with transparent backgrounds to maintain context with the VR environment.
Prioritized legibility by using large, accessible typography and iconography suited for VR viewing.
Interaction patterns were simplified to ensure ease of use with VR controllers.
Chapter 1: Introduction to Piper Alpha
Start simulation
Chapters
Reports
6/10
Chapters Completed
87.5%
Pass rate
45 min
Avg time spent
79 points
Total score
Notification
Mark as read
Today
You’ve completed 70% of the simulation. Continue your journey.
System & VR Tips: New navigation feature added: Quick return to Home screen.
Training Achievements: Congratulations! You’ve completed the Evacuation Protocols module."
Yesterday
Course completion Report
6/10
Chapters Completed
87.5%
Pass rate
45 min
Avg time spent
79 points
Total score
Chapter Progress
Total Score
Time Left
Chapter 1 : Introduction to Piper Alpha
Chapter 2 : Arrival on Piper Alpha
Chapter 3 : Maintanance room
0/100
0/100
79/100
27 min
55 min
55 min
Download report
VR Environment UI
Integrated lightweight UI elements into the 3D environment without overwhelming the narrative.
Contextual prompts and floating action buttons guide users while keeping focus on the story.
Designed warning and alert states that balance emotional impact with clarity of instruction.
Ensured consistency in placement and scale, so the UI adapts naturally to user movements.
Exit
Designated space for voice over subtitles
Exit
Designated space for AI voice over subtitles
Gas condensate leak
Evacuate Now
Raise Alarm
Exit
Designated space for voice over subtitles
User Personas
The Safety Supervisor
Attributes: 40 years old, responsible for port worker safety, values compliance, focused on reducing incidents.
Pain Points:
Hard to ensure every worker retains safety training.
Traditional drills don’t replicate real stress scenarios.
Needs tools to evaluate worker performance under pressure.
The Frontline Port Worker
Attributes: 30 years old, dockside operator, hands-on, practical, prefers clear instructions.
Pain Points:
Finds safety manuals and paperwork overwhelming.
Needs training that feels realistic and easy to remember.
Gets easily distracted in classroom-style training.
Design Response
Design a human-centered UI that guides users through the story intuitively.
Creating clear, accessible interaction patterns suited for VR, and ensured that the emotional depth of the narrative was supported by a simple, distraction-free interface.
Balanced impactful storytelling with intuitive usability to avoid overwhelming users.