The Ouroboros Express - Game UX/UI
As the Lead UX Designer and UI Artist; on a team of over 40 people; for "The Ouroboros Express," a cosmic Eldritch horror dating sim and visual novel built via the Ren’Py game engine, my goal was to create a unique art deco style while also incorporating accessibility into the player experience. The Ouroboros Express is now on Steam and has 89% positive reviews.
Role
Lead UX Designer, UI Artist
Timeline
9 months, 2024
Core Responsibilities
UX Design, UI Design, Accessibility, Cross-functional Collaboration
Design Challenges and Vision
Unifying Design with Accessibility
When I first joined the team as the sole UX/UI Designer, the original art direction was geared toward steampunk. After several meetings, I was tasked with marrying the intricate art deco aesthetic with the game's theme of cosmic horror, and the vision was clear: create an immersive UI that would not only captivate players with its elegance but also ensure inclusivity and ease of use.
Research and Inspiration
How do you create upscale cosmic horror vibes?
My inspiration stemmed from a variety of sources, capturing the essence of the 1920s Art Deco style while keeping modern usability standards in mind. I looked at:
"The Great Gatsby" for its cinematic lavishness.
"Bioshock 1-2" for its submerged art deco dystopia.
"Prey" and "Close To The Sun" for their mysterious luxury.
"Murder on the Orient Express" as a blueprint for UI elegance.
UI Component Design
The UI components I crafted were meticulously designed to mirror the game's mood and story progressions
Full Attraction Meter
Empty Attraction Meter
Attraction Meter: This dynamic element captures the player's interactions with potential romantic interests, using Art Deco patterns to frame the progress bar.
Full Decay Meter
Empty Decay Meter
Decay Meter: Symbolizing the game's descent into chaos, this meter incorporated spiraling art deco motifs that degraded in intricacy as the game progressed, hinting at the looming cosmic decay.
Attraction Nameplate
Decay Nameplate
Journal Meter Nameplates: Reflecting the grandeur of the era, the nameplates were ornate yet simplistic, using classic typefaces and embellishments to denote character importance. Different nameplates were needed for both the Attraction Meter and the Decay Meter.
Art Deco Elements: Throughout the UI, geometric patterns and lavish ornamentation inherent to the art deco style were employed, ensuring a visually rich interface that echoed the grandiosity of the game's setting.
Journal: Serving as the player's narrative anchor, the journal interface was styled as a period-appropriate diary, complete with typographic headers and gilded accents.
Spirals for Time Changes: To indicate shifts in time between significant narrative moments, when the player goes through the stages of Denial, Anger, Bargaining, Depression, and Acceptance.
Button and Character Nameplate Style: Designed with geometric shapes and gold trims, the buttons maintained a classic look while clearly indicating interactivity.
Bottom Navigation: As this was a game intended for PC and Mac, the bottom navigation bar was essential. It was designed to be unobtrusive yet accessible, featuring sleek art deco styling and a layout that complemented the narrative and visual flow of the game.
UI Design Process
Art Deco Style Color Palette
The palette balanced Art Deco aesthetics with functionality:
Dialogue/Character Box – Brown gradient: Added depth and readability.
Gold Lines/Snake – #D0BC95: Elegant accents for navigation.
Buttons – Dark Gray (#2E2A24): Highlighted interactivity.
Text – White (#FFFFFF): High contrast for legibility.
Journal Bar & Attraction Meter – #660E4F / #BD4E6F: Visualized progress.
Decay Meter – #487061: Indicated negative progression.
UI Design Process
Art Deco Style Typography
Typography reflected the game’s era and mood:
Settings Font – Kaisei Decol (16pt): Clean and legible for seamless navigation.
Journal Font – Slimamif Bold (20pt): Modern, art deco-inspired style for journal entries.
Dialogue & Character Names – Kaisei Decol (20pt/24pt): Readable and smooth for interactions.
Title Menu & Train Map Copy – Lato (36pt/40pt): Clear and contemporary for navigation.
Train Map Title – Limelight (64pt): Elegant and prominent for emphasis.
UX Design Process
Wireframes
Each wireframe, from the title menu to the dialogue options, showcases a minimalist aesthetic that adheres to the engine's capabilities while striving for a user-friendly experience.
The wireframes were designed for clarity, ease of navigation, and immersion. The title menu emphasizes simplicity, leveraging Ren'Py’s text-based menus for seamless interaction. The pause menu uses a grid layout to ensure quick access to settings, while character and dialogue boxes prioritize readability and focus, maintaining immersion without distractions.
The wireframes were designed to maximize Ren'Py's strengths in visual and text elements while working within its limitations. Prioritizing function, each element supports an intuitive interface that complements the storytelling focus of The Ouroboros Express.
UX Design Process
Accessibility
Colorblind accessibility was carefully considered through high-contrast color choices and distinct visual cues to ensure clarity and usability.
Results
Over 50% of our target audience downloaded the early access version of the game at launch and over 70% saved it to their wishlist! Upon launch on Steam, we received 89% positive reviews!
Reflection
The UI was not just a navigation tool but a narrative device that enriched the storytelling. The project underscored the importance of thematic research, iterative design, and the seamless marriage of artistic styles with user experience principles.
This project really showed me how much a thoughtful visual strategy can shape an immersive, inclusive game world. The Ouroboros Express is a perfect example of what happens when artistic vision meets a true commitment to accessibility. It’s not just a game; it’s an open invitation into a world that’s rich, mysterious, and welcoming to everyone, pulling players right into the heart of its story.