Goal: Explore UX/UI design challenges and create a final, tested product.
Role
Research
UX and VR Asset Design
Motion Design and Animation
VR Development
User Testing
Team
Naheel Jawaid
Armina Foroughi
Kae Lihn Ngo
The Pitch
As a group of senior design students, we wanted to explore design challenges beyond the standard media and into Virtual Reality for our Interface Design class' final project. Selecting VR entertainment for our domain, we learned how to design, develop, and test a working VR prototype. Using a Google Daydream and Pixel, we created a social viewing experience for the NBA using 360 video in VR.
Main Challenges
1. Learning how to design, develop, and test in an entirely foreign domain in a very short time period with limited resources
2. Explore the viability and future of VR into the mainstream via an engaging entertainment experience
The State of VR
Before selecting our domain to design for within VR, we did a VR UX audit of several VR interfaces across HTC Vive, Cardboard, and Daydream platforms. Unlike mobile or web interfaces, there were not any VR design systems we could look at and learn from (pre-Microsoft Fluent) and VR resources were scattered. Specifically for our project goals, we found that a lot of the VR resources were based on gaming or advanced systems like the Vive, and not so much the Daydream or Cardboard. In the end, I ended of creating a rough UX of VR handbook for our team to reference from.
The more we audited VR apps, the more design opportunities we saw and the more excited we got. There were limitless opportunities to design for delightful moments and fun interactions. Unlike screen interfaces, VR had to almost revert back to a certain degree of skeumorphism, but now in a 3D world that included sounmd and space. We also discovered completely new design challenges and problems, such as being lost in a space, transition stages that leave the user literally in the darkness, or the importance of 3D spatial design as part of the experience.
VR Entertainment
As we audited the UX of VR, we also researched two primary domains with opportunities for design - eCommerce (in the form of a branded pop-up shop experience) and live sports entertainment. Both areas had similar opportunities in terms of branded, entertainment-based experiences with UX/UI challenges and fit into our vision of "mainstream VR"* on the Daydream platform. However, after doing a quick mini-sprint on each, we realized that the pop-up shop experience relied a lot more on spatial design (which would likely be out of the scope of our project), and that a live-sports viewing experience would be "easier" as it was a much more common and directed experience.
Once we decided on live sports viewing, we selected NBA as our "client" and chose to develop a more fully-featured VR product than their NextVR offering. From there, each of us conducted interviews with basketball fans and even watched a game to map out the experience and engagement of watching a live game from home.
*mainstream VR meaning that we believed in order for VR to be adopted by the masses, it would have to be set in accessible (daydream), short (~30 min), entertainment-based experiences
Based on our user reserach and knowlewdge of VR, we outlined a quick overview of our project as well as a persona
Initial Design
Based on our cumulative research, knowledge, and experience we created our own, modified journey map. However, rather than comprehensively map an entire product with its stakeholders, touchpoints, and etc. we used our journey framework to brainstorm and assemble all our ideas of what watching live sports in VR should be. This allowed us to map out the features and MVP for our prototype and what parts of the experience work in VR vs. a mobile interface. One of our key insights during the process was designing for "breaks" out of VR while still maintaining a cohesive and engaging experience. We then each sketched our interpretations of the key features we would be designing and developing.
Learning to Develop
The most challenging part of the project was the steep learning curve we had to climb in order to make our VR prototype. We wanted something that was real, that worked - which is why we decided to learn how to develop a Daydream prototype using Unity. As I had previous game development experience, I worked ahead and began testing and developing other features while the rest of my group became acquainted with Unity and using the Google VR SDK. The development phase became a hectic frenzy of Unity tutorials, prototype files, and asset creation, with our general workflow being 2 dedicated VR developers and 2 visual designers in charge of assets. I was working on the former, so I would prototype with placeholders and work with the visual designers in specifying any changes or implementations in their assets.
Working in this quick "learn then prototype" environment led to several smart "hacks" in our final prototype. For example, animations were split up between 60 fps sprite sheets from After Effects and using Unity's more basic animation and transition states. We made use of several "VR Prototyping" tools such as Facebook's VR Template for Occulus, the Sketch to VR plugin, and a variety of VR and Daydream tutorials. I even used Google Cardboard templates to speed up the prototype testing as we only had one Daydream-compatible phone. The best "hack" we did (and later built our prototype on), was a mixture of the Facebook VR template (designed for Occulus) interjected and modified with the Google VR SDK and several tutorial files that allowed us to have a base "360 video with Daydream Control" prototype file to work off of.
User Testing
Once we had a working, mostly-interactive prototype of our MVP, we went to test with users. Our user scenario was written following our user journey framework and we used paper prototypes in place of a phone for parts of our test. Our scenario had our users sitting comfortably in their living room as they went on to their Daydream to watch the next game in 360 VR with their friends. Our test featured one observer watching a mirrored screen of what the user was seeing in VR, two note-takers/observers, and one narrator that guided the user through the test.
More so than on mobile or web interfaces, testing in VR was critical in discovering new insights and usability issues. Especially as VR is even more foreign to end users than to us (the designers), testing allowed us to assess all of our new ideas and assumptions for designing in VR.
The key findings we got from our user testing were:
1. Improving the overall visibility of UI elements to improve usability and comfort. This included further adjustments of UI sizing and depth and adding additional hover-states and feedback such that user's are never lost in the UI.
2. Re-positioning the UI within space such that elements are easily discoverable and viewable. In addition, though we did not have a scoreboard in our UI, we received feedback on where the best positioning would be.
3. Improving the post-game dashboard features to meet the expectations and needs of the spectators.
Design Evaluation
After concluding and summarizing our test results, we turned to evaluating our prototype. However, since VR can be difficult to evaluate in groups and we were limited in resources, we decided to print out screenshots of the VR interface as static assets and in VR. Thus we could look at how changes in interface and assets are affected in and out of VR.
The MVP Prototype
Game Selection and Social Viewing
Once users enter into their Daydream Headset from their mobile app (not designed), they are given 3 primary tabs - Games, Videos, and Social.
- Games displays all of the active and upcoming games (and if any of the user's friends are watching as well).
- Videos shows highlights, past games, and content created by the user and the NBA.
- Social displays all of the active groups currently watching games.
The Social tab highlights any public or friend groups that the user can join. Public groups enable large communities to create their own broadcast. Rather than having a conference call with friends, Public groups enable the leaders to "broadcast" to their audience, with the audience being able to "react" (similar to Facebook reactions). These public groups may lead to opportunities for networks and advertisers to provide their own branded NBA viewing experience. By allowing the user to watch individually, with friends, or with a community allows for a variety of viewing experiences based on their needs and allows for a more social and open VR experience.
Audio Modularity
We wanted to explore the idea of modularity and customization within the VR space. Building off the existing audio module of the Daydream, we wanted to enable users to experience their game however they want. Using audio as an example, we allow the user to balance the audio of the group call, default commentator, the stadium crowd/ambient noise, and even music if they wish to stream audio from another app. And to make things more convenient, we provide quick toggles for muting and presets so users don't have to fumble as much with their Daydream controller.
Multi-Game Tracking
Using the Daydream controller, we allow users to easily track and jump between games unobtrusively. No need for large obtrusive menus that block the viewing experience.
Player Bar and Highlights
Rather than a passive broadcasting experience, we looked at livestreaming services such as Twitch to see how we could add some interactivity to the VR experience. Our playbar allows users to scrub back to rewatch and relive a key play in the game. In addition to the highlight button below the bar, a quick double tap of the Daydream controller allows users to create their own highlight. Highlights are marked on the play bar and show timestamps and the score when scrubbed over or when they jump to a highlight using the arrow buttons. Users can also view their highlights and the NBA-created reel once the game is over in the Post-Game Dashboard.
Camera Change
Leveraging the power of multiple cameras and the 3D VR space, we wanted to allow users to be able to "sit" where they want in the game so they can experience the game however they wish. In our prototype, we added "net cams" which would be great for a niche moment such as a cool dunk. However, this system could extend to courtside, skyboxes, etc. These markers are placed naturally in the space such that as users are following the action, they can easily switch seats using the button in their field of vision.
An important feature we discovered in user testing was that users wanted to be able to quickly return to their designated "main view", so we added a button right above the scoreboard in addition to the camera markers in 3D space.
In and out of VR Experience
During our research, we realized that many VR experiences were incredibly static - users enter VR, stay for 30 minutes to an hour in whatever media, and then they exit VR. Knowing that people watch NBA games differently and have different priorities that can't afford them to keep a VR headset on for an hour, we tried to make the experience as seamless as possible. Though users may miss out on the VR experience, they'll always be able to watch the game and keep track of stats.
Post-Game Dashboard
Though the game may be over, the excitement keeps going. The Post-Game dashboard allows users with a multitude of options. They can stay in the stadium space and unwind, wrap up their post game talks in the conference call, jump to another game, or relive the best moments by watching user and NBA generated content and highlights.
Beyond the MVP
Overall, I am incredibly proud of what we achieved over a 4 week timespan. As a designer is was incredibly exciting to work on the frontiers of tech and face new design challenges and unfamiliar domains. And as someone with a background in game development, learning to create the prototype in Unity was a satisfying challenge. In 4 weeks we were learned how to to design, develop, test, and iterate/critique a working VR prototype as students. Though we only as got as far as an MVP, we still had many ideas we wanted to explore such as:
