AI-Driven Interactive Game

Crystal F

Wanderling

A Fantasy Adventure Game Driven by AI, Offering Users an Interactive Novel-Style Journey to Explore and Mold Their Story.

Project Overview

Wanderling seamlessly blends interactive novel-style gameplay with a comic book-inspired interface, driven by natural language interaction. It combines cutting-edge artificial intelligence and interactive storytelling to create an immersive experience. Embark on an intricately woven narrative, make pivotal choices, and carve a unique path in this unparalleled gaming journey.

Problem

The client's ambitious project to pioneer a revolutionary gaming experience demanded the development of cutting-edge UX/UI designs. This task revolved around formulating designs that would have a substantial impact on the user experience and interface of the client's forthcoming game.

Solution

We reorganized the app's existing layout and introduced a contemporary presentation style for the game's UX/UI design. Our design goals encompassed:
Simple sign-in process.
Access the dashboard upon login.
Enable users to initiate gameplay seamlessly.
Allow users to finish a chapter and transition to the next chapter successfully.

DISCOVERY

Kickoff Meeting

Based on the client's detailed loom video, our main focus was to gain a deeper insight into the client's vision and objectives. My team and I initiated the discovery process by compiling a set of targeted questions.
The questionnaire highlighted the client's desire for a user experience and interface that stands out in comparison to other interactive game platforms, while still maintaining a level of simplicity and user-friendliness. We solidified roles, set clear timelines, and established expectations for the entire project duration.

User Stories

The client supplied the user stories, prioritizing them based on their mission/values, ensuring that the most crucial features were developed first.
As a user, I want to create an account and log in.
As a user, I want to access my dashboard upon login.
As a user, I want to start playing the game.
As a user, I want to complete the chapter and move into the next chapter or scene.

User Flow

Throughout the project, each team member played a crucial role in crafting unique user flows based on the client-supplied user stories. Within the team, I took on the task of crafting the fourth flow, which focused on guiding the user through completing a chapter and transitioning to the next chapter or scene within the game. I invested careful attention to ensure that this flow was transparent, streamlined, and captivating, always considering the user's viewpoint and objectives.

Wireframes

In this stage, I refined design components into a sleek wireframe for an immersive fantasy game app with a modern touch. Drawing inspiration from Assassin’s Creed, Legend: Legacy of the Dragon, and Warhammer II, I explored creative possibilities and envisioned the final look. I focused on legibility, clear visual hierarchy, and balanced contrast to simplify navigation and enhance the user experience.
Story Introduction I & II
Gameplay Screen I & II
User Choice Screen
Chapter Achievement Unlocked
Chapter Completed Screen
Checkpoint 

UI Iterations

In a collaborative effort, three out of the five designers came together to unanimously decide on presenting the client with three iterations, each showcasing a unique approach and perspective. Among these options, the first iteration was my contribution. The client selected the first iteration.

Color Exploration

I noticed that the client expressed a preference for incorporating the color blue into the style guide. When I revisited his web application, I observed that client had already implemented a blue hue in the countdown. This inspired me to delve into a range of blue shades and complementary accent colors that harmonized with both the blue tone and the overall theme of the game.

Style Guide

During the development of the style guide, the primary objective was to achieve impeccable color contrast tailored for an immersive UI, aligned precisely with our client's preferences. Our dedicated team invested significant time and effort in meticulously curating a color palette that seamlessly harmonized with the client's theme. The result was a visually striking contrast, with the captivating hues of dark blue sky and teal blue taking center stage.
To enhance the user experience, we made careful font selections. "Inter" struck the perfect balance between aesthetics and readability, while "DM Sarif" added that fantastical touch without compromising legibility. This meticulous effort ensured that users enjoyed a seamless experience, keeping them fully engaged with the game.

Hi-Fi

Ready up, team! 🎮💥
Dove deep into the hi-fi realm, and it was time to come together! I had moved past mere illustrations; it was all about expertly blending our primary and accent colors. I carefully weighed my options, figuring out just where to add that pop of accent and where to let it shine. My aim was a design that was clean and captivating, without overwhelming our players. It took a lot of brainstorming and some tough calls, but I nailed down that perfect visual balance, all based on the client's UI preferences. Just like in the mid-fi stage, I was right in the thick of it during Flow 4.

Developer Handoff

A successful collaboration between designers and developers hinged on a smooth and efficient handover process. 
Like this project

Posted Dec 11, 2023

UX Researcher & UX/UI Designer: An innovative AI-driven interactive web app fantasy game.

B2C: Mobile Application
B2C: Mobile Application
Service-Based Entrepreneur: Marketing & Digital Ads
Service-Based Entrepreneur: Marketing & Digital Ads

Join 50k+ companies and 1M+ independents

Contra Logo

© 2025 Contra.Work Inc