Bringing the worlds largest digital store to VR

One of the largest applications we built for Daydream was the Play Store. The team had started and stopped the projects several times and the project was becoming a high risk. I was brought onto the project after working on the Daydream OS to try and solve it. The Play applications were some of the more UI intensive and challenging VR apps I’ve ever made.

Creating a UI system that would work for two apps

After a couple months of working on it I was also assigned the Play Movies app. Both apps needed to be completed in a very short period of time. I put a plan in place to design a single framework that would work for both apps, allowing our small team to complete both in time. While the two apps were able to share a great deal, they each had unique challenges.

Rapidly prototyping different designs

These apps needed to be designed and built, tested and shipped in under a couple months. No one on our team had ever built a VR app with this much information in it. To de-risk the project I started by creating a dozen VR prototypes exploring the key challenge of scrolling, merchandising, and reading product details. These prototypes allowed us to get early buy-in from a diverse set of partners and stakeholders, which enabled us to go fast later in the process. Several of these early concepts were shown on stage at Google IO when Daydream was announced.

Browsing from 50 to 50,000 items

The Play store was only going to launch with around 50 apps in it, while the play movies app would have well over 50,000 titles. I needed the same UI and categorization systems to scale broadly from a small and rarely changing library of apps, to a massive and always changing collection of movies and TV shows. I worked closely with the Play store and Play movies merchandising teams to understand their needs and ensure the store would look great in both cases.

Giving you only the details you need

Reading in VR is terrible, and most app and movie detail pages of a lot of text. I focused on creating a detail page that would de-emphasize reading. and put only the key information at the front. In the case of apps, we could make it so that each app had its own unique environment so you could preview jumping into that app right from the detail page. The template needed several variants to account for movies, TV shows and apps, along with versions for products you already owned.

Prototyping hover, scrolling and selection

It was fast to prototype different layouts, densities and designs. It was much more challenging to creating compelling tests of scrolling, dynamic hover, page transitions, etc. Because we were building this app in our own custom 3D engine, it was critical that we started prototyping in that environment as soon as possible. I worked closely with a small team of engineers to stand up prototypes to validate the concepts of navigation and usability.

Creating a great movie watching experience

The movies app had one huge piece of functionality that Play store did not. The actual movie playback experience was practically an app unto itself. Because of the time crunch I decided to partner very closely with the YouTube team, who were developing their own YouTube VR app. We agreed to collaborate on a single video playback experience that would be shared between the two apps. I supported this team with design concepts, prototypes and feedback.

Learning how people really use your app

While developing this app we tested it regularly with our co-workers in the office. Given the nature of our prototypes it wasn’t something we could share broadly or be taken home. As we got further along and people started testing it at home we quickly discovered that many users wanted to watch while laying down (something they never tried to do in the office). We quickly added a new tool to allow users to undock and move the screen around as they desire. This would allow them to sit or lay down in any position and have the screen just right. This was only one of hundreds of discoveries we found when users finally got their hands on the near final product.

Payments in VR was surprisingly difficult

After finishing most of the core store UI I needed to design the payments system and flows. I expected this to be a small project, but I was wrong. Simple things on a phone like adding a credit card become impossible if you have a headset on and can’t see your card. Also typing in passwords for security is very hard when typing is hard and you can’t copy paste. These are just two of dozens of problems we had to solve in order to support purchases in the store and in-app purchases for developers to integrate with.