Dark Circus: Delirium is a fictional game that draws inspiration from mascot horror survival games, infused with a sci-fi and circus-themed twist. Developed as part of a UX/UI Design for Video Games course led by Stephan Dube, this project involved market research, defining player archetypes, mapping, wireframing, creating a comprehensive style guide, and building an interactive prototype using Figma.
The game begins on a rainy night as David drives along winding mountain roads with his sleeping sister, Tessa, in the back seat. A sudden figure startles David, causing him to swerve off the road and crash through the guardrails, plummeting into a dense forest below. David is knocked unconscious.
He awakens disoriented in a dusty, partially ruined bedroom. There, he meets "Doll," a sentient robot ballerina who explains that both he and Tessa were rescued from the wreckage and brought to this mysterious place. Upon realizing Tessa is safe and playing nearby, David is briefly reassured.
Suddenly, a commotion from another room draws their attention. "Doll" rushes to investigate, leaving David alone. From the open door, he witnesses "Doll" confronting an unseen presence. Trembling in fear, Tessa is unexpectedly taken away, and "Doll" gives chase.
David explores the room and discovers a Communicator, which allows him to stay in touch with "Doll," access maps, and uncover clues about their surroundings. Now, David must navigate the perilous landscape, evade hostile robots, solve puzzles, and uncover the dark secrets of this enigmatic realm in his quest to rescue Tessa.
In designing a video game concept, I start with a detailed Game Design Document (GDD) that outlines gameplay mechanics, narrative, UI, and accessibility features. This document acts as a clear roadmap, ensuring that every design decision aligns with the user experience goals. By refining the GDD through research, prototyping, and user testing, I create a focused guide that helps bring a cohesive and engaging player experience to life.
As a designer, one of my primary focuses is ensuring accessibility in both overall gameplay and visual UI design. These personas were created not only to cater to the general target audience but also to include individuals with disabilities.
During the process of identifying core user stories, I concentrated on key areas like the start menu options, starting and loading the game, and adjusting settings to accommodate users' gameplay preferences. By focusing on these critical aspects, I ensured that the user experience was intuitive and tailored to individual player needs, making it easier for users to engage with the game and customize their experience from the outset. This approach helped prioritize features that directly impact player satisfaction and overall gameplay.
To keep the project within scope, I focused on two crucial flows: 'Start the Game,' which includes the sub-flows of 'New Player' and 'Returning Player,' and 'Player Setting Up Subtitle Display.' This approach also incorporated various scalable page archetypes.
After determining my focus, I began sketching ideas and drawing inspiration. This included mascots, characters, UI elements, icons, and notes on their usage, all of which play a crucial role in the story.
After initial ideation of wireframes and UI aesthetics through sketches, I progressed to developing a series of Lo-Fi wireframes. These underwent iterative refinement to evolve into Med-Fi wireframes, adhering to UX/UI best practices and informed by research into comparable products available on the market.
After creating the Lo-Fi and Med-Fi screens, I conducted three moderated usability tests both virtually and in-person. This included participants with accessibility issues to ensure they were representative of the personas previously developed.
Questions were developed based on the user flows specified at the beginning of this project.
Questions Asked
Please show me how you would start to play the game for the first time.
You have previously played this game. How would you pull up your game file?
You require some aid for your gameplay. How would you add subtitles to game dialogue?
Overall, all three participants were able to navigate the Front End menu options without issues. However, they suggested updating certain microcopy and visual elements to reduce potential confusion. Such as:
“Press X to continue”
Problem: The word, “continue” may be a little confusing. Is the player continuing the previously saved game automatically, or are they continuing to a new screen.
Solution: Replace the word, “continue” with other terminology such as “proceed”.
Difficulty levels: Clown / Jester
Problem: Hard to associate the different difficulty levels for “Clown” and “Jester” because they are not perceived/understood as two different things and typically think they are the same or too similar.
Solution: Ideate other circus related terminology that can be more relatable and contrast enough to show the difference in gameplay difficulties.
Difficulty levels: Stars
Problem: Takes a little bit to understand what the stars means.
Solution: Ideate other ways of displaying visually the difficulty levels such as layout redesign.
To create a cohesive visual aesthetic that aligns with the overall gameplay and mood, and to ensure a balance between accessibility and aesthetic integrity, I studied other products with similar styles and themes to guide the design direction.
At the beginning of the project, I aimed to create a logo with a gothic and horror-focused design to evoke a "horror circus" vibe. However, as the concept developed, it became clear that the original logo did not effectively convey the elements of "cyber," "digital," and "AI," which are crucial to the game's plot. As a result, I decided to scrap the initial design and start over. In the final version, I focused on incorporating both "circus" and "cyber" elements through font choices, while the color scheme reflected the "horror" and "digital" aspects.
After extensive research on visual assets in similarly themed products, retro circus posters, and sci-fi movie posters, I engaged in an ideation process to sketch possible iconography. I also conducted typographical and color exploration to establish the appropriate tone for the project.
While exploring the aesthetics, I continuously ideated and refined high-fidelity screen mockups to accurately reflect the latest design choices based on research findings and to evaluate the overall user experience.
Leveraging Figma's prototyping tool and my expertise in animation and motion design, I crafted a series of animated sequences and visual effects to closely replicate the final product's visuals. Each sequence in the prototype was meticulously created by adjusting and fine-tuning the smart animations of individual components to mimic an actual animation sequence.
After refining the screens related to the focused user stories to resemble the final product, I used Figma to create an interactive prototype. This prototype mimics the intended actions, animations, and interactive flow of the fully developed version, serving as a reference point for the engineering teams and stakeholder review.
Please note: Although this game was developed with intention that it will be played on a PlayStation 5 console, the prototype is setup to be responsive with mouse and keyboard arrows for convenience of reviewers.
This project was my first dive into UX/UI design for console video games, and it was such an exciting challenge! Until now, I've been working on digital products like lifestyle improvement apps, e-commerce websites, and simplified online RPG games. Designing HUDs and really thinking through UI elements to fit the game's brand was a fresh experience, quite different from the broader, more generalized approach to UI and icon design in apps and websites. Both prioritize usability and brand aesthetics, but in wonderfully unique ways. This contrast truly sparked my creativity and let me add a bit of my own flair to the work.
I'm thrilled to take this project even further by teaming up with a local indie developer to turn it into a full-fledged game. I can’t wait to dive into more aspects of the project and see it come to life!
Thank you for viewing my Dark Circus: Delirium project!
Click below to view other projects.
