Design and Build Immersive experience in Virtual Reality

D7424ff0e1dc983d898de62c7496c321?s=47 uxindia
October 25, 2019

Design and Build Immersive experience in Virtual Reality

UXINDIA2019: India's biggest international conference on User Experience Design which is being celebrated on Sep 9, 10 & 11 at Novotel HICC, Hyderabad.
#ux #uxindia #uxindia2019 #designthinking #uxi19 #uxconference #umodesign



October 25, 2019


  1. 1.
  2. 2.
  3. 3.

    Who we are We are an innovation and design consultancy

    studio based in Bangalore, Delhi, Mumbai and Hyderabad providing design focused training and consultancy services for UI/UX Design, Immersive Design, Conversational Design, Design Thinking and Digital Product design.
  4. 4.

    What We Do? We foster innovation by following a design

    thinking process to imagine, design and create revolutionary remedies to worldly problems . With a team of expert alumni graduates from NID’s and IIT’s with industry experience in companies like Samsung, Microsoft, Google, Thought Works etc, we have been able to solve problems in the domains of education, finance etc, using our expertise in the field of Augmented/ Virtual Reality, Tangible User Interfaces, Artificial Intelligence etc.
  5. 5.

    We have trained participants from Genpact, IBM, L&T, Infosys, WIPRO,

    Edelweiss, TCS, ENY, DRDO, SAP, Motorola, DELL, Macmillan India, Zivame, Bates CHI & Partners, CSE, SSL, Cadenza, Magnus, Digi Collect, July Systems to foster innovation in their companies, to build products, services and upscale their teams including developers, product managers to design thinkers. Who have we trained ?
  6. 6.
  7. 8.
  8. 10.
  9. 11.
  10. 12.
  11. 13.
  12. 14.
  13. 16.
  14. 17.
  15. 18.
  16. 20.
  17. 21.

    VR UX Design Course Weekend Course 12 Weeks | 24

    Sessions Course Fee: 80k 3 Hour x 2 Sessions per week This 12 week course is aimed at providing knowledge and hands on experience to get you seamlessly into VR industry requirements. By the end of the course you'll be equipped with tools and knowledge to design and create Virtual Reality experiences. Expert Trainer Design Portfolio One to one mentorship VR Tool Kit Career Assistance Hands on Learning
  18. 22.

    1. Intro to UX UI Design in Virtual Reality &

    Immersive Media Get to know about Virtual Reality medium and how UX design process is being used in industry. 2. Basics of VR UI, VR Design & Prototyping Tools Introduction to the basics of 3D space design for VR medium, process and ecosystem of tools for design and development. 3. Color, Material, Light, Space Styling, Iconography, 3D models Learn the skills of envisioning the 3d space in visually appealing way. 4. Typography, Spatial Audio, VR UI Components, VR UI Guidelines Deep dive into different elements of VR UI elements and how they drive the entire user experience during immersion. Course Content
  19. 23.

    5. Considering Human Ergonomics, Physiology for VR learn about the

    fundamentals of designing the space with respect to human ergonomics and physiology of their body, head and eyes. 6. Conducting User Research in VR Introduction to user research. How to conduct user interview and Empathise with them as a designer. 7. Understanding User Data using Affinity Mapping, VR UX Canvas learn how to organise and analyse the data that is collected from the user research by using methods such as affinity analysis. 8. User Personas, Scenarios, and Narratives. Design for Collaboration Learn different storytelling techniques used in theatre, narrative patterns, orchestrating movement and dialogue between user and other elements. Course Content
  20. 24.

    9. Information architecture, navigation models in 3D Learn about defining,

    categorizing and structuring information which will go in the application. 10. VR Storyboarding Create task flows and align them with users mental model, which make it easy for users to achieve their final goal. 11. Interaction laws, wireframing 3D interactions and Brainstorming Learn different interaction laws governing experience and control in 3D spaces and specifics of VR interaction patterns. 12. Paper prototyping the VR experience Learn to create paper VR wireframes to get quick feedback on UI layout ideas and flow Course Content
  21. 25.

    13. VR wireframing Learn how to create wireframes which is

    the skeleton of your application. 14. Heuristics evaluation of VR interfaces Learn about heuristic evaluation which will helps to identify usability problems in the user interface (UI) design. 15. Refining wireframes based on Heuristics evaluation Work on refining their VR wireframes based on results of Heuristics evaluation. 16. VR Wireframes to VR Visual Design Design aesthetically pleasing scenes by using the color, light and typography principles in the right way. Course Content
  22. 26.

    17. Refining Visual Design Final review and improvements on the

    visual design. 18. Usability Testing Learn how to conduct usability testing and get to know about the methodologies involved in VR usability testing. 19. Stitching Everything Together, Prototyping Learn to create interactive prototypes which simulates the final product to test it’s functionalities and do the usability testing of your product. 20. Design Specifications & Developer Hand offs Learn how do designers create design specification and how to handover them to the developers, and how do they take it further. Course Content
  23. 27.

    21. Portfolio Preparation and Setup Get expert guidance in creating

    an eye-catching portfolio to showcase your work and how to present it effectively. 22. Finalising Portfolio, Publishing and Sharing Reviewing and improvising the portfolio. Example of a good VR portfolio using a case study. 23. Introduction to Unity-1 Introduction to Unity Game Engine, IDE and create basic VR experience 24. Unity Intro-2 Create VR experience and publish it on mobile. Course Content
  24. 29.

    Virtual Reality, one of the hottest technology of the decade

    is now being projected as a core offering by giants like Google, Microsoft, Facebook etc. According to the statistics the worldwide user base for AR and VR will reach 443 million by 2021. This means that UX designers have a greater role to play and should be equipped with right knowledge on how to create amazing VR experiences. 3D interaction design calls for a completely new way of thinking about UX design. Why Virtual Reality?
  25. 30.

    FAQs Are there any pre-requisites and who qualifies for the

    course? There are no pre-requisites for the course. However, we expect you to have an basic understanding of using laptop to create digital content earlier. This will ease the learning time for you. Since, we are taking limited number of participants for this batch, it will be on first come first serve basis. What Tools will be taught in the course? The course will focus on the process of designing VR experiences from ideation to developer hand off. For this, tools like VR UX paper templates (paper sketch sheets designed by Designerrs specifically for VR), BrioVR will be taught. Introduction to Adobe XD and Unity will be given during the course. How is this course different than UX UI course? Virtual Reality is altogether a new medium giving you access to a canvas that spans 360 degree around the user. Optimal usage of this entire space to give user a true feeling of immersion, wherein she feels part of the new space and do not get intimidated by the expanse is the true difference. Traditional UI deals with 2d flat screen, wherein all the interactions are limited in 2 dimension, whereas in VR user is interacting in 3d space, giving them the magical powers. Additional skills and understanding of space is required to create VR experience. Which VR headset will be used during the course? Mobile VR and/or Oculus GO will be used in the course as it focusses on taking the participants through the entire VR design process from ideation to developer hand off. Oculus GO headset will be provided as and when required during the course and to be shared among participants. Mobile VR headset will be provided as part of VRUX kit.
  26. 33.

    What are we going to do today? Principles of Designing

    for Virtual Reality Tools to design and create VR experience Create a VR experience
  27. 34.

    Session Schedule Session 1 - 3 hrs (approx) • Understand

    VR and Design • VR Paper prototyping Session 2 - 3 hrs (approx) • AFrame basics • Design and Build VR experience
  28. 35.

    Checklist VR ready smartphone Mozilla Firefox browser YouTube app Grid

    Paper, Pencil, Eraser, Color Pen Adobe XD if not download and install Mobile Data Connection
  29. 36.

    Make a team be prepared to Think in 3D Don’t

    switch of your phone! We will use it in the session Make sure data connection is ON & Use it for social media sharing J #uxi19 #uxindia2019 #ux #design4VR @uxindiaconf @designerrslab @kernel_kumar
  30. 41.

    Fundamentals of VR VR Design Principles Content Creation process Hands

    on VR content creation Hands on VR prototyping tool – AFrame Designing and Building an experience
  31. 42.

    Before we begin to learn Design for VR we need

    to know what makes it the way it is
  32. 43.

    Immersive Media Cave paintings Print Photographs Film/TV 3D cinema VR

    | AR | MR We have been recreating the reality around us...
  33. 46.
  34. 47.
  35. 48.
  36. 49.

    Anatomy of VR hardware Stereoscopic Images Lens adjusts the focus

    Syncs head orientation with display 360 onboard rendering
  37. 50.

    Anatomy of VR hardware FoV – Field of View DoF

    – Degrees of Freedom Controllers | Sensors | Trackers
  38. 52.

    Stretch your right hand Finger in front of you While

    looking straight and not moving eyes Move your right hand toward right side Till you loose visibility of your finger
  39. 56.

    Types of VR Devices and Content Hardware • Mobile VR

    • StandAlone • RoomScale Content • Monoscopic 360 image/video • Stereoscopic content • 3d Rendered Modes of Interaction • Gaze • Controller • Direct hand • Combination
  40. 60.

    Mobile 3 DoF High latency Low FoV Gaze Standalone 3

    DoF Low latency 100 FoV 3 DoF controller Roomscale 6 DoF Perceptive latency 110 FoC 6 DoF controller cardboard daydream Gear VR Oculus GO Vive Focus Oculus Quest Pimax Oculus Rift HTC Vive Pro VR headsets Varjo PSVR
  41. 61.

    Monoscopic 360 Stereoscopic 360 3D Rendered VR Content No Depth

    Flat 360 image Fixed Light Depth with parallax 3D 360 image Fixed Light Depth 3D rendering Dynamic Light
  42. 62.

    Stereoscopic • In normal Image both of our eyes see

    same image • In Stereoscopic image our two eyes sees same image captured from 2 slightly different angles and that’s how illusion of 3D depth is created • Latest phones with dual camera creates stereoscopic content
  43. 67.

    We will Create Monoscopic Static content We will focus on

    creating a VR experience that has simple interface no environment gaze interaction
  44. 68.

    Fundamentals of VR VR Design Principles Content Creation process Hands

    on VR content creation Hands on VR prototyping tool – Aframe Designing and Building an experience
  45. 69.

    First 30 Seconds • Do not put user directly in

    middle of action • On board with tips and hints • Give time to explore the space • Acquaint with interactions and affordances • Not applicable for experts
  46. 72.

    Field of View - Placement of Element - Spread of

    UI - Reach of element Field of View and Comfort Zone
  47. 82.

    Have a background behind Text Consider Billboard signage font size

    3D type adds to cognitive load 4.8cm at 1m distance 9.6mc at 2m distance 1.4m at 3m distance Typography
  48. 83.
  49. 87.

    Fundamentals of VR VR Design Principles Content Creation process Hands

    on VR content creation Hands on VR prototyping tool – Aframe Designing and Building an experience
  50. 90.

    VR ready Turn on Auto Rotate mode Open YouTube app

    Search and play 360 video Rotate phone by 90 degree to view fullscreen When moving phone around, does the video also move? If yes the phone has sensors needed for VR iPhone 6s and above supports VR by default
  51. 104.
  52. 110.

    And you thought VR can be created only in 3D

    software!?! Use Adobe XD to create VR content
  53. 113.

    Don’t you feel background is blank, drab and doesn’t follow

    some principles? You can either add A 360 image or gradient background
  54. 116.
  55. 117.
  56. 118.

    Create interesting 360 content • Draw different shapes • Add

    Text • Add Image • Add environment in background • Add shadow to near • Blur far away elements • Add a faint horizon • Create circular ground by adding a rectangle in bottom Template pointers • Follow the reference line for content in comfort zone • Set grid opacity to 0 • Duplicate the base template artboard and create new image using that
  57. 119.

    let’s create some VR experiences ~30-40 mins In next part

    we’ll add animation/action to this static content
  58. 121.

    AFrame a javascript framework to create Virtual Reality on web

    browser open on your laptop browser
  59. 122.

    Click on Show and a new window will open. You’ll

    be able to pan scene Open the url in mobile browser and view it in Cardboard
  60. 125.

    The coding area. We are not going to code !!!

    Index.html file holds all we need Assets is a folder that will hold graphic files
  61. 126.

    Let’s understand this a bit There are 2 zones in

    the code Pick objects Area of work Do not touch any other lines
  62. 127.

    Copy the line which mentions plane Copy line no. 15

    and paste in on top of area of work zone Paste after line no. 28
  63. 129.

    A new window should open like this Hit the keys

    ALT+CTL+i (on windows) CMD+CTL+i (on Mac)
  64. 130.

    If it doesn’t open do this Add English Keyboard (US)

    layout Edit Language and Keyboard options
  65. 132.

    Design a VR Experience for connecting people Landing state First

    30 seconds Contact list UI spread In conversation Presence and Immersion
  66. 135.

    Brainstorm Paper Prototyping Adobe XD for Graphic assets AFrame for

    final VR Create 1-2 states Landing Normal During communication
  67. 136.