Context

You just created your AI character, now it's time to make the battles unforgettable.

During my internship at OpenForge, I had the opportunity to assist Summon World on a livestream event that highlighted the creative potential of their platform. Summon World is an app that lets users create and customize their own characters with unique personalities, appearances, and abilities. For the livestream, our team designed a battle interface for the facilitator to use, featuring the characters submitted by users in competitive matches between Team Light and Team Dark. The interface was designed to be intuitive and easy to navigate during the event, with plans for Summon World to further refine it and eventually make it public so that users could engage with it themselves.

Challenge

One of the biggest challenges was designing a fully functional battle interface within a very limited timeframe. We had only two weeks to create the design before passing it to the engineers for development, which required us to work efficiently and make clear design decisions early on. The interface also needed to be intuitive and reliable so the livestream facilitators could easily navigate it during the event without technical difficulties or confusion. Balancing speed, usability, and visual quality was a key challenge throughout the process.

One of the biggest challenges was designing a fully functional battle interface within a very limited timeframe. We had only two weeks to create the design before passing it to the engineers for development, which required us to work efficiently and make clear design decisions early on. The interface also needed to be intuitive and reliable so the livestream facilitators could easily navigate it during the event without technical difficulties or confusion. Balancing speed, usability, and visual quality was a key challenge throughout the process.

To address this, we focused on creating a clean and functional interface that clearly communicated what was happening during each battle. The design included a battlefield layout to visualize the ongoing match and a battle log feature that displayed real-time actions and outcomes, allowing both the facilitators and the audience to follow along easily. Our team prioritized clarity, quick navigation, and engaging visuals to ensure the interface worked smoothly during the livestream, while also laying the foundation for future updates when the tool would be made public for users to experience on their own.

Solution

My Role

I collaborated closely with my design manager throughout this project. My primary responsibilities included:

User Research & Competitive Analysis
Conducted user research within the Summon World Discord community to understand player expectations for battles and livestream experiences. Analyzed existing D&D and RPG platforms to explore how they present combat, identify best practices, and uncover opportunities for improvement.

Cross-Functional Meetings:
Partnered with engineers and product stakeholders to align on feasibility and maintain a shared vision between design and development.

Concept Development & Prototyping:
Created the initial wireframes for the battle interface to establish the core layout and interaction flow. Later focused on designing the character card states and defining how each card would appear and behave on the battlefield. Finally, developed the visual layout and prototyped the complete battle experience for the final design.

User Research

Based on the competitive analysis, I identified several opportunities for Summon World and aligned them with engineering timelines and goals during team calls. Because we’re building the feature under a tight deadline, we chose to simplify the combat system.

To keep the experience approachable, we limited player choices to three core actions of Attack, Defend, or Support.

To address the text-heavy experience of AI Dungeon, we designed a visual battlefield interface with each character card on the battlefield, allowing players to clearly follow the battle and make it more engaging than purely text-based encounters.

Conducting competitive analysis to learn how other AI character-creation apps emulate D&D-style battles

Ideation

Initial Explorations

During the early design phase, I collaborated closely with my design manager to define a clear, three-panel layout for the Battle Map. We divided the interface into distinct sections to keep the experience organized and easy to follow:

The left panel serves as the team management area, where users can organize and customize their lineup of AI characters before entering a match. The main panel is the battlefield, showcasing the character cards and the core combat interactions in real time. The right panel functions as a detailed battle log, continuously recording attacks, defenses, and significant events, allowing players to track and review the entire match as it progresses.

Concept Exploration

Character Card State Exploration

In collaboration with my design manager, I explored multiple approaches for how a character card could appear on the battlefield. We had an initial direction of presenting the cards horizontally, but also tested more realistic, tabletop-inspired placements, which is similar to physical trading cards. We also looked at ways to visually distinguish light characters from dark characters.

From there, we focused on defining the card states. For example, how a card looks when idle and unselected, how it changes when selected as the user prepares an action, and how it appears once the character is defeated and no longer usable. These explorations shaped a clear visual language for every stage of the battle experience.

Final Prototype

Future Considerations

Because we were on a tight deadline to prepare the interface for the livestream handoff to engineering, much of the design work had to move quickly. With more time, we would enhance the battle experience by incorporating dynamic animations for attacks and defensive moves to create a more immersive, visually engaging sense of combat.


Looking ahead, we also plan to offer both manual and auto-battle modes. The auto-battle option would generate a narrative-style playback for users who prefer a streamlined, story-driven experience. Meanwhile, the manual mode would let players control every action for a more interactive, hands-on encounter