User Flow Document for Multi-platform VR Game
Year: Fall 2020
Role: Solo UX Designer
Client: A UBC Game Development Group
Brief: Communicate the user flow through a VR game, indicating the relationship between Microsoft Teams, the players, and the VR game.
Still in the early stages of development, this game development team needed to visualize how their multi-platform VR game concept would leverage the existing features of Microsoft Teams to support ongoing communication through a variety of channels.
Based loosely off asymmetrical games such as Keep Talking and Nobody Explodes, the game places one player in VR while other team members work collaboratively to help the VR player solve puzzles within a short time frame.
DISCLAIMER: This project is not currently associated with Microsoft Inc. Microsoft Teams UI designs and logos are for conceptual purpose only.
Project Goals
Indicate interaction points between players and Microsoft Teams
Visualize flow for asymmetrical gameplay
Mock-up UI wireframes to communicate gameplay across platforms.
Key Deliverables
01.
User Flow
Design
02.
Role Distribution
Example
03.
Wireframe
Design
Early sketches & iterations
After the initial consultation with the development team, I began sketching the content I was provided to create a general structure and identify content gaps.
Design Process
While the client only asked for a user flow initially, I discovered that the concept of asymmetrical gameplay was challenging to wrap my head around so I took initiative to develop supporting documents, such as a Role Distribution Example and wireframes to help communicate the game experience.
Digital Drafts & Client Feedback
I created a digital draft with rough blocking and content to discuss with the client before increasing the design fidelity. During this meeting, the client asked that the integration of Microsoft Teams be explicit to ensure the viewer understood the role of the platform.
Early rough draft for content review. Checking in with the client early allowed us to make edits to the layout before committing to a higher fidelity design.
Final Deliverables
User Flow
Microsoft Teams brand colour was used to differentiate interactions within the Microsoft Teams platform.
Different player experiences are stacked to indicate simultaneous but different experiences.
Role Distribution Example
Due to the complexity of the asymmetrical game design concept, I also created this diagram to illustrate how communication could flow between players using various channels.
The communication channel is indicated by line style, direction is indicated by arrow direction, and players within Teams are grouped separate from the VR player.
UI Wireframes
Designed to illustrate how the different communication channels are accessed by each player.
Project Outcomes
While this project is still in an early development stage, these documents have helped the development team communicate and visualize the current state of the game.
These documents were also used to present the concept to external stakeholders and new team members.
Learnings
If I'm lost, the target audience will be too. I followed my instinct to provide more visual context to ground the idea, and it resulted in better communication.
Sometimes the client won't know what they need. Reading between the lines and understanding the goal of the project helped me identify what needed to be delivered.