Back to Ocean Kingdom

Color would play a substantial role in the UI’s development. But other considerations had to be made for the noisiness of decorated reefs with a variety of fish, where organic shapes took on little to no straight lines. Time was of the essence for my deliverables to meet their milestones.

I aimed to achieve a Heads-Up Display that would complement the game without grandstand or reduction. It was important to maintain a unified balance between the interface and the game environment. Then, to make the game as a whole stand out from similar titles, I applied as great a detail to the HUD as the artist had in crafting the fish, decorations, and backgrounds.

For the interface elements, I used geometric shapes with straight, clean lines (to contrast the organic nature of the artist’s work) then developed a second color palette that would complement the entire HUD.

Ocean Kingdom - Color palette

Using the game design documentation, I created wireframes for all interfaces and dialogues.

Ocean Kingdom - Wireframes
Ocean Kingdom - Wireframes In-game store

For all labels and text, I chose a typeface that felt approachable and soft similar to the impression of water, yet playful and fun. The FF Cocon by Dutch type designer Evert Bloemsma supported a variety of font weights, satisfied different language localization requirements, and came optimized for web browsers. The elegant curves of FF Cocon are smooth with wavelike dynamics. The font worked perfectly for large and small text.

Cocon

I crafted icons for the toolbar …

Ocean Kingdom - Tool Icons concepts

… and iterated through variations to get to the right representation…

Ocean Kingdom - Tool icons wip

In my efforts to strike a good balance with the Heads Up Display, every designed element was tested in the context of how they would appear in the game. I relied on efficient use of space for hover states of tools, with my main focus on the position and visibility of elements and overall layout.

Ocean Kingdom - Toolbar button states

The decoration panel I created offers players a variety of settings. One can adjust the appearance and tints of reef decorations for color richness and depth, move elements forward or back, and modify their size.

Additional options include the ability to rotate elements by using a centralized button and mirror elements along a vertical line. Users access these features through tabs on top and apply degrees of these functions with sliders. Three panels have their own icons to guide users with the direction they can change an element.

Lastly, players have the ability to sell items they no longer want in exchange for coins.

Ocean Kingdom - Decoration control panel concept

I iterated all the elements I created while developing the UI, including the design of the strata bar. The strata bar allows players to navigate deeper into a reef. The colors on the left half of the strata bar indicate depth levels (the darker the color, the deeper the strata). Strata are unlocked throughout the game’s progression. Once unlocked, colors on the right half of the strata bar appear in lighter tones. Yellow highlights the particular stratum a player is using. Throughout the game, strata are highlighted in red with a floating “strata alert” to warn players they must visit the strata to complete tasks.

A pearl-like object moves a slider to navigate the strata’s, and will always snap in the vertical center of each strata segment on the bar. Alternatively, one can navigate strata’s with use of arrow buttons located on the top and bottom of the strata bar.

Ocean Kingdom - Strata concepts

I created several of the game’s cursors that interact with objects and remain visible in the game during movement and through the visual noise of the decorated reefs. The cursor used also gives a visual cue to players when an element that would normally be interactive isn’t available.

Ocean Kingdom - variations - wip

For the gamification mechanisms which kept players engaged, I produced the adventure log to keep track of all activities, such as cleaning reefs, holding multiple fish of any one type, and nurturing the reefs and fish of “buddys”. By completing activities players earn medals, unlock items, and receive in-game currency.

Ocean Kingdom - Achievement medals - concept

In the adventure log, players keep track of their accomplishments.

Ocean Kingdom - Achievement window

A tray located underneath the toolbar allows users to interact with buddys. Once a player visits a friend’s reef, the tray can expand to show all available options for interaction.

Ocean Kingdom - Friend Reef tools and navigation

Within the tray, players can feed their friends’ fish, send gifts, give kudos for well-decorated reefs, message each other, and add new buddies.

Ocean Kingdom - Virality Tray icon alternatives - wip

When players reach higher levels, a dialogue usually appears and allows them to post their achievements directly to their Facebook wall. Below are several concepts and their variations.

Ocean Kingdom - News feed icons

Ocean Kingdom - Purchase currencies - wip
Ocean Kingdom - Ad integration for currencies - wip