Design Process

Product UX UI design  process

Example project:
Sports Betting Application

UX UI Designer
Product Designer
Visual Designer

Abobe XD

Adobe XD
Unity 3D
Microsoft Maquette
Blender 3D
Figma, Adobe XD
Unity 3D
Adobe Creative Suite

To explain my Product design process for Digital Media, Web, Mobile, and XR projects, I will go through the main menu design for a sports project I worked on.
The UX - User Experience design process is the initial part of the entire Product design Pipeline process and is followed by a UI - User Experience design process. It is followed by developer handoff, design documentation, and concludes with User Research and Usability research. This process seldom follows the same order and goes through various iterations.

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 work on the 2D UI design in Figma or Adobe XD when I want a quick software to handle visual design & build initial interactions. This helps to get a quick 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 use a combination of Bento-Box and Tabbed view style of Information Architecture for this project.

I use the component system and hover animations introduced in the latest version of Figma 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.

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

Although the UX process following Human-centred design is similar, visual design & constraiTns for a screen-based medium are couldn't be further apart.
For example, more attention is paid to animation & micro-interactions and screen flow.