Exploring the Shinto Shrine

Experience the customs and traditions of a Shinto Shrine from anywhere. Learn the average layout and how to navigate it just like a native.

UX/UI

3D

Illustration

Product Design

Research

Prototyping

Shinto Shrine Cover Image

Timeline

12 Weeks

Project Year

2023

Role

Designer (Individual Project)

Software

After Effects, Blender, Figma, Procreate

The Final Prototype

The Problem

Shinto Shrine’s religious practices can be difficult to grasp, especially for foreigners. There are many rules and features but without experiencing it first hand it can be hard to understand.

The Solution

Present an interactive, simply illustrated, average lay-out of a Shinto Shrine. Includes a guide and close look to each feature that can be explored in depth.

Design Process

Research
1
2
Sketching + Planning
Styles + Assets
3
Compositions
4
Prototype
5
Research
Sketching +
Planning
Styles +
Assets
Compositions
Prototype
Research
Sketching +
Planning
Styles +
Assets
Compositions
Prototype
Research
Sketching +
Planning
Styles +
Assets
Compositions
Prototype
Research
What makes a Shinto Shrine?
How are Shinto Shrines Typically Laid Out?
All Shinto Shrines have common features and actions but no two are identical.
Typical Features Include:
  • Sakaki
  • Torii Gate
  • Sando
  • Chozuya
  • Shamusho
  • Toro
  • Komainu
  • Ema
  • Haiden
  • Tamagaki
  • Honden
What are important actions to complete while at a shrine?
To unfamiliar tourists it feels as if there are a textbooks worth of specific rules to follow to properly navigate a Shinto Shrine
UX/UI Trends
3D Scanned Experiences
Out of the few virtual experiences I found most were based in realistic 3D scans of actual places. Since my Shinto Shrine is fictional I had to choose a different medium to display my mini world in an educational and clear format...
Take Aways
  • Closer look views at specific parts of the map
  • Interactive full view map
  • Pin points for interactable elements
Example Maps from:
  • Smithsonian Virtual Tour
  • Pace University
Sketching + Planning
Site Map
Although there are many common elements to a Shinto Shrine the main focus of this prototype is highlighted in red
Concept Sketches
Exploration Goals
How will the main map be laid out? What will entering the site look like? What does the close up view on a structure look like What capabilities does this include
Take Aways
Creating a 3D virtual world out of nothing is much more difficult to visualize than a 2D one
Wireframes
Landing Page
  • Title and catching visuals
  • Animation that feels like peeking through foliage to reveal something amazing
Home Page/Main Map
  • When the navigation is the 3d map it quickly becomes a pain point and time sink
  • Major trust the process experience
Closer Look
  • Main interactable visual
  • Information about what visual is
  • How to interact with element in real life (if any)
Place holder image from: Nippon.com
Styles + Assets
Inspiration Board
Visual Assets
3D Elements
made in Blender
Illustrations
made in Procreate
Compositions
Iterations
Exploration Goals
  • How will the main map be laid out?
  • What will entering the site look like?
  • What does the close up view on a structure look like?
  • What capabilities does this include
Take Aways
  • Creating a 3d virtual world out of nothing is much more difficult to visualize than a 2d one
Final Compositions
Prototype
Animated Prototype
Research
What makes a Shinto Shrine?
How are Shinto Shrines Typically Laid Out?
All Shinto Shrines have common features and actions but no two are identical.
Typical Features Include:
  • Sakaki
  • Torii Gate
  • Sando
  • Chozuya
  • Shamusho
  • Toro
  • Komainu
  • Ema
  • Haiden
  • Tamagaki
  • Honden
What are important actions to complete while at a shrine?
To unfamiliar tourists it feels as if there are a textbooks worth of specific rules to follow to properly navigate a Shinto Shrine
UX/UI Trends
3D Scanned Experiences
Out of the few virtual experiences I found most were based in realistic 3D scans of actual places. Since my Shinto Shrine is fictional I had to choose a different medium to display my mini world in an educational and clear format...
Take Aways
  • Closer look views at specific parts of the map
  • Interactive full view map
  • Pin points for interactable elements
Example Maps from:
  • Smithsonian Virtual Tour
  • Pace University
Sketching + Planning
Site Map
Although there are many common elements to a Shinto Shrine the main focus of this prototype is highlighted in red
Concept Sketches
Exploration Goals
How will the main map be laid out? What will entering the site look like? What does the close up view on a structure look like What capabilities does this include
Take Aways
Creating a 3D virtual world out of nothing is much more difficult to visualize than a 2D one
Wireframes
Landing Page
  • Title and catching visuals
  • Animation that feels like peeking through foliage to reveal something amazing
Home Page/Main Map
  • When the navigation is the 3d map it quickly becomes a pain point and time sink
  • Major trust the process experience
Closer Look
  • Main interactable visual
  • Information about what visual is
  • How to interact with element in real life (if any)
Place holder image from: Nippon.com
Styles + Assets
Inspiration Board
Visual Assets
3D Elements
made in Blender
Illustrations
made in Procreate
Compositions
Iterations
Exploration Goals
  • How will the main map be laid out?
  • What will entering the site look like?
  • What does the close up view on a structure look like?
  • What capabilities does this include
Take Aways
  • Creating a 3d virtual world out of nothing is much more difficult to visualize than a 2d one
Final Compositions
Prototype
Animated Prototype