Staging Photo

Project

In-Game Chat

Roles

UX, UI, Interaction

Company

Big Fish Games

Opportunity

Big Fish Games is designing a new mid-core fantasy game that needs a chat system. This way, gamers can compare progress and help each other.

Note: This game is not yet released, so I have redacted or removed parts of my designs and process.

Objective

Design a chat system that allows players in a game to communicate with each other while playing the game.

Process

Competitive Analysis

I spent time playing mobile games from various genres to see how chat worked within the context of their game.

Sketching the First Few Screens

I designed an anchor-drag interaction to initialize the server connection and display the chat UI.

Exploring how chat UI is brought into view via the anchor.

Wireframes and Interaction: Initializing Chat

Wireframe flow demonstrating how the user enters chat.

Wireframes and Interaction: Chatting and Emotes

Wireframe flow demonstrating how the user sends an emote to chat.

Designing the Flows in Color

Initiating chat via a bottom-positioned anchor

Muting a user in chat

Initiating chat via a top-positioned anchor

Documenting Layout and Interaction

Below are a few pages from the document that outlines the features and limitations of in-game chat.

Anchor properties and attachment

Anchor positioning

Hook anchor: drag interaction

Peek sizing

Chat interface: portrait orientation

Fullscreen chat: scrolling behavior

Upon completion, the following goals were achieved:

  • Design a global chat system that is accessible anywhere in the game
  • Design a small UI version to allow users to monitor chat while they play
  • Let players mute others, and manage that list
  • Design a text macro feature that lets users quickly express themselves without pulling up the keyboard
  • Let players enter chat by pulling on an anchor
  • Document UI and interaction features for internal game teams’ reference

Harry McCorkle, UX Designer

All content is the property of its respective owners.