VR-Game_MockUp.png

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

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.

VR Collaboration Game - Facilitator UI A

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.