Explore Nocta

Nocta is a fictional lakeside town in the middle of Maine and acts as the setting where the events of the story unfold. It is the hero of this project, but the idea of Nocta long precedes the latest iteration.

My interest in horror literature and folklore has always impacted my approach to design, and the origins of this project are an example of that.

I created the idea of Nocta in 2021 for a class project. Then, it was a tourist attraction home to a whole host of supernatural creatures — most notably, an infamous lake monster.

Since then, I’ve developed the world of Nocta through a number of projects and classes. The setting has always been constant, but for the capstone iteration, the format and approach was harder to pin down.

Despite not knowing exactly how I wanted to tell Nocta’s story in form and content, I had a very firm vision for the visual design of the project from the start.

My goal with the branding was to evoke a somber, historical atmosphere and create moments of visual tension using some of the same ideas that storytellers use in other mediums like film and fiction.

In Horror Film Aesthetics: Creating the Visual Language of Fear, Thomas M. Sipos uses Suspiria as an example of how filmmakers create visual unease. “Suspiria’s colors threaten because they are unnatural. Too bright, too vivd, too many of them...Yet our conscious, rational minds don’t understand why the colors are so unsettling.”

He goes on to discuss that the mise-en-scène of the film contributes to this tension — the details of the film turn its vibrancy acrid. This is the approach I wanted to take with Explore Nocta. I wanted to create subtle, looming unease with the design.

As an example, the choices I made with type and illustration were in service of this idea.

In site’s the primary typeface Eidetic Neo, capital and lowercase letters share the same x-height. This unusual type feature gives words an undetectable uncanniness that help contribute to the overall atmosphere.

The illustration style is inspired by real folk art — rendered in a unpolished style that reveals the human hand behind it. Deliberately revealing the existence of an author in the illustrations, encourages users to feel watched by whoever that author may be.

The illustration style is inspired by real folk art — rendered in a unpolished style that reveals the human hand behind it. Deliberately revealing the existence of an author in the illustrations, encourages users to feel watched by whoever that author may be.

I had an idea where I wanted the story of Nocta to come from — originally it was very character driven with supernatural creatures that would act as stand-ins for real life counterparts from folklore. I had all the stories of the town and its characters in my head, but I didn’t know how I wanted to tell those stories.

Originally, the characters were to be featured heavily in the visuals of the site — acting as the heroes of the story. But that focus did feel griping enough. I needed an approach that would make users want to learn more, rather than simply giving them all the information up front.

I considered making the site a compendium of characters, an interactive visitor’s guide, and even a quiz before I finally decided that a game was the perfect format to tell Nocta’s story.

Once I knew that I was making a puzzle game, creating the content map of clues and story plot points was critical. I set up a flowchart in Figma that I’ve used throughout the project to track what connects between the different areas of the site and how the story unfolds with exploration.

This format allowed me to incorporate a lot of the original ideas I had about who the characters in the game were, but leaving out all the details so users can use their own imaginations about some of the town’s lore.

I knew that the site would need a robust javascript structure if I wanted to have complex puzzle logic included in the game, but I also wanted the web design to feel harmonious with the overall branding.

Because of that, I created the site using the Vue.js router framework — allowing for elegant transitions, clean data management, and single-page app functionality.

After building out the base CSS styles and file structure, my core focus was on the functionality of the puzzles and the interconnectivity of the world.

The core of the site occurs in modules that pop up when the user makes certain decisions. Because of this, I wanted to be efficient in the way I coded the modules, which would be fairly similar in structure, just with different content.

Because of this, I used Vue’s component functionality to create a modular, reusable modal component that could adapt to various formats depending on the content. It allowed me to use the same v-slot functionality whether I needed a large image modal or a content-only modal.

The site’s functionality is ultimately simple, though it took a lot of iterations to refine the system as it is now. In its final form, the site functions almost entirely on v-if and v-slot -based props and emits.

At the midpoint of the semester, I created a demo of the site that I could send out for user testing and feedback to get reactions from my potential user group. Though it proved challenging to get feedback from my target audience on community sites for indie games, I received some very valuable feedback from users that I reached out to.

Users were able to point out positives of the site — including the design and atmosphere. I heard that the sound design was particularly impactful. This was something I was actively interested in hearing about as I had implemented some extra sound cues into the demo that I wanted to get user reactions on. Hearing that the sound really added to the overall experience, I ended up including even more sound cues in the rest of the site.

Users were also able to help with polish and logic. A subject-matter expert pointed out that I should carefully consider the words I’m using in user choices and make sure that I’m avoiding overuse of words like ‘inspect’ or ‘explore’. Users also found a handful of bugs and puzzle logic inconsistencies that helped me think more deeply about the unique ways different users could use the site. I’ve also implemented the ability to report bugs on the full version of the site in case there’s any further issues.