AI-Driven Interactive Game

Crystal F

UX Designer
UI Designer
Adobe Creative Suite
Figma

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 brings together cutting-edge artificial intelligence and interactive storytelling for 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 will wield 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 successfully finish a chapter and transition to the next chapter.

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 that stage, I harmonized different design components to form a sleek wireframe to create an immersive fantasy game app design while preserving a modern touch. I explored various possibilities, and I drew inspiration from games like Assassin's Creed, Legend: Legacy of the Dragon, and Warhammer II, using them as references for innovative design ideas and envisioning the final gaming app's appearance. I prioritized legibility and established a clear visual hierarchy with well-calibrated contrast, simplifying navigation for an optimal 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. 
Partner With Crystal
View Services

More Projects by Crystal