Enter the world of Wanderling, where AI meets interactive storytelling. This B2C online game combines the magic of interactive fiction with advanced AI, letting players shape their own destiny through a richly crafted narrative.
Experience endless possibilities in this unique gaming adventure!
Wanderling's AI system is nearly complete, but the client needed a team to refine brand aesthetics, visual hierarchy, and gameplay-oriented UX design before the beta launch.
We developed Wanderling's brand aesthetics and created an inclusive Style Guide and Design System, aligning with the Fantasy game theme and prioritizing usability for optimal gameplay.
.png)
.png)
.png)
In our kickoff meeting, we eagerly assessed the game's development status, seeking clarity on existing visual assets and any AI-generated visuals that could guide our design. We also began market research on similar products in gameplay, theme, and target demographics.
To ensure a user-centric design and achieve the desired visual aesthetics, we prepared follow-up questions to better understand the client’s expectations for the game's visuals and overall experience.
During our discovery phase, we identified key UX considerations:
These considerations will guide our UX design to meet the needs of fantasy game enthusiasts.
To better understand our client's expectations, we conducted a follow-up Q&A, which clarified key design directions:
To gain insights for our client's product development, we conducted a thorough competitor analysis, focusing on key products: Dungeons & Dragons, Forgotten, Itch.io, Twine, and Ren'Py. Despite the challenge of identifying additional similar games due to the high volume of fantasy titles, our analysis provided valuable insights for design.
These considerations will guide our UX design to meet the needs of fantasy game enthusiasts.
Our team received a collection of User Stories from the client, which were intended to serve as the cornerstone and essential components of the online game, in alignment with user-centered design principles:
After understanding the prioritized user stories, our team developed detailed User Flows for all four key scenarios. We designed the login and account creation flows to be simple and intuitive, while the gameplay interaction flows were crafted to be dynamic and immersive, reflecting the product’s user experience principles.
I specifically focused on the user flow for "starting the game," addressing the needs of both new users and those continuing from saved progress. This approach ensured a seamless and personalized experience for both user segments.
At the project's start, the client provided a broad vision for Wanderling and was open to exploring various design concepts. They preferred elements from Osnaria and Sound of the Storm and liked the scroll-down navigation style of Apple Vision Pro, while stressing a clean and thoughtful UI for gameplay.
With flexibility in shaping the brand’s aesthetics, I conducted extensive research across online video game platforms for design inspiration, focusing on:
Designing for Game Start: Handling Save Files and Avatar Creation
After conducting a competitive analysis and understanding Wanderling's core user needs, our team created low-fidelity (lo-fi) and medium-fidelity (med-fi) wireframes to establish the basic screen layouts, each assigned to specific user stories.
I focused on wireframes for the user story: "As a user, I want to start playing the game." This involved designing screens for users logging in, with separate flows for selecting an existing save or creating a new one with a fresh avatar.
During this phase, I researched fantasy game attributes like "alignment," "race," and "profession" to enhance the user experience by incorporating these familiar elements.
The client’s brand identity, style guide, and color palette were initially undefined, but they were open to suggestions to enhance the game's user experience. They specifically wanted to incorporate their favorite color, #00FEFE.
Our team collaborated on exploring various color palettes, presenting two standout options. We carefully evaluated both light and dark schemes, refining the design until we achieved a version that met the client’s satisfaction.
I took charge of developing the wordmark during the brand identity phase, ensuring it aligned with the client's vision and the project's overall direction. My approach included integrating the client's preferred color (#00FEFE), maintaining a fantasy-themed aesthetic, and creating a minimalist design that could adapt to various video game genres if the client's AI expands its capabilities.
This process resulted in a wordmark that not only met the client's expectations but also resonated with the target audience, establishing a strong and flexible brand identity.
Streamlined Branding Guidelines
Our interdisciplinary team developed a comprehensive style guide post wordmark and visual hierarchy establishment. This guide ensures consistent documentation for future designers and engineers.
Color Palette: Dark and cool tones form the base, with vibrant hues reserved for status highlights, CTAs, and wordmark accents, adhering to client preferences.
Typography: Through collaboration and iterative exploration, we selected DM Serif and Inter as the primary typefaces, balancing user experience with design principles.
Incorporating Hearthstone's Influence into a Fantasy-Themed Dashboard
While the client focused on developing their AI system for general gameplay, our team took the opportunity to explore various UI iterations for the dashboard page—a crucial element shaping the overall design of the game and website, aligning with our user-centered design approach.
We began by creating initial iterations inspired by the client’s aesthetic preferences, particularly styles from Diablo IV, Osnaria, and other fantasy IPs like League of Legends, Witcher, and Hearthstone.
In designing my dashboard iteration, I drew from Hearthstone’s interface, using its yellow and earthy color palette to evoke the fantasy genre, which aligns with the client’s goals.
We then worked closely with the client to refine and select visual elements and color schemes that resonated with their objectives and the target user demographics while adhering to UX best practices.Key client preferences included:
For this iteration, I have:
These decisions ensure a cohesive, user-centered design while awaiting final artwork.
Refined Aesthetic and Functional Elements in High-Fidelity Screen Designs
After finalizing a clean, minimalistic interface with fantasy illustrations and a dark, cool color palette, we moved on to creating High-Fidelity screens. These screens demonstrated key functionalities and user-centric design, showcasing our dedication to delivering an exceptional user experience.
Some screens I designed include:
To ensure users easily understand their previous game session, I created a Saved Game Continuation screen featuring a story summary and an AI-generated illustration. This setup helps users quickly recall the narrative and engage with an action-based question to advance the game. I also designed an expandable Navigation button to offer additional menu options, improving overall usability.
This screen was designed to guide users who haven’t started or saved a game. It clearly communicates the absence of saved files and offers two intuitive options to start a new game:
These options ensure a user-friendly experience, aligned with UX best practices.
We used Figma's "Annotate Design" and "Measure" plugins to create our Developer Handoff package, capturing every screen element's dimensions and functionality in detail.
I focused on annotating key screens like the dashboard, avatar creation, and game continuation pages, clearly explaining measurements and expected functionality. This documentation was crucial in ensuring that our design vision and user experience were accurately translated into the final product, fostering alignment and efficiency between the design and development teams in Wanderling's product development.
This project marked a significant milestone in my UX journey, offering invaluable learning and growth opportunities. While I had experience in both indie and AAA video game projects, this was my first in-depth exploration of AI and AI-generated artwork. Initially unfamiliar with AI platforms, I gained a deep understanding of their capabilities and the ethical considerations needed to maintain product integrity.
Collaborating with a diverse team allowed us to create designs that resonated with both novice and experienced gamers, leveraging my user-centric approach to exceed client expectations. If given the chance, I would have loved to create custom illustrations and UI icons to further enhance the user experience.
Overall, this project expanded my skills and demonstrated my ability to integrate AI into interactive video game design, making it a pivotal chapter in my UX/UI career.
Thank you for viewing my Wanderling project!
Click below to view other projects.
