nba hero

NBA in Daydream VR

Context

Created as a part of a senior interface design course, in a team of 5, over the span of 4 weeks.

Prototyping tools: Unity, Sketch, After Effects, Daydream and Google Cardboard VR headsets, Google Pixel

Role

Prototyping in VR, visual + interaction design, user research + testing.

NBA in VR is an experimental project that takes a social, customizable approach to the watching experience of a live basketball game in virtual reality.

Approaching this project through the lens of experience and interaction design, my team and I wanted to tackle UI challenges in areas of emerging tech, like VR, where a lot of the interaction patterns are still under exploration and experimentation.

We ultimately designed and prototyped a VR concept product that takes advantage of the opportunities offered in VR in order to give the user a more active role in the watching experience (for instance letting them save their favourite moments, watch the game with friends, switch seats/change camera angles, etc), rather than the current NBA x NextVR offering, which essentially is just a 360 live stream of a game.



My role

UI design and prototyping: I was mainly responsible for designing the UI of our product and co-developing the prototype in Unity for the pre-game and post-game features. I also focused on conceptualizing and materializing what the social aspect of our app was going to be, which was weaved throughout the whole journey.

User research: I helped create the questionnaire and conduct user research. I also synthesized our research into key insight that ultimately helped define the main features of our app.

User testing: User testing was a huge challenge in our process, since it’s within a new realm and there are zero to very few frameworks around how to approach testing in VR, therefore I helped create my team’s own framework. Just like the user research final synthesis, I took charge of framing patterns and all the key insights from user testing, which defined the final iteration of our prototype.



user testing in VR

Prototype

pre-game — in-game — post-game
Pre-game journey

There are two entry points to watch a game - through the social tab or ongoing games. The user is able to browse ongoing and upcoming games right on landing. Moving to the social tab allows them to see which friend/public groups are currently active, or make a new group to watch the game with. The app allows for a variety of viewing experiences based on the user's own preference by having the options of watching the game individually, with friends, or with a larger public group.

pre-game — in-game — post-game
Player bar and favouriting highlights of the game

Tapping anywhere once will bring up the player bar. You can save a key play that you just watched with the favourite button on the player, or simply double-tap anywhere on the screen. Saved highlights can be accessed either through the indicators on the player or through the dashboard button on the bottom left.

pre-game — in-game — post-game
Modular layers of audio

In order to make the user’s experience more customizable, the app gives them control over what they can hear during the game. The user is able to access this audio panel through a CTA after pressing the volume buttons on the controller. This feature not only provides NBA’s own audio presets, but also allows them to change audio levels for their call, commentator, crowd, and even music if they simultaneously stream songs from other apps.

pre-game — in-game — post-game
Changing seats / camera angle

You can tap on any of the contextual icons in the environment to switch seats and change your view. Through user testing we found that switching views would be more common in niche moments in the game, so you have a quick button always at the top to go back to your default view.

pre-game — in-game — post-game
Browsing through ongoing games

The app button accesses glanceable news about other games that are currently happening. You can swipe through these during the game, and if another game catches your interest, you can hop into it by holding the app button.

pre-game — in-game — post-game
Taking breaks from watching the game / being in VR

Basketball games are long, so often you might want to take a break. When you take the headset off, there is a seamless transition between the VR environment to the live stream game on the mobile app, so that you can keep updated if you choose to. There is a prominent CTA that will take you right back in the game when you are ready to hop back in.

pre-game — in-game — post-game
End game dashboard

The post-game dashboard is launched when the game is over. You’ll still be able to see the call you’re in, and can get out of it when you’re done chatting. You can access your own saved highlights, as well as NBA’s top picks, as a way to wrap up the game. Upcoming games are also shown at the bottom of the dashboard, so you can see what other games you can watch next.

Process

We taught ourselves how to design, prototype, and test in VR from scratch in a very short amount of time, with the help of limited resources. Here is an overview of our 7 step process and how we approached the challenges that we faced throughout.

1 / 8 — Becoming familiar with VR through auditing existing apps

One of our first challenges was familiarizing ourselves with VR. Quickly. Through limited resources such as UXofVR and online videos on the Daydream, we managed to create a strong foundation before designing for the Daydream (check out our own UX of VR handbook). One way that I found super effective in our research process was auditing existing apps in VR that ranged from e-commerce experiences to native Daydream apps such as Youtube VR. We took notes not only on major problems that we noticed with these apps, but also opportunity areas that would inform our own app later on in the process.

In auditing the example above, we found futuristic designs and fast transitions jarring. We also realized that we need to pay extra attention to navigation and wayfinding in VR, since the patterns are not established yet and most apps, such as this one, still lack in this area.

2 / 8 — User research and learning about the basketball culture

At this point we had become more familiar with the technology, so it was important to take a pause on the technology-driven process and take a human-centered approach, in order to make sure that we are addressing the basketball fans’ needs in our product. Therefore, we created a questionnaire and conducted user research with 7 basketball fans. Our insights from the research gave birth to features such as favouriting highlights of the game, audio modularity, etc.

3 / 8 — Journey framework of the full basketball watching experience

As an experience designer first, it was important to me to make sure we have an understanding of the full sports watching experience. So I held a workshop on experience mapping that I had learned in my previous internship at Green Stone, and with my team, we mapped out the journey based on our user research. Below is the simplified version of our map that has all the features listed for each touchpoint that we designed and iterated on.

journey framework

4 / 8 — Quick paper sketches of features + testing the waters in Unity

We quickly learned that unlike prototyping tools for other interfaces that we have designed (mobile, desktop, etc), Unity's nature didn’t allow for quick prototyping and iterating. Which is why we defined the whole product (all the features + journeys) through quick sketches and used the template provided by Facebook Design in order to make sure we were placing the UI elements within spatial ranges that made sense. This helped us get a good grasp of the environment’s scale and spatial placement and design coherent pre-game, in-game and post-game journeys, before getting caught in high fidelity mock ups and prototypes.

social aspect of the app - sketches

Early sketches for the social aspect of the watching experience — joining a group call in the pre-game journey.

social aspect of the app - placement using the fb template

Quick mock ups to test spatial placement of UI elements in VR using the Facebook VR template.

5 / 8 — First iteration of the prototype

This was the most challenging step for the team. There was a steep learning curve in the beginning, which pushed us to find ways to hack the system and speed up the process. We followed some tutorials that helped us create a base file with 360 video environment with Daydream controls, and then used a combination of different tools including the Facebook VR template and Google VR SDK to prototype.

A snippet of the initial prototype. From testing, we got feedback on issues such as the visibility of UI elements and the interaction of favouriting a highlight and addressed them in the 2nd iteration.

6 / 8 — User testing

Once we had the first iteration of our prototype, we tested with 5 users. We closely followed the journey framework for the testing scenario, and focused it mainly on 4 user flows - finding and selecting a game to watch (both through the games tab and social), watching the game and interacting with in-game features, taking a break from watching the game and hoping back in, and finally the end-game flow. During testing, I had the phone connected to my laptop so we could observe the user’s behaviour and took notes accordingly. Once testing was over, I took all of my notes and synthesized them into a “user feedback and system refinement” document that led to the 2nd and final iteration of the app for this project.

paper prototypes for testing

For the 3rd flow, which we called "in and out of VR transition", we used paper sketches to fill in the gap and communicate the screens that the user would see on their mobile app.

testing with users

7 / 8 — Team critique session

This was one of the most enjoyable parts within our process for me. After testing, we printed out all of the screens, put them all up on the wall, and went around the room with post-its to do a full critique and evaluation of our product. I also made sure we were constantly referring to the findings that came out of user testing for every feature and journey. We walked out of that meeting with clear objectives and considerations for the final prototype.

crit session of our product

8 / 8 — 2nd and final iteration

The second protoype went a lot more smoothly, since we were more familiar and comfortable with our tools. Since the prototype files would get huge quickly and end up crashing every time they were loaded on the phone, we split up the animations between 60 fps sprite sheets from After Effects and Unity's own more basic animations. We iterated on the UI and refined the visuals based on the feedback that we got from users, and finally produced Sketch files for different journeys with specific notations for development. Producing the high fidelity prototype was the final step of our process.

example flow for final prototype notated screens for final prototype

Reflection

One of my takeaways was that the only way to create content for a new and unfamiliar medium is to jump right into it. There is a huge barrier for designers to approach VR because currently there aren’t many user-friendly prototyping tools available. However, my team and I found our way around this challenge by first doing simple and quick exercises in Unity, which made approaching it a lot less intimidating.

It’s easy to get carried away with all the hype around emerging technologies such as VR. But it was important to me to keep our designs grounded and make sure that every single feature was addressing a certain need, rather than being just a cool add-on.

Overall, I am very proud of the outcome, but most importantly, of our process and how we moved through the project from not knowing anything about designing for VR to producing a well thought-out, working prototype.