Print this Page
MY WORK:
- 360° Photo Shooting
- Wireframing
- Prototyping
- UI and Visual Design
TIME:
Jan. 2016 – May. 2017
COLLABORATED WITH:
- Ivan Klus, Web Developer
- Jack Qi, UI/UX Designer.
This is a web-based 360 virtual tour for Cincinnati Children’s Hospital Medical Center (CCHMC) new campus.
Data Collection & Annotation
![150 360 images were shot](https://ik.imagekit.io/aayang/wp/wp-content/uploads/2022/12/150Locations-1024x555.jpg)
![I was annotation the map](https://ik.imagekit.io/aayang/wp/wp-content/uploads/2022/12/CC9D9F48-D8EB-4F47-809B-6A1061FD42FD-small-1024x768.jpg)
UI Element Design
Virtual Tour Guide: Robbie
![Virtural Tour Guide](https://ik.imagekit.io/aayang/wp/wp-content/uploads/2022/12/Robbie-v2-1024x491.png)
Icons
Icon Buttons
![](https://ik.imagekit.io/aayang/wp/wp-content/uploads/2022/12/DisplayOptions.png)
Navigation Icons
![](https://ik.imagekit.io/aayang/wp/wp-content/uploads/2022/12/OrientationElements.png)
Menu Icons
![](https://ik.imagekit.io/aayang/wp/wp-content/uploads/2022/12/ControlBarElements.png)
3D Floor Plan
The floor plans are isometric maps. I used Adobe Illustrator with its 3D features to create the floor plans.
![VR Tour Floor Plan](https://ik.imagekit.io/aayang/wp/wp-content/uploads/2022/12/map_1F_-1024x628.png)
![VR Tour Floor Plan](https://ik.imagekit.io/aayang/wp/wp-content/uploads/2022/12/map_2F-Kid.png)
![VR Tour Floor Plan](https://ik.imagekit.io/aayang/wp/wp-content/uploads/2022/12/map_1F-full-1024x728.png)
![VR Tour Floor Plan](https://ik.imagekit.io/aayang/wp/wp-content/uploads/2022/12/map_W_4F-1024x728.png)
![VR Tour Floor Plan](https://ik.imagekit.io/aayang/wp/wp-content/uploads/2022/12/map_Outside-1024x703.png)
![VR Tour Floor Plan](https://ik.imagekit.io/aayang/wp/wp-content/uploads/2022/12/map_1F-Kid-1024x569.png)
Put them Together
![](https://ik.imagekit.io/aayang/wp/wp-content/uploads/2022/12/VR-Tour-2.jpg)
![](https://ik.imagekit.io/aayang/wp/wp-content/uploads/2022/12/VR-Tour-1.jpg)
Prototype
To simulate the drag-and-drop feature in VR experience, I used Axure RP to create the interactive prototype. Axure is an advanced prototyping tool that allows me to make complex interactions and add customized scripts, which is not available on any other tools.
Please try the following prototype. It is also available at http://vggiqz.axshare.com/#c=2
Design for Mobile
![](https://ik.imagekit.io/aayang/wp/wp-content/uploads/2022/12/Samsung-Galaxy-S8-Mockup-1-1024x382.jpg)
![](https://ik.imagekit.io/aayang/wp/wp-content/uploads/2022/12/Samsung-Galaxy-S8-Mockup-2-1024x539.png)
VR Mode
![mobile version](https://ik.imagekit.io/aayang/wp/wp-content/uploads/2022/12/Samsung-Galaxy-S8-Mockup-3-798x1024.png)