top of page
sab_head.png

ABOUT

PROJECT OVERVIEW

Skull and Bones is a multiplayer action-adventure, set in the late 17th century during the Golden Age of Piracy in the Indian Ocean. Players take on the role of a pirate captain and can customize their own pirate ships, engage in naval battles alone or in a team and explore a vast open world.

Studio: Ubisoft Singapore

Year: 2020-2023

Platforms: PC, Console

Link:

MY ROLE

Senior UX Designer

I joined the project midway through development, where my responsibilities included designing the core features of the game, building an assets library, participating in the UX Grad program, mentoring and managing junior designers, and more.

FEATURES

I was responsible for the following features: HUD, Infamy (progression), AI readability, Spyglass, Death loop, Notification system, and Tutorials/Onboarding. I'll be showing some of the features and the changes that happened during development and after playtests. 

HUD

The HUD was the most significant and intriguing feature I worked on. When I first started, the HUD lacked any structure, zoning, or documentation. Consequently, I had to delve into numerous old game design documents to grasp the underlying mechanics of the widgets. The amount of information we needed to display on the HUD was overwhelming. My primary objective was to initially organize the existing widgets and then overhaul the entire design to enhance readability for the player.

I decided to include every possible element that could be displayed on the screen and began zoning it accordingly. And after numerous iterations, it started to resemble this:

HUD_Zoning.png

And this is how it looked in reality:

Pretty wild, ha? However, this isn't what the player sees most of the time, and they definitely won't see everything all at once. This is how the average player's HUD would look:  

Next, I will demonstrate how some of the HUD widgets changed and explain the reasons behind these changes.

Player Info widget

The Player Info widget reflects various information about the player, including health, morale, status effects, group status, and food buffs. Below, I'll showcase the main versions we had, although there were many more intermediate iterations

pi1.png
Version 1
pi2.png
Verion 2
pi3.png
Verion 3
pi4.png
Final version

VERSION 1

The player had four main metrics: health, crew morale, food, and water. The latter two decreased over time. Status effects were displayed on the gauges.

VERSION 2

The design removed food and water as individual mechanics and integrated them into morale, resulting in the removal of their gauges. Status effects such as fire, sails breaking, etc., food buffs and player's infamy were introduced.

VERSION 3

Incorporating a multiplayer aspect, icons for speakers and group leaders were added. The UX for status effects was revamped: damage now accumulates and the gauge fills before gradually decreasing, enhancing readability. Cargo was represented as a horizontal bar to accommodate the introduction of soft/hard limits, making it easier to understand. 

FINAL VERSION

Player Infamy was substituted with ship level for better comparison between the player's ship and enemies. Cargo was relocated to the bottom left of the screen to be closer to the speed widget. Food buffs were redesigned as squares to differentiate them from status effects.

The widget underwent significant changes primarily due to shifts in design and the introduction of new metrics. Altering the UX of status effects and food buffs notably improved readability, helping players better grasp the intricate mechanics.

Sails/speed widget

The widget underwent substantial changes as a result of design alterations. Initially, steering the ship resembled more of a ship simulator, allowing players to control the sails and turn the ship. However, this mechanic was later removed due to its difficulty and lack of enjoyment for players. I merged two widgets into one. Trimming remained a factor; over-trimming could result in sails breaking. In later versions, the sails breaking mechanic was eliminated, so I had to simplify the widget as much as possible.

sails1.png

VERSION 1

One of the first versions was a combination of two widgets: steering the boat and the sail ("gear") widget. Larger ships had three sail states, while smaller ones had two. Players could trim the sails using the L1/R1 controllers.

Version 1
gif.gif

VERSION 2

Since the steering mechanic was removed but overtrimming mechanic was introduced instead, I created a version that combined speed, sails, and trimming. In this version, the rope filled up and trembled when the player trimmed the sails.

Version 2
sails3.png

FINAL VERSION

Trimming mechanic was replaced with boosting (still called trimmimg tho) the speed, necessitating the removal of the rope and simplifying the widget as much as possible. However, I retained the sails states, speed, and wind direction.

Final version

Final version widget states:

Sails_states.png

After numerous iterations, we succeeded in creating a small, simple widget that combines all the necessary data for steering the ship: wind direction, sails state, and speed.

[More content to be added soon]

RESULTS

After numerous delays and extensive rework, the project is finally live! I couldn't be happier about it. It was the most challenging and exciting project I've ever worked on. Many features were developed from scratch, while others were redone multiple times. Some mechanics were changed last minute, requiring us to make efficient UX changes accordingly. And let's not lie, it's incredibly gratifying to see your name in the credits :)

credits.png
bottom of page