360Stories: VR for the Travel Bookings & Discovery

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form
Company
360Stories
Client
El Al Airlines
Date & Length
2019 - 3 Months
Role
UX Designer
Tools
Sketch, Invision, Figma, Facebook VR Template, Whiteboards, Realtime Board, Stickies, Unity
Framework
Agile

About

360Stories is a VR Startup based out of NYC, with applications on the Oculus and Samsung VR Platforms. Their product allows you to virtually travel to and explore major cities in 360º video/photos. Each travel scene has audio guides, extra information, and users can book travel activities for their future travels, such a food tour in Paris, from the comfort of their home.

Problem

The big picture goal is to increase online travel bookings by 2% by 2021. My job was to help them achieve that outcome. To get them closer to their goal, we needed to:

1. Properly define the problem/solution statement in regards to what was stopping their users from making bookings.

2. Better understand their customer base, and how they thnik about the problem.

3. Improve their current solution based on the known and learned problems.

4. Test our Solutions.

Solution

The research showed that we needed to make some major changes to reach their outcome. The solve included:

1. create more usable menus/navigation.

2. Improve communication around booking and make it easier for the user to book tours, activities, etc. To do this, we changed the copy for booking to "Book on Mobile," and provided a form for the user with an option of getting a text or email to tp proceed with booking.

3. Match Companies sales approach to how users use the app. To solve this challenge, we created strategically placed Portals in the UI, which link to Bookings. This works with the users exploration goals in app and mimics how they explore in real life. Research showed that our users often find things to do when traveling by walking around/exploring. This approach mimics that conceptual model and was found to be highly engaging.

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form

Discovery

Diagnosis Workshop

Upon starting the contract, I was told that the goal was to update the menu. But the team couldn't tell me why. So I started diagnosis with a Knowledge Matrix with the stakeholders (Marketing, CEO, Unity Developer, Visual Designer). From the workshop came the real hypothesis as to why online experience bookings are low, which the the team didn't agree on prior. The hypothesis was that bookings are not done online because people want the choice to not be in control on a trip, but they still want to do activities.

Problem/Solution Statement Defined

From the hypothesis, we were able to create a problem and solution statement, which included journey mapping to better understand our customers mental models of control and spontaneity while traveling.

User Interviews for Journey Maps

We did user interviews with 7 travelers that met the profile of their 2 personas Bleisure and Young Travelers. After synthesizing the results, we saw 2 major patterns in regards to the habits of spontaneous bookings while traveling. There were #Planners and Mappers.

Click the map to zoom
Click the Map to Zoom

New Requirements

After analysis of the maps, the team and I created the following requirements as problem statements in the "Customer + Need + Insight" format.

1 Mappers need a Map view to make finding content aligned with my method, because we saw that spontaneous booking search often starts in google maps (4/7 testers).

2 #Planners need keyword categorization & search to align with Planners Hashtag discover because multiple users described the importance of being in control in their decisions, but not the scenario.

3 Mappers & Planners need a less aggressive way of 360stories pushing bookings because multiple users described the importance of being in control in their decisions, but not the scenario.

4 #Planners & Mappers need a better nomenclature for bookings and experiences because the users interviewed had found the names story and experiences too vague.

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form

Ideation

Sketching & Storyboarding: Round 1

One of the stakeholders was on travel so, I sketched up some concepts based around the habits of the mappers and #Planner mental models of spontaneous travel bookings and inputed the copy on realtime boards. This interface was designed to be entirely map-based, with filters to mimic how #Planner search hashtags on instagram and twitter. This had some major flaws in regards to the semantics & scalability of placing pins on a map for Activities, which can have multiple locations.

Sketching & Storyboarding: Round 2

With the stakeholders all back in NYC, I began to map out a new flow, interface, states, and Interactions.

Shorthand User flows: The See/Do Method

Taking into consideration the map constraints and existing design, this version was designed to provide a better layout structure and new solves to help 360Stories obtain their outcome of increasing bookings via their platform. 

Map View

Users can toggle between map and list view. Map view is only available at the Destination level.

City View

To help meet the business outcome, I created a slideshow for showcasing experiences and bookings per city, benefiting the user and biz.

One of the challenges was showing large chunks of content in a way that made sense to our users IRL experience of finding travel booking on the go. To do this, I broke the chunks into 2-rowed horizontal scroll experiences, separated by category. This mimics mappers mental model of seeing shop/store types on a street, and the #tagger's model of looking at content via hashtags. This also would help solve the problem of users not clicking the toggle to view bookings.

Strategic Portal Placement

A major pain point for the users was how 360Stories was pushing bookings on the users. Here's an example of how that experience played out.

Imagine you're in the app at the Eiffel Tower. You look around in the 360 image and see an audio guide, some arrows to additional scenes, and some other information icons. You listen to an audio guide about the Eiffel tower and at the end of the guide, a pop up pushes you to make a booking, and there's 5 second count down sending you to the booking.

This experience was having a really negative impact on the usability & user's impression of the app. The change in scene was described as disorienting and annoying. One person we interviewed literally made a metaphor to torture tactics. The users were more interested in exploring the various scenes for their chosen experience/booking.

I suggested a more passive & strategic approach to getting users to view bookings in the form of portals. The portals are basically windows into other experiences or bookings, and would be strategically placed in various scenes, Eg. A portal to a food tour booking next to a food truck

This idea removes the aggressive sales push, and more importantly, Portals mimics the experience of walking down the street and seeing a sign, business, shop, etc that catches your eye. This approach was a huge win with the stakeholders.

Mid Fidelity Wires

Here's some key wires which went towards prototyping.

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form

Prototyping

Mid & High Fidelity Prototype

Once the team agreed on the sketches, we went to wires & prototype. The ask was a more mid-fidelity wires to inform the visual & dev.

Click for Mid Fidelity prototype

From the wires, the designers took the files and skinned a new visual design. I gave feedback and instruction. We used this to inform Dev, who then took the prototype  make a clickthrough testing app via the oculus go and HTC to give a more real feeling for upcoming usability testing.

Click for High Fidelity Screens
Click for High Fidelity Screens
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form

Testing

Usability Testing

We wrote a simple test with 4 questions and had 7 users come in for testing. We recorded each sessions with an iphone to document their behavior and record conversation. For screen sessions, we did a screen record of the vive device.

From the results, we mapped the data points and saw 5 major categories of patterns: Bugs, Lack of user control, UI, booking, and content data.

I then took the data and compiled a report.

Click to take a peak

The report showed really positive results to the new UI and content, as well as handful of problems, most of which were minor.

One problem is that the users want to see booking options in VR, but want to book on their own device. To fit the users need, we created a simpler form which allows a user to send a link to the phon number or email. We also provided better copy to communicate that the bookings are done on their own device.

Mid Fidelity Wire
Confirmation page
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form

Final Product

Changing how people spend time in Airline Lobbies

The updates helped shape/improve the new Oculus Go/HTC application, which then landed 360Stories a pilot in select Marriott hotels, Al El Israel Airline lobbies, and will soon be featured on the HTC/Oculus Store.

VR setup for Airports

Here's a demo of the final product.