CannonBrawl

I led the UX team and collaborated with other teams to create a TouchTable PVP ship-battle experience.

Our game CannonBrawl won the Design Award for Galactic Excellence (presented by Volition) at Fuse 2022.

Case Study

Problem Statement

The rise of tabletop gaming experiences, coupled with advancements in touch technology, led to the demand for engaging and interactive multiplayer games on platforms like TouchTable. With limited offerings in the strategic PvP (Player vs. Player) genre, an opportunity existed to craft a memorable ship-battle experience, bringing fun and memorable naval warfare into the modern gaming realm.

Objective

Design a captivating, user-friendly, and strategic ship-battle PvP game tailored for the TouchTable platform, ensuring the game remains accessible for novices while providing depth for seasoned players.

Research & User Interviews

We examined the TouchTable game market to identify popular genres, game mechanics, and design trends.

Our team engaged with a diverse group of tabletop gamers, TouchTable enthusiasts, and PvP game aficionados. In user interviews, we aimed to understand their preferences, frustrations, and aspirations related to gaming on such a unique platform. Our findings indicate that:

  • 90% of users rated dynamic environment as “highly-desirable”
  • 90% of users rated ship customization features as “highly-desirable”
  • PvP games had a retention rate 35% higher than single-player or cooperative games on the platform
  • 74% of participants believed that the primary appeal of TouchTable was the face-to-face interaction it allowed
  • 100% of participants stressed the importance of accurate control responsiveness and feedback when working with TouchTable

Design Process

Information Architecture

Understanding that the game would be heavily strategy-based, the architecture focused on ensuring players could easily access game modes, customize and view ship data, and engage in battles without feeling lost or overwhelmed.

User Flows

We designed several user flows meticulously crafted to:

  • Streamline the game-start process
  • Facilitate strategic decisions during battles
  • Offer an intuitive navigation system throughout the game
 

Wireframing & Prototyping

With the TouchTable’s unique interface in mind, wireframes emphasized touch-based interactions, gestures, and multi-player considerations. A high-fidelity prototype was subsequently developed in Figma to visualize the structure of the game, and the prototype developed in Unity to interact with the game, setting the stage for effective user testing.

User Testing

A diverse group of users was invited for testing sessions. Observations focused on interaction ease, game understanding, strategic depth, and overall engagement. Feedback led to iterative design improvements and refinements. Some of our core findings indicated that:

  • A majority of Users felt the UI was extremely easy to navigate
  • Users were overwhelmingly positive towards the game art and style of the game
  • Cannon firing was difficult and often inaccurate, requiring significant improvement
  • Users wanted more reactive feedback in-game 
  • Game battles needed more elements, leading to the development of power-ups

Key Features

  • Engaging PvP ship-battle experience
  • Dynamic battle arenas
  • Simple and robust ship customization
  • Multi-touch interactivity

User Feedback

  • “The controls were all very responsive. It made the UI easy to navigate too”
  • “I liked how creative and simple the game was to follow both in concept and play style”
  • “I hope to see more interactivity with the environment”
  • “Shooting can be a bit weird. Sometimes my cannons get stuck backwards”

Conclusion & Future Steps

With the help of user feedback and dedicated design, CannonBrawl successfully filled a gap in the TouchTable gaming market, offering a strategic PvP experience that resonates with both casual players and history enthusiasts. We presented our game at the interactive media event Fuse 2022 hosted at the Peoria Riverfront Museum in Peoria, IL. The public received our game very well, and our team was awarded the Volition design award for galactic excellence on behalf of our work. Potential future steps include:

  • Map expansions
  • Scenario and game mode expansions
  • Official app market release

Tools & Skills Used

Tools

  • Figma
    • Utilized for crafting low-fidelity wireframes and early interactive prototypes. Figma facilitated real-time feedback, allowing for rapid iteration and refinement of the design throughout the team. Additionally, FigJam was utilized to outline information architecture and core application structure.
  • Adobe Illustrator
    • Leveraged to design custom elements, iconography, and the mood board. Illustrator’s precise and expansive toolkit enabled the creation of detailed and visually cohesive assets that were easy to apply across all stages of the design process.
  • Unity
    • Transferred and developed wireframes into official prototype on game engine. Leveraging Unity’s flexible tools, I focused on designing aesthetically pleasing, user-friendly interfaces and interactions. This involved translating and implementing visual elements, like menus and buttons, ensuring seamless navigation and engaging user experiences.
  • Google Products
    • Extensive use of various google products (Sheets, Forms, Calendars, Drive, etc.) for conducting and organizing user interviews, scheduling sessions, and collecting feedback. This ensured that the user’s voice was central to the design process, and the insights gathered were promptly understood by the team and directly implemented into the application.

Skills

  • UX Leadership
    • Led the UX team through every stage of the design process and development. This gave me a great deal of valuable leadership and mentoring experience that was critical to my development as a designer.
  • Information architecture Design
    • Orchestrated the logical structure and organization of the application’s content and functions in Figma and FigJam. This brainstorming session, which involved the entirety of the team, laid the foundation for the core of the application.
  • Persona creation
    • Developed detailed user personas to encapsulate the needs, preferences, and pain points of the target audience. These personas acted as a guiding beacon throughout the design process, ensuring alignment with users’ needs and expectations.
  • User interviewing and testing
    • Conducted thorough user interviews to gather qualitative data about user needs, challenges, and expectations. Subsequent user testing sessions provided valuable insights into the application’s usability/playability and highlighted areas for improvement, and allowed for detailed reports to be presented.
  • Unity Development
    • I helped to develop robust code and innovating problem solving for our application. Utilizing the versatile engine, I helped to integrate physics, animations, and interactive elements. It was my first time working more heavily with a development team, and through this experience we were able to construct an engaging, smoothly running game that resonated with users.
  • Mockups and Wireframes
    • Crafted detailed wireframes that laid the groundwork for user interfaces, outlining the structural arrangement of elements. These wireframes ensured clarity in layout and functionality. When transitioning to mockups, I infused color, typography, and aesthetic details, transforming them into high-fidelity visuals that told the story of our game.
  • Presentation
    • Presented our game to the public during an Interactive Media event (Fuse 2022) at the Peoria Riverfront Museum. The public received our game very well and reported positive feedback. Additionally, we won the Design Award for Galactic Excellence presented by Volition.