Unit 2
Unit 2: Ideation and Spatial Storyboarding in AR/VR Experience Design
Syllabus
Learning Outcomes
After completing this unit, students will be able to:
1. Introduction to Ideation
Ideation is the process of generating, exploring, and refining ideas before developing an AR/VR application.
It helps designers discover creative solutions to user problems.
Definition
Ideation is the creative process of generating multiple ideas to solve a user-centered design problem.
1. Introduction to Ideation: Problem Statement
Problem: Many people cannot visit famous places due to distance, cost, or physical limitations.
User-Centered Ideation
1. Introduction to Ideation: Users
User 1: Tourist
Problem: Wants to explore places before planning a trip.
User 2: Student
Problem: Cannot visit historical places during studies.
User 3: Teacher
Problem: Difficult to explain historical concepts only through textbooks.
User 4: Elderly Person / Physically Challenged User
Problem: Cannot travel easily.
User 5: Tourism Department
Problem: Need to promote tourist destinations.
1. Introduction to Ideation: Generating Possible AR/VR Solutions
User 1: Tourist
Ideas Generated:
User 2: Student
Ideas Generated:
1. Introduction to Ideation: Generating Possible AR/VR Solutions
User 3: Teacher
Ideas Generated:
User 4: Elderly Person / Physically Challenged User
Ideas Generated:
1. Introduction to Ideation: Generating Possible AR/VR Solutions
User 5: Tourism Department
Ideas Generated:
Problem: People cannot easily visit tourist places.
↓
Different Users Think Differently
↓
Multiple Ideas Generated:
Why Ideation is Important?
AR/VR Example
Problem:
Students find machine learning concepts difficult.
Possible ideas:
After ideation, the best solution is selected.
AR/VR Example
2. Visual Thinking
Definition
Visual thinking means representing ideas through diagrams, sketches, flowcharts, sticky notes, or drawings instead of long text.
It makes communication easier.
2. Visual Thinking
Benefits
2. Visual Thinking: Tools
3. Brainstorming
Definition
Brainstorming is a technique used to generate many ideas without judging them.
Rules
3. Brainstorming
Types
Individual Brainstorming
One person generates ideas.
Group Brainstorming
Multiple members generate ideas.
Reverse Brainstorming
Think about how to create the problem.
Then solve it.
3. Brainstorming
Crazy 8s
Fold paper into eight sections.
Draw one idea in each section.
Time: 8 minutes.
Example
Problem
Improve classroom learning.
Ideas
4. Digital Whiteboards
Digital whiteboards help teams collaborate remotely.
4. Digital Whiteboards
A) Jamboard (Google)
Features
Advantages
4. Digital Whiteboards
B) Miro
Features
Applications
4. Digital Whiteboards
C) FigJam
Created by Figma.
Features
4. Digital Whiteboards
D) Gravity Sketch
Special software for designing directly inside VR.
Applications
Advantages
Tool | Purpose |
Jamboard | Simple collaboration |
Miro | Professional brainstorming |
FigJam | UX collaboration |
Gravity Sketch | 3D VR ideation |
5. Spatial Storyboarding
What is Storyboarding?
Storyboarding is the visual representation of a user's journey using sequential scenes.
Instead of movie frames, AR/VR storyboards represent immersive interactions.
5. Spatial Storyboarding
Components
Example
VR Shopping
Frame 1: User enters store
↓
Frame 2: Looks at products
↓
Frame 3: Picks product
↓
Frame 4: Examines in 3D
↓
Frame 5: Purchases item
5. Storyboarding
Advantages
6. Immersive User Journey Map
User journey map describes every interaction from beginning to end.
Wireframes in Experience Design
Wireframes are a design deliverable used in UX to visualize product interfaces
Concept | Meaning | Purpose | Example |
Whiteboard | A visual workspace for brainstorming and organizing ideas. | Generate and organize ideas. | Drawing the flow of a food delivery app (Login → Browse → Order → Payment). |
Persona | A fictional profile representing a target user. | Understand user needs and behaviors. | Amit, 30, busy office worker, wants to order food quickly with minimal effort. |
Spatial | Organizing information based on physical location or layout. | Show where things are located. | Displaying nearby restaurants on a map based on the user's location. |
Storyboarding | A sequence of sketches or frames showing how a user interacts with a product over time. | Visualize the user's journey step by step. | Frame 1: Amit is hungry after work. → Frame 2: Opens the app. → Frame 3: Selects a nearby restaurant. → Frame 4: Pays online. → Frame 5: Food is delivered. |
One Example: Food Delivery App
One Example: Food Delivery App
4. Storyboarding (How Does the User Experience It?)
Technique | Key Question | Simple Example |
Whiteboard | What ideas do we have? | Drawing the app flow: Login → Search → Order → Pay → Delivery |
Persona | Who is the user? | Amit, a busy office worker who wants fast food delivery |
Spatial | Where are things located? | Showing nearby restaurants and delivery routes on a map |
Storyboarding | How does the user's experience unfold step by step? | A sequence of scenes showing Amit ordering food from start to finish |
Aspect | Persona | Mind Map |
Definition | A fictional profile representing a target user based on research. | A visual diagram that organizes ideas and their relationships around a central topic. |
Purpose | To understand the user's needs, goals, behaviors, and pain points. | To brainstorm, organize, and connect ideas related to a topic. |
Focus | The user. | The topic or problem. |
Format | User profile with details like name, age, occupation, goals, frustrations, etc. | Central concept with branches and sub-branches of related ideas. |
Question it answers | Who is the user? | What ideas or concepts are related? |
Stage in Design Thinking | Empathize | Ideate |
Tools Information in design Thinking
Relationship Between Persona and Mind Map
Tool | Type | Purpose in UX |
Mind map | Ideation tool | Organizes ideas, features, or user needs in a branching structure to show relationships. |
Storyboard | Narrative visualization | Illustrates user journeys or scenarios step by step, often like comic panels. |
Whiteboard | Collaboration space | Used for brainstorming, sketching flows, and group problem-solving in workshops. |
Summary
In simple terms:
Paper/Diorama Prototyping
Paper prototyping is the process of creating a physical model using inexpensive materials before building the actual digital AR/VR application.
Instead of immediately creating a 3D model in Unity or Unreal Engine, designers first build simple paper versions to understand:
Why Do Designers Use Paper Prototypes?
Professional companies like Meta, Google, Apple, and Microsoft often begin with paper prototypes before creating digital experiences.
Because they are:
What is a Diorama?
A diorama is a miniature 3D scene that represents a virtual environment.
Example:
Imagine designing a VR classroom.
Solution:
1. Digital
2. Create manually:
using cardboard and paper.
This allows them to visualize the experience quickly.
Understanding Three Important Concepts
1. Scale
Question: How large should virtual objects appear?
Example:
Should a holographic keyboard be:
https://www.youtube.com/watch?v=zNbF006Y5x4&t=2s
https://kholdstare.github.io/technical/2013/10/06/sense-of-scale-vr.html
2. Reach
Reach means:
Can the user comfortably interact with the object?
Example:
In VR,
3. Occlusion
Occlusion means:
One object blocks another.
Example:
A virtual menu appears behind a table.
The user cannot see it.
This is poor design.
Understanding Three Important Concepts
Activity
Provide students with paper cutouts of:
Ask them:
"Arrange these inside the diorama."
Questions
Students begin understanding spatial scale.
Activity
Design a VR Museum
Materials:
Students create:
Evaluate:
Part 2: Translating Stories into Spatial UI Sketches
A user story describes what the user wants to achieve.
Example:
"As a student,� I want to pick up a virtual book� so that I can read it."
What is Spatial UI?
Unlike mobile apps,
AR/VR interfaces exist in 3D space.
Instead of flat buttons,
we have:
"A doctor wants to view patient information while performing surgery."
Where should the information appear?
Possible answers:
Which location is easiest to use?
Part 3: Converting Concepts into Testable Use Cases
A concept is only useful if it can be tested.
Example Concept
"A virtual classroom."
Too broad.
Convert it into use cases.
Use Case 1
Student joins classroom.
Tasks:
Use Case 2
Student answers question.
Tasks:
Use Case 3
Student writes on board.
Tasks:
Criterion | Excellent (5) | Good (4) | Average (3) | Needs Improvement (2) |
Scale | ☐ | ☐ | ☐ | ☐ |
Reach | ☐ | ☐ | ☐ | ☐ |
Occlusion | ☐ | ☐ | ☐ | ☐ |
UI Placement | ☐ | ☐ | ☐ | ☐ |
Feasibility | ☐ | ☐ | ☐ | ☐ |
Immersion | ☐ | ☐ | ☐ | ☐ |
Evaluation Activity