Press VR Project | How to build an UX Design Immersive
How to Research, Design, Prototype and Test for Virtual Reality & Augmented Reality
[ You can read this PROJECT as an EBOOK (responsive web design)| Use this link ]
[ Puedes LEER este proyecto en ESPAÑOL | Usa este link ]
THE CHALLENGE | FROM DIGITAL PAPER TO VIRTUAL EXPERIENCE
Press VR Project is a practical guide that explains how to design an user experience for virtual reality and augmented reality.
For the final project of Virtual Reality Design Immersive (64 hours classroom and 8 weeks project execution), UXER SCHOOL and Virtual Voyagers gave us the following challenge: “to be an experience that brings together the idea of the kiosk, with all the advantages of being a virtual environment and the pleasure of reading the traditional press.”
I had the pleasure of sharing this project with: Almudena López , Christian Cabrera , Laura Morales and myself Natali Sotomayor. My peers were amazing and I will not forget this experience :)
Table of Contents
1. TOOLS WE USED FOR THIS PROJECT
- 1.1 Project & File Management Tool
- 1.2 Team Communication
- 1.3 Brainstorming & Ideation Tools
- 1.4 User Flow & Site Mapping Tools
- 1.5 UI Design Tools
- 1.6 Prototyping Tools
- 1.7 Testing Tools
- 1.8 Video & Sound Tools
- 4.1 Analysing PressVR | First Problem
- 4.2 Investigating in order to establish insights
- 4.3 Creating Personas | Proto-Personas
- 4.4 Survey Results
- 4.5 Validating Personas | After User Research
- 4.6 Benchmark in order to understand Business
- 4.7 Why we chose Oculus Go
7. VALUE PROPOSITION & STRATEGY
9. INFORMATION ARCHITECTURE & FLOWCHART
- 9.1 First level | Onboarding & Magazines/Newspapers Selection
- 9.2 Second level | Customized Magazine/Newspaper Environment
- 9.3 Third level | Immersive news
13. PREPARING ASSETS FOR UNITY
- 16.1 Concept for WebVR
- 16.2 WebVR | Prototype in CoSpaces Edu
- 16.3 WebVR | Prototype in Unity
- 16.4 Oculus | Progressive Enhancement
1. TOOLS WE USED FOR THIS PROJECT
1.1 Project & File Management Tool
- Trello: here we organised our project by: TO DO, DOING and DONE tasks. And we had other resources in order to learn, get inspired and let us building the VR project.
- Google Drive: we worked with online documents that helped us to be collaborative and be faster.
- Gitbook: this tool was used for writing a high-quality documentation, to keep the research in order and for sharing knowledge.
- GoAbstract: we used this tool to manage version and collaborate our Sketch files.
1.2 Team Communication
- Appear.in: we used this video conversation almost each week for distribute work, discuss online document, to ideate and keep progressing on the project.
- Whatsapp: we used it at the end, for quick responses and to be closer.
- Slack: we used it like Appear.in, Google Drive and Trello. We had to communicate in a way because we could not be together in person (just once).
- vTime: we wanted to experience a VR Social and feel closer than using Appear.in. We tried differents scenarios and it was awesome!
1.3 Brainstorming & Ideation Tools
- Milanote: we used it for getting inspiration and building our assets for Unity.
- Pinterest: it was created for a moodboarding and to get inspiration for our Unity project.
1.4 User Flow & Site Mapping Tools
- Mindnode: we used it for Information Architecture (IA) of the Press VR App.
- Whimsical: this was another tool for Information Architecture (IA) of the Press VR App.
- Sketch cloud: we used it for building the storytelling, to establish interactions, to create onboarding and to present some ideations.
1.5 UI Design Tools
- Sketch: we used it for designing the user interface of the app (2D panels).
- Illustrator: we used it for our first storytelling of the project, Press VR Project, to build some escenarios, logo…
- Photoshop: we used it for creating the concept art, storytelling and the context of the first scenario.
1.6 Prototyping Tools
- CoSpaces Edu: this is an awesome tool to create prototypes before you go into Unity. It was good for feeling the VR and AR experience.
- Unity: we prototyped different scenarios for Press VR Project: Press selection for Newspaper (Weather, favorites, last news…) , Press selection for Science, Leisure and Travel (National Geographic) and Press selection for Sport (Marca.com).
- Cinema 4D: it was used for modelling a map.
- Vuforia: we used it for building AR prototypes.
1.7 Testing Tools
- Google Form: we used it for user survey with 135 responses.
1.8 Video & Sound Tools
- Quicktime: it was used for recording what we did in our desktop and to show our workflow.
- Vimeo: it was used for showing ours prototypes.
- Bendsound: we used this royalty free music for our videos.
2. BRIEFING
Create an experience that combines the pleasure of traditional reading with the advantages of a virtual environment.
2.1 Goals
- Congregate a multitude of contents and themes.
- Offer a new business channel for companies in the press sector.
- Constant updating of the content.
- Immersive experience that allows the implementation of different formats (video, images, 3D, spatial audio, eg.).
2.2 Target
- People that are familiar with reading press.
- People who want to be up-to-date on news, culture, sports, leisure.
- Ages between 27 and 60 years old.
3. THE PROCESS
3.1 Project Roadmap
Those are the steps that we followed during the project:
3.2 Virtual Reality Development Process
We worked through these phases in order to deliver a prototype in Unity and be as close to a final product. To add, UX was applied in each phases for having a VR prototype that users could feel, experience and live.
3.3 Video of the Process: Making Off
This was how we worked as a team!
4. RESEARCH
Digitalization has changed consumers behaviours, forcing companies to transform their sales strategies and even to create new services or products adapted to user needs.
4.1 Analysing PressVR | First Problem
4.2 Investigating in order to establish insights
4.3 Creating Personas | Proto-Personas
We created hypothesis of how our potential users could be.
We established two profiles:
- A youtuber-type Rubius
- A 55 year old reader
At first, we thought that a content generator could be a user of our application, but it was rejected after the survey results.
4.4 Survey Results
The field work was carried out during 7 consecutive days, from November 19 to 25, 2018, through a survey in Google form.
The survey consisted of a maximum of 12 questions and a single question was opened. This single questions gave us qualitative insights.
Main conclusions of the survey
- Of the 135 respondents, 88 surveyed are women (65.2%) and 47 men (34.8%).
- In addition, 43.2% of respondents are between 35–44 years of age, followed by 34.8% for ages between 25–34 years.
Experience with Virtual Reality Headsets
- Number of respondents is 135, of which 76 have used virtual reality headsets.
- Of the 135 respondents, 10% more experienced virtual reality (77 people) compared to augmented reality (65 people).
- The frequency of use of virtual reality headsets is at least between 1 to 2 times per week.
- The most used virtual reality headsets are the Samsung Gear VR by 28.9%, followed by the Oculus Go and Rift by 24%.
Information consumption preferences
- 50% of those who have used glasses have used virtual reality to watch videos and games.
- Information consumption formats focus on reading (83%) and videos on YouTube (63%)
Reading formats and sociability degree for readers.
- Of the 107 people who usually read only 32% are subscribed to digital format and only 7% to paper format.
- Of the 107 people who usually read 65 people (30%) have a newspaper app or reading platform. Then 10% have curators of content.
- 60% usually share what they read, but only 45% would discuss issues in a virtual room.
Trends and behaviors in social networks
- The most shared social network of readings is WhatsApp with 70%, followed by Facebook (55%), Linkedin (46%) and Twitter (43%).
- 83.3% usually save the articles they read to read later.
- 68% is nourished by information through social networks, 64% usually consult the latest published newspaper or magazines and 34% usually inquire through their favorite editors.
Tools of use of the Editor and degree of sociability.
- Practically 100% writes for digital format in front of paper.
- 75% of the editors would like to be able to discuss in a virtual room what they have written.
Analysis of content and types of formats in newspapers and magazines.
- We had 8 responses from people reading and working in a newspaper or magazine.
- The type of content currently generated is 100% digital.
- Sections where VR or AR content is generated is 75% in technology, 25% in sports and 12.5% in Time, Travel and Economy.
Results of open question
What should a reading app have where you can inform yourself of the news and at the same time you can socialize?
Content
Latest trends and news
Recommendations based on declared tastes
Comment system
Content reliability / fiability of sources
Functions
See active users
Save to see later
Being able to share videos or articles
Personalization with selection of interest categories
Know that I have read or seen
Relevant news notifications
Profile
Be able to see what people read (MEDIUM type and favorites).
Customization of environment (music …)
Display consumption data and connections.
Virtual room
Forum to discuss topics of interest
4.5 Validating Personas | After User Research
After this quantitative and qualitative research we could close our target:
4.6 Benchmark in order to understand Business
We analyzed 5 applications in VR news and reading.
[ If you want to know more about the research, click here. ]
Once the competition is mapped with its pros and cons, we continued with the choice of the platform to design the experiences in VR.
4.7 Why we chose Oculus Go
You do not need a phone and burn it, and you do not have cables (standalone device) or have to use a PC. And Oculus Go offers you a good price-quality, around 200 euros.
Furthermore, Facebook Oculus Go is between the leaders of AR and VR headsets (with 1.8 millions unit sales, 2017). Then, our Press VR Project could reach a wide target of users.
5. IDEATION PROCESS
We did a brainstorming for this process and we used the affinity mapping process for the ideation.
The affinity mapping includes:
User Surveys and our Research conclusions.
Steps for the ideation process:
Firstly, we did an ideation individually
Secondly, we put our ideas together in post-it.
Thirdly, we group together similar pain points into clusters and then we voted.
6. INSIGHTS
#1 HOW ARE USERS 35–44 YEARS ABOUT DIGITAL FORMATS FOR READING?
- They are demanding in customizable content.
- Being able to “live” the news to remember them better.
- They are consumers of content on demand.
#2 HOW IS THE READING CONSUMPTION OF THESE USERS?
- They prefer a reading based on recommendations
- They want to inform themselves based on their stated tastes.
- Follow the information of your favorite editors.
- They want to be able to read a latest news.
- They are social and they value being able to share what has been read in social networks
#3 HOW SHOULD BE A READING APPLICATION?
Content
Latest trends and news
Recommendations based on declared tastes.
Comment system
Content reliability / biographical support
Functions
See active users
Save to see later
To be able to share the videos or articles
Personalization with selection of categories of interest.
Know that I have read or seen
Relevant news notifications
Profile
Be able to see what people read (MEDIUM type and favorites).
Customization of environment (music …)
Display consumption data and connections.
Virtual room
Forum to discuss topics of interest
7. VALUE PROPOSITION & STRATEGY
We applied the theory of The Golden Circle by Simon Sinek.
WHAT | WHAT DO WE SELL
An app / search platform and selection of magazines or newspapers.
HOW | HOW DO WE SELL IT
Creating an immersive virtual experience according to the new formats emerging in the press.
WHY | WHAT IS THE “PRESS VR” PURPOSE
Through this app we help to improve the experiences of current news and to retain users.
We also use an emerging technology that adds a V.A .:
Integrate users as witnesses of current news
We eliminate distractions
Creation of a unique memory of each experience generated
We wanted that people could enjoy content like Netflix and last trending.
A great idea to monetize could be: to integrate diegetic ads in the virtual house that we created. Eg: a Dron amazon flying through your window, a Coca cola on your table while your reading your news...
The third level that we developed was supported through different formats of news like: 360º videos, 3D interactions (feel the weather in your virtual room) content, 3D object that you can interact (rotation).
It is proved that a virtual environment is able to produce in users the feeling of presence and this is what we created [ If you want to read more about this PhD study: Affective Interactions Using Virtual Reality: The Link between Presence and Emotions. ]
8. SCRIPTWRITING & STORYBOARD
Press VR is born from the evolution of the users behaviours that interact with news as well as from the needs of companies in the press industry to attract and retain users.
Therefore, our script, narrative and selection of scenarios is based on the formats of demand and the integration of experiences that involve our users making it a witness of the news.
How do we achieve this immersion?
The retro-futuristic environment helps us create an immersion, a new memory and a contribution to the application beyond a press reading application.
Context |Scenario
People live in buildings where the way of buying and consumption has been transformed into drones or mini-ships that fly through the streets.
In all the houses they have an assistant robot.
Therefore, in this context, our robot can change what we see through them as part of our settings.
Onboarding | Storyboard
Onboarding design and user experience (UX).
This onboarding explains: how our assistant shows us the room and tells us what we can do in each moment.
9. INFORMATION ARCHITECTURE & FLOWCHART
“Information Architecture is the creation of a structure for a website, app, or other products, that allows users to understand where they are — and where the information they want is — in relation to their current position.”
“Information Architecture uses some elements of cognitive psychology to define the way information should be structured.”-by Adobe Blog
Flowchart Navigation | Experiences through 3 different levels:
9.1 First level | Onboarding & Magazines/Newspapers Selection
We have Enriqueta, in the year 3029, in her house of the future, where her personal assistant helps her manage her home and to consume news.
Sitting in your chair you can ask your assistant to show you the available press, choose a publication and navigate within it.
9.2 Second level | Customized Magazine/Newspaper Environment
When Enriqueta go through a publication, she teleports to a personal environment, for example she will go to Machu Picchu when she enters to the National Geographic. Furthermore, if she will go to Marca Sport Magazine, she will be in a Stadium.
Enriqueta can also attend an interview that was created with a volumetric video and then the characters will materialize in front of her.
9.3 Third level | Immersive news
In addition, you can read 2D content or asking yours virtual assistant that read the news for you, you can see a 3D sculpture, holograms, or a 3D representation of the next Olympic Games in 2020 (Tokyo) or even 360º videos.
10. CHARACTERS
10.1 How do we develop our character ?
Actually we followed the GRID OF CHARACTER PRESENCE BY DEVON DOLAN Y KENT BYE and some advices of our mentor/teacher in Scriptwriting & Storytelling: Jorge Esteban Blein.
10.2 The chosen Character
Virtual Assistant: a ghost with impact (that means the narrative does not notice our presence and we can alter the course of the narrative.)
11. CONCEPT ART
We made a moodboarding on Pinterest for getting inspired when we made scenarios for Unity.
12. INTERACTION DESIGN & UI
Within the magazine we have different sections, and in each of them host different format of content. For example: we have articles that we could share, discuss or save, the reading option with Watson, we can visualize 3D contents or 2D content and 360º videos.
12.1 User Interface (UI)
The 2D panels (a static UI) allow us to navigate between the contents of a magazine and when we chose a magazine, we are able to go deeper in each news. Each news selected show us an interactive and immersive content.
We followed some Law of UX by Jon Yablonski in order to build a great user interface and improve the user experience.
As you can see below, we defined:
- Control buttons: active, disabled buttons and hover buttons.
- Avenir typography: it has a good quality in VR.
- UI colors: colors were chose following the brand color.
We applied JAKOB’S LAW for our 2D panel design because “By leveraging existing mental models, we can create superior user experiences in which the user can focus on their task rather than learning new models.”-by Jon Yablonski
12.2 UI Interaction
We try to make an user interface useful and enjoyable for users.
How did we do that?
We used the VR gaze pointer in order to interact with the content selected, that means you do not need a controller if you want to interact with a menu, the environment or any object.
To add, users would know when the selection is finished thanks to the countdown (we established a 2 seconds timing)and the sound at the end.
12.3 Navigation and Interaction | 3D content
Some of these panels send us small 3D content in front of us with which we can interact. We can play with objects that evolve according to our hours of use (gamification) or even receive rewards as virtual objects when visiting the publications of the main brands.
13. PREPARING ASSETS FOR UNITY
We created a shared panel in Milanote to visualize the elements in the space and we looked for references to start composing our scenes with acquired assets or that could help us for modeling.
Some web pages that we used for our models and Unity:
14. PROTOTYPE IN UNITY
And after VR development, VR layout integration, VR Performance Optimization and Testing, we finally have our first prototype in VR for OCULUS GO & RIFT.
We hope you like it!Our team put all the energy and will to make this real :)
You can enjoy the Demo day of our Press VR project at The Cube in Madrid:
15. TESTING & MONITORING
HOW DO WE TEST OUR PROTOTYPES ?
- When we are building the prototype in Unity
Well during VR layout integration and VR development, we could test it with the help of Oculus Rift headset. Unity allows to try the prototype directly with this headset when you are building the prototype.
Motion sickness: we have to change a video because it moved too much. And it would be bring a very bad experience. I have already had once, and I felt so dizzy!
- Be aware of VR Performance in Unity
Frames need to be (in order to avoid motion sickness):
MOBILE: 60 FPS
DESKTOP: 90FPS
Tris need to be:
MOBILE: 80.000–100.000
DESKTOP: 1.000.000
- With Users | User Testing
The Demo Day, some people could test our prototype and we got some feedback for doing the next improvement and performance.
3D Content: it would be great to rotate them, approach them or zoom them.-User 1
Magazines: “covers of the magazines are too far, it would be nice to have a bigger size”-User 2
Orientation prototype: “the orientation was with the north upside down. But if Laura saw it well on her computer, it is possible that my computer’s room-scale was misconfigured.”-User 3
Motion sickness: “this is too high and do not feel well at all”.-User 4. She was trying a 360º image and she was not seat down. Our experience need to be seat and not stand.
[ If you want to know more about analytics and heuristic tools click here. ]
16. WEB VR & AR PROTOTYPE
“WebVR is an open specification that makes it possible to experience VR in your browser. The goal is to make it easier for everyone to get into VR experiences, no matter what device you have.”-by webvr.info
16.1 Concept for WebVR
16.2 WebVR | Prototype in CoSpaces Edu
You can visualize this prototype:
- WebVR: explore the space/scene in 360 degrees.
- Augmented Reality with mobile or tablet:
1. If you have an Android you will need to download Google’s ARCore support that will allow you to enjoy the augmented reality experience that we created.
2. If you have iOS you will need to download Apple’s ARKit.
3. In addition you will have to download CoSpaces app. - Virtual Reality: also if you have the Samsung Gear or Oculus Go virtual headset, you can enjoy this experience virtually.
16.3 WebVR | Prototype in Unity
- Visualization in VR: you will need a cardboard viewer (example: Google Cardboard).
- Visualize on the browser for desktop or mobile: you will experience the scene in 360º (an experience similar to virtual reality but you won’t be able to see in 3D or interact as in VR).
16.4 Oculus | Progressive Enhancement
Actually, Oculus has been working in Progressive Enhancement.
The Oculus desktop app is a personalized app that lets you manage your VR experience away from your PC. Furthermore, the mobile app helps you: discover events, connect with friends, browse store and install VR games on your PC before you get home. You can watch here Oculus Connect 5 | Keynote.
I want to thanks-for this amazing VR/ AR Project that we delivered-
- My teammates: Almudena López , Christian Cabrera & Laura Morales.
- The school UXER SCHOOL and our mentors from Virtual Voyagers : Edgar Martín-Blas Méndez, Eduardo Herranz, Jose Infantes, Unboring.net Arturo Paracuellos | Hikaru.pro Jorge Esteban Blein | BEEVA BBVA Next Technologies Salvador Valle.
You can follow us on Twitter :
You can explore our Websites:
- CHRISTIAN CABRERA | christian1up.com
- LAURA MORALES | geometric.es
- MY WEBSITE | sotomayorstudio.com
