UX+UI Design -VR & AR Experince

UX+UI design process for VR & AR

Example project:
Sports Data Visualization

MY ROLE
UI Designer
Visual Designer

WIREFRAMING
Miro.com
Abobe XD
Axure

INTERACTION TOOLS
Adobe XD
Unity 3D
Invision
Adobe Creative Suite

︎UI PROCESS

To explain my User Interface design process I am going through the main menu design for a Sports VR project I am currently working on. A UI Design process is usually a part of the entire product design process & is usually followed by a User Experience design process.

I followed a simple Design Thinking process for a UX overview to establish the Sports VR category.  Since it was a short project this whole process design & development,  overlapped quite a bit. I started with 1.Competitive analysis 2.Key Features and worked on 3.Features Priority pyramid and 4.Moodboard for look & feel, with the team.

I quickly realized that a main menu was needed which could provide as a hub for all the key interaction in the experience. As usual, I did a few sketches to get started.

I did some wireframes to get clarity on the UI design and interaction model.

I worked on the 2D UI design in Adobe XD as I wanted a quick software to handle visual design & build initial interactions to get a buy-in from the team. So we could quickly iterate and take the design to 3D in VR as soon as possible.

I worked on a brief style with color scheme &  typography elements for the project. This will be useful in the advanced stages of the project. It will grow into a detailed more elaborate version
of Style Guide but I like to start thinking in terms of scalability early on.

COLOR- I use a sport complementary color scheme for this project. I discussed the color scheme with the environment artist & we agreed to use this particular color scheme to have a consistent visual identity for the project.

TYPOGRAPHY - I use the Segoe font family for its legibility in small sizes which was an important consideration of VR text.  

I used a combination of Bento-Box and Tabbed view style of Information Architecture for this project.

I used the new component system and hover animations introduced in the latest version of Adobe XD to my advantage.


This gave team & stakeholders a good idea of Micro-animations and interactions, I envisioned for the final output of the VR experience.

I usually do 3D grey blocking in VR using Microsoft Maquette to get an initial 3D UI done and get an understanding of the interaction experience. Since this project had a short trun around I did a quick one just for pernals and team use.

To take the design to VR the UI has to be set up again in Unity 3D. I'm looking for a process to automate this. Recreating using the flat assets exported from Adobe XD seems to the quickest solution for now.

I use Unity Animation system for animation.

Unity animation manager is used for interaction for VR user interactions. These are handed to Unity developer for more advanced interactions.

Main menu UI complete assets are placed in the Unity scene. The idea is to have a miniature Diorama of the stadium which enlarges like a floating hologram when tapped in VR. The interactions are- Score menu, Player & team stats, and Visualization of goals. The animation for all the interactive states is in the assets prefabs, waiting to be hooked up with code by a Unity Developer.

This is an early stage - Work in progress demo of the project created. Its shows a prototype of a VR app to watch live sports in VR.

︎SCREEN UI  PROCESS

My process for designing for Screen-based - 2D medium can be seen below:

Although the UX process following Human-centred design is similar, visual design & constrains for a screen-based medium are couldn't be further apart. For example, more attention is paid to animation & micro-interactions and screen flow. This is a large topic in its own right.
I would love to discuss this in further detail. I'm working on a post that explores my approach for the same.