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.
Design a chat system that allows players in a game to communicate with each other while playing the game.
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
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
Hook anchor: drag interaction
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.