Behind the Scenes of the World’s Best XR Creators

Livelike’s design team is probably the most experienced and knowledgeable team I’ve met in the VR space. They started 3.5 years ago and basically have built their own design guidelines for VR. Jérémie Lasnier, co-founder and Chief Creative Officer and Matt Flores, a UI/UX designer were very kind to host me in their new office in NYC and share valuable insights on their design process.

LiveLike’s live streaming platform is a white label platform that allows broadcasters to stream regular or interactive VR content under their own brand with or without a VR headset.

Livelike is cracking the live sport experience, by providing its users the feeling they are in the stadium. Through multiple cameras placed in the stadium, the users can teleport themselves and watch the game from different angles of the stadium. They can also access data and statistics about the game, and enjoy a social experience with their friends.

Can you tell us about your background and how did you end up working in the VR space?

(Jérémie) Prior to Livelike I had done a Master’s in Media Design at the University of Art and Design in Geneva (HEAD), followed by a research program in interaction design at ENSAD Lab in Paris. During the program I was working with different startups around quantified self products and started to explore the VR space as well. In one of the VR meetups I had attended in Paris I met André my future cofounder. We talked about the idea of feeling to be in a stadium with VR and decided to build a first prototype. 3.5 years later we are here in NYC having the opportunity to broadcast the biggest events in the world with a team of 50 talented people.

(Matt) I went to school focusing on new media and design. After school, I worked for a digital agency designing apps across many platforms at once (xbox, ios, android, connected TV). I learned how to understand a brand and spread its digital product to many platforms in a cohesive way. I got interested in VR after playing with the first Oculus DK, and once I found Livelike I jumped right in. I believe that my background in 2D was helpful while entering the 3D space, as it gave me the understanding of important design fundamentals, although there is a whole new set of rules to learn and define in order to explode 2D knowledge into the 3D space.

Please share more about your team

We are a team of 7 designers. In addition to us we have another UX/UI designer — designing the UI components of the product, an interaction designer — responsible for producing the prototypes, a creative strategist — working on concept development and supporting the business team. We also have two 3D artists — who are designing 3D assets, animations, interactions and bringing the environment to life. In general we can say that the designers here are pretty flexible and working on different things, which is quite important considering the fact that Livelike is dealing with completely new space. Designers entering this space should be willing to learn new skills constantly and act as all-around players. We are now on a process of recruiting a UX designer and graphic designer.

Can you walk us through your workflow?

We are working with the product team to figure out which new features we need to build and how it fits the future roadmap. They write PRDs, set tasks, goals and metrics.

Obviously there are some adaptations to be made, but all in all it’s pretty similar to the way you create a mobile app. We start with finding some references for inspiration, and then sketching (2D based) different ideas. After that, we have whiteboard sessions, where we share and discuss the ideas, until we reach a point where we feel we have something that is worth prototyping. We usually use Unity for that stage, importing images to get the feel of positions, scaling and distances. In case we are working on a more complex prototype that requires animations, the interaction designer is also taking part of this process. From our experience, It’s highly important to test the ergonomics early on and understand if it’s comfortable to use. We test it through the Oculus Rift, since it’s the fastest way to visualize a Unity project, while pushing to Samsung Gear or Oculus Go requires a build.

The next stage would be speaking to the dev team to better understand what is feasible. Sometimes the design requirements are too complex to implement and the close discussion with the dev team is highly important to make the necessary tweaks. Then, we build a UX map which elaborates the logic of the experience. The UX map, together with wireframes and a detailed written explanation serve as the materials we prepare for a final approval meeting. After discussing the feature in details as a team, we can move to a higher fidelity prototype.

User testing is a must! We collect feedback from the folks in the office, testing how the experience looks and feels. When implementing advanced features we also bring external users to share their opinion.

Handing off the final design and prototype to the dev team is always a tricky part, especially in VR. We tried different methods until we eventually landed on the method that works best for us. Providing a written doc including charts and examples, together with an interactive prototype, improved this process a lot. In the end of the day, working closely with the dev team and having a quick feedback loop is the key for a successful implementation.

What is the biggest challenge you face around your workflow and how do you solve it?

There aren’t solid design guidelines or rules for our space yet, so we have to come up with new ideas for each new feature. It then it needs to be prototyped and tested a few times until we feel it works smoothly. This affects our ability to build new features quickly. Although it might take more time, it’s important to be sure you’re in the right direction before you can take a concept to full development. Making changes after development has started is much more expensive and time consuming.

Another challenge is the fact that we design in 2D tools that are designed for web / mobile and translate it to 3D. The more accurate way of doing it in designing in 3D while being in a “3D mindset”. Thinking in 3D and working in 2D really limits your mind.

What are the UI/UX rules / best practices you always keep?

There are some guides about comfort and ergonomics out there, but we were missing guides on usability or aesthetics. So we’ve built our own design guidelines internally, for example how a button should work and what feedback a user gets when hovering or selecting an interactive item.

There is a Google talk from I/O that we found super useful, explaining the concept of DMMs (Distance Independent Millimeters), which is about translating pixels into 3D space. That was a big revolution to enable our design tools to use the same values as Unity (1 meter in Unity is 1000 pixels if the object is 1 meter away).

What things surprised you the most about working in the VR space?

Really simple interactions work very well. For example, a simple press of a button in VR, feels really good. People think you need to go wild with complex interactions and transitions like in sci-fi movies, but the truth is that in many cases simple is better; less is more.

We are focusing on building intuitive and easy-to-use interfaces, so the user won’t need to think how to interact with the environment, but rather intuitively find their way. It should be so obvious that the interface disappears; the user only sees the content.

What are the biggest mistakes you made when creating VR at first?

Because of the resolution difference between mobile phones (you can’t see pixels) and VR (lower resolution), we had to relearn everything in order to make it suitable to VR. The main issue was the notion of scale. We designed bold typography, unproportional buttons and images were much bigger than we expected.

Now we imagine designing like if the user is in a cockpit, so the interface and every element should be quite close to them, in an arms reach. Job Simulator did a great job at this.

What advice would you give to a team starting to work at the VR space?

Start creating your own style guides really early, since you can’t rely on someone else to build it for you. It’s important to build a central location with the fundamentals that work for your product, so you won’t have to make the same decision over and over again — it makes the process much faster. Also, think with depth in mind, even when you’re just sketching.

We highly recommend to learn the basic stuff first; scaling issues, gazing system, locomotion, typography size, assets weight and how it influences the experience & frame rate optimization.

There are great apps out there that have done well from the design perspective. Try all of them, get inspiration and try the things you think can be applicable to your product.

Livelike is a unique product in many aspects. One of them is the time spent within VR. How does it influence your design?

One of the main issues is the posture of the user because watching sports is quite a long session and they’re less likely to be in a swivel chair or turning around. The user comfort is our first priority when we’re approaching the design process. Also, making sure the user is not passive, by allowing teleportation to different locations, interacting with stats about the game, joining others fans or your friends in social with customized avatars and adding small interactions that delight the user during the experience, so he/she can enjoy a longer experience.

Anything else you would like to share?

Get Unity for free and start playing with it, there’s a lot of free tutorials. Try free content, as much as possible, recreate basic stuff and see how it feels, play with depth.

Take the first step, just do it.