Case Study: Escape to an undersea paradise in “Sea Fable”

―Gamesㅤ―UIㅤ―Visual Novel

If you were offered the chance to have another life — would you take it?

Sea Fable is a narrative-centered game that follows Soup, an ordinary girl who swaps places with a mermaid princess, finding herself immersed in a world of undersea magic and palace intrigue. This multi-act visual novel weaves a whimsical adventure about escapism, friendship, and belonging.

My goal was to design interactions that created an immersive experience though the UI. As the designer, this involved creating all things interface-related and some select assets.

Tone setting and moodboards

Since its first launch at NaNoReNo 2021 game jam, Team Reverie has done a lot to develop the aesthetic and direction of Sea Fable. Its direction takes inspiration from shows like Steven Universe and She-Ra, and other visual novels, like Butterly Soup and Pizzarro. Aesthetically, the team aims to capture a simple, eastern, and whimsical art style with a playful and youthful tone, which should be reflected in the UI.

UI tends to be an afterthought when it comes to visual novels, being treated more like a utility. But I believe that UI can be used as a tool for storytelling, just like any other element of a visual novel. Games like “Tomorrow Will Be Dying” and “Missed messages”, are inspirations in that regard, having a distinct UI style that attributes to better telling their story and being more immersive. I wanted our interface to be like this as well, so I looked for opportunities where UI could be presented in unique ways.

The UI was put into 2 categories:
– Main interface components, consisting of settings and dialogue
– Unique interface components, being more specialized and novel.

Laying out the main interface

Many settings in visual novels are included by default, not necessarily because they contribute to the experience. Before delving into iterations, I audited the features typically involved in visual novels and broke down the anatomy of a visual novel’s interface.

I gave special attention to the one component I considered to be the most important, which was the text display; specifically, how text and dialogue were presented to the player. In most visual novels, text is typically stuck to the bottom 1/4th of the screen for dialogue and the center of the screen for decisions. I created speech bubbles for the dialogue and placed them into the environment, as if the characters were talking in a comic, for cohesion, as to not block the art or story of the game.

After defining what features were necessary, all that was left was to match our set aesthetic direction.

Note: all shown mock ups are not final and haven’t been completely rendered.

Unique situations require unique interfaces

Dialogue makes up the majority of interactions in a visual novel, and if not handled carefully, can be a pitfall. Many visual novels present static screens with, at best, characters simply speaking at each other, and at worst, painful walls of text to read. While this isn’t inherently wrong, there are many missed opportunities for visual novels to immerse the player into the world and, dare I say, be more game-like. I wanted to incorporate story moments that were more interactive than dialogue.

Demo

The working demo Team Reverie submitted to the NaNeReNo 2021 game jam can be played here: https://itch.io/jam/nanoreno-2021/rate/981733
While it doesn’t include any of the above designs implemented yet, you will be able to get a feel for what this game has in store for the future.