Tap Cats is a Collectable Card Game starring, you guessed, cats! In the game, players build decks and play in PVE and PVP modes. Suitable for casual and hardcore players
The addition of the Guild and Chat systems aimed at helping players to get together in the game and engage in group events like killing bosses, competing against other guilds, and more to come. The initial launch of the Guild system would only have basic features to create and manage a guild, so it was important to structure the screens to allow more content in the future and, at the same time, avoid making the screens feel empty or incomplete.
First Steps
The research began analyzing existing guild systems in other games, regardless of their platform, as well as daily applications non-related to games. Guilds are familiar to most of the players so it’s important to not overthink some aspects of the guild system, we want to use previous players' experience in our favor.
Flow Diagrams and Wireframes
With the basic key steps set on to navigate in a guild system in hands, it was time to create proper flow diagrams to cover players’ paths in multiple scenarios. Along with that, several wireframes were made with a functional prototype for navigation, so we could ensure the multiple navigation flows are coherent and clear.
Part of the low fidelity wireframes. Functional prototypes were made with the wireframes
Visual Design
The game’s visual design was already well defined but I had the freedom to add some uniqueness to the Guild and Chat systems. As mentioned at the beginning, the Guild system would receive improvements with time so the UI needed to be prepared for that: most of the screens have space for additional tabs and columns, and some information like boss fights and trophies were left as a sneak-peek of the future updates.
Create and manage Guild - Pop-ups
Guilds are a way for players to be actively part of the game as a whole and we wanted to ensure each Guild feel unique, so along with the art director dozens of icons were made to be used as guild symbols and we added a color system which tints most of the Guild and Chat UI with the chosen color.
Chat Screens
Animations
A couple of animation prototypes were made to make the usage of both systems pleasant and rewarding. In addition to that, animations for notification were added to call players' attention when needed.
A couple of animation prototypes were explored for both systems to make the experience pleasant and rewarding. In addition to that multiple animated notifications were explored to cover all flows.
