Fall 2018

Google Doodle VR

Creating a unique story for a VR experience with the Google Cardboard.
  • Art Direction
  • VR/AR Experience
  • 3D Modelling
  • My Role

    Project management, Brainstorming, Design, 3D Modelling

    Tools

    Adobe Illustrator, Cinema 4D, A-Frame, and Adobe Indesign

    Product

    Virtual Reality application for a Google Doodle

    Details

    6 week long school project

    Working with Roneilla Bumanlag

    The front end developer, VR Dev

    Challenge

    Entice users to interact with and learn more about a topic through an accessible and interactive web-based Google Doodle.

    Solution

    To create an accessible, interactive, and web based VR application that shows users the history of Virtual Reality, and invites them to play and explore a VR environment.

    Project Timeline

    Week 1

    Brainstorming

    Conceptualizing

    Picking Design

    Week 2

    Plan Animations

    Interactivity

    Product Research

    Week 3

    Starting Code

    First Demo

    3D Modelling

    Week 4

    Continue Coding

    First User Testing

    More 3D Modelling

    Week 5

    Coding Animations

    Soundscaping

    Beta Testing

    Week 6

    Presentation

    Youtube Video

    Invention of the Elevator

    Discovery of Mars

    VR B-Day party

    Polar Bear Swim

    Invention of the Elevator

    Polar Bear Swim

    To the Drawing Board! ✏️

    We were thinking of doing lots of different topics, some of the topics we thought of were things like the discovery of Pluto, invention of the elevator, anniversary of the polar dive swim, Oculus Rift anniversary (A VR competitor of Google), etc. Everytime we thought of a topic we always thought

    "Why are we using VR to tell this story?"

    With further research, we actually found out that Virtual reality was celebrating it's 50th anniversary that year. It was like the stars had aligned, and we had decided we were going to use VR to tell the story of VR.

    What is a Google Doodle?

    They celebrate important milestones
    They appear above the search bar
    They are animations, videos, or games
    They are meant to be quick interactions
    Call to action is to learn more

    Why did we choose VR?

    Wanted to tell a story in a 3D space
    We wanted to do something novel and unique
    We also wanted to find a way to sell Google Cardboard

    What are the limitations of VR?

    The person can't move around the environment
    Requires for someone to already have a VR headset
    It's bad for people with vision problems

    Past Illustration

    Present Illustration

    Creating Our Narrative. 🌈

    This was a sketch of what our final concept designs were. The idea was that you would be transported between the past and the present environment through a VR experience.

    One environment was the past VR which was just lines and blocky shapes, and the other is a fully interactive environment showcasing the Google branding and with an interactive play area set up as a birthday party for Virtual Reality.

    Cinema 4D

    3D Modelling the Environment. 🧩

    Learning Cinema 4D in the labs

    We purposefully went with a low polygon art style because it was easy to load on mobile devices. If we used larger files or more complex models then we may not have been able to run the application on older phones, which isn't accessible for people since they wouldn't have access to it.

    Our first model is very simple, and this allows for a better load time when you enter the page. Although load time is not very long, next time we would have added a preloader.

    Coding The Application. 💻

    My partner Roneilla coded the application, including importing the environment, and we both learned a lot of new things about A-Frame the VR Javascript Library.

    We used a Javascript framework called "A-Frame" to help us code VR for the web, this way all we had to do was add some lines of code and we had a working VR app!

    Although it still takes a long time to load the page this is just one of the downsides to using VR, and in the future we would have created a loading symbol or splash screen.

    Challenges I encountered. 🙅‍

    When creating everything we had so many ideas about creating a game, animating the environment with birds and moving water, but we didn't have enough time to complete this vision. Having only 5 weeks of production limited us in a huge way.

    I also kept having to change the model to make sure it wasn't too large of a file, since we didn't have time to make something to load the models faster, we just had to keep the files as small as possible.

    Beta Testing in the final week! ⏰

    It was important to make sure we factored in how users behaved to our application. As developers we knew what the triggers were to move forward but our users might not have. We made sure to get feedback from 10 BETA testers.

    When we got our feedback, we found that 6/10 users had no idea where to go on the starting page. Without this testing period we would not have known the first-time user behavior so knowing this we added signs telling users where to look and fixed some other things that were buggy as well.

    Discover

    People notice the 3D environment in front of them, they may feel inclined to see more

    Explore

    Now without direction, they can explore and uncover things for themselves.

    Share

    They create an experience that they themselves can share with others that is unique to them.

    How ours works. 👩‍🏫

  • Wanted to make it more rewarding to find something yourself
  • Portal represents the connection between the past and present
  • Boosting user engagement on the site by making a story
  • Past Environment

    Present Environment

    VR on mobile in the headset

    What would I change/add. 🙇‍

  • A UI for getting people to buy Google Cardboard
  • Game experience where you have to find all 5 VR goggles
  • A preloader so that users know the 3D model is loading
  • Better shaders and mobile sound playing
  • Key learnings from this project. ⭐️

    Never jump to pick one design, keep iterating!
    Beta testing and user testing helps gather important insights.
    It's important to schedule the important features first (MVP!)