Press VR Project | How to build an UX Design Immersive

THE CHALLENGE | FROM DIGITAL PAPER TO VIRTUAL EXPERIENCE

Table of Contents

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.
Prototype with CoSpaces Edu
  • 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).
  • 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

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

3.2 Virtual Reality Development Process

3.3 Video of the Process: Making Off

4. RESEARCH

4.1 Analysing PressVR | First Problem

4.2 Investigating in order to establish insights

4.3 Creating Personas | Proto-Personas

  • A youtuber-type Rubius
  • A 55 year old reader

4.4 Survey Results

  • 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.
  • 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%.
  • 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%)
  • 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.
  • 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.
  • 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.
  • 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.

What should a reading app have where you can inform yourself of the news and at the same time you can socialize?

4.5 Validating Personas | After User Research

4.6 Benchmark in order to understand Business

4.7 Why we chose Oculus Go

5. IDEATION PROCESS

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?

7. VALUE PROPOSITION & STRATEGY

WHAT | WHAT DO WE SELL

HOW | HOW DO WE SELL IT

WHY | WHAT IS THE “PRESS VR” PURPOSE

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

Onboarding_AlmudenaLópez-Click here

9. INFORMATION ARCHITECTURE & FLOWCHART

Information Architecture_PressVR | Click here
Flowchart_PressVR

9.1 First level | Onboarding & Magazines/Newspapers Selection

9.2 Second level | Customized Magazine/Newspaper Environment

9.3 Third level | Immersive news

10. CHARACTERS

10.1 How do we develop our character ?

10.2 The chosen Character

11. CONCEPT ART

12. INTERACTION DESIGN & UI

12.1 User Interface (UI)

  • 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.

12.2 UI Interaction

Interaction_AlmudenaLopez | Click here

12.3 Navigation and Interaction | 3D content

13. PREPARING ASSETS FOR UNITY

Modeling assets in UNITY | Marca Sport Magazine

14. PROTOTYPE IN UNITY

Oculus Go Headset

15. TESTING & MONITORING

Testing Oculus Rift & our Mentor Eduardo Herranz from Virtual Voyagers

HOW DO WE TEST OUR PROTOTYPES ?

  • When we are building the prototype in Unity
  • Be aware of VR Performance in Unity
  • With Users | User Testing

16. WEB VR & AR PROTOTYPE

16.1 Concept for WebVR

16.2 WebVR | Prototype in CoSpaces Edu

  • 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).
Press VR | First Scene (visualize in 360º)
Press VR | Second Scene (National Geographic) + Third Scene (Hologram)

16.4 Oculus | Progressive Enhancement

You can follow us on Twitter :

You can explore our Websites:

--

--

--

[∆ UX Developer & Computer Scientist]~Done MITS Research at @UTAS_🇭🇲 ∆ www.sotomayorstudio.com

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Laura Natali Sotomayor∆

Laura Natali Sotomayor∆

[∆ UX Developer & Computer Scientist]~Done MITS Research at @UTAS_🇭🇲 ∆ www.sotomayorstudio.com

More from Medium

Designing Content with a Purpose in Two Mediums

Ethical Challenges in AR / VR

Intro to Immersive Experience Design (Part 3)

Information Architecture in AR