UI/UX  — .com

Website: www.oculus.com
Country: United States
Goal: Identify 3–5 key problems and challenges on Oculus’ website

(Disclaimer: The opinions expressed in this article are my own. Oculus has its business goals and metrics that I’m not aware of.)

Website Analysis

I did an in-depth analysis of the website. It helped me to understand the different products and services that Oculus is offering to its customers. Also, it helped me to get a reading on the website’s overall architecture and navigation. Just like any other consumer brand, the website’s main focus is to enable its audience to find the best VR fit for them.

Empathize

User Personas

The first step I took was performing online research around VR’s customer-base. To cover the largest group of customers, I created a few provisional personas: professionals in their 20’s and 30’s and in the middle-income bracket.

Interviews

A total of 4 interviews were conducted, where participants had to open Oculus’ website, find the right type of VR headset for them and go onto the checkout flow and go till the last page of the purchase.

Needs & Motivations

  1. 2/4 participants had the same motive for getting a VR headset. The motives for each of them is listed below:
  • Dan — Virtual Travel. Imagine being able to walk around and explore places like Paris or a tropical rainforest
  • Tia / Mathew — Virtual Games. Imagine an experience a little like a video game, but you are inside of it and it is more realistic
  • Sara — Virtual Presence. Imagine being able to be virtually present at live world events
  1. 2/4 participants said that it’s harder to find the right option out of so many available online
  2. 4/4 participants said that they just visit the company’s website to get more knowledge about the exact features of the device. While they use websites like BestBuy or Amazon to make the final purchase

Defining the Problem

After identifying and analyzing users’ pain points, I define the following common ones that most users were having trouble with.

Issue Severity Rating

Each usability issue has been given a rating in terms of its importance or impact on the usability of the website. Ratings are based on how seriously the problem affected the user or kept the user from completing his or her task. Each individual user experience (UX) issue documented in this section was assigned a priority level based on the following criteria:

  • LOW: User may experience insignificant time delays or mild frustration, but will be able to complete the desired task.
  • MEDIUM: User may experience noticeable delay or frustration, but will be able to complete the task with added effort.
  • HIGH: User will experience noticeable delay or frustration, may not be able to complete the task

#1 UX Issue(s): Homepage Navigation

Rating: LOW / MEDIUM

Problems:

  1. There is no search functionality [LOW]
  2. On mobile, the cart icon is stashed inside the hamburger menu. This will strongly affect usability [LOW]
  3. The navigation bar isn’t sticking on top. A user has to scroll up and down a lot of times to go through the website [MEDIUM]

Solutions:

  1. Can be solved by adding an icon beside the cart. Both cart and search are known metaphors among internet users
  2. Take the Oculus logo in the center, the hamburger menu on the left and cart icon on the right
  3. Make the navigation bar sticky. Meaning fix the nav bar at the top while the user scrolls down
Floating Dialog Comparison
Navigation Design on Mobile Browser

#2 UX Issue: Inline Validation (Create Account)

Rating: LOW

Problem:

The user wants to know what kind of data to enter in an input field

Solution:

Use a loader to validate the input fields and show instructions as soon as the user pauses for 3 seconds

#3 UI Issue: Styling of different types of buttons

Rating: LOW

Problem:

There are three different kinds of border-radius values used across the website

Solution:

Both radio and action buttons should have the same border radius values but with different interactions

Model Selector Popup (Oculus Go)

#4 UI/UX Issue(s): Remove Cart Item(s)

Rating: HIGH

Problems:

  1. ‘Remove’ button in cart UI isn’t given adequate prominence. For a website that uses hues of grey as it’s theme, a slightly dark grey ‘remove’ button on a light grey background page doesn’t help
  2. ‘Remove’ button is just 12px in font-size which might pose a problem for users to even find the text-based button
  3. ‘Remove’ button doesn’t have the cursor hover-over CSS on it

Solutions:

  1. All important secondary actions during the checkout flow should be in blue: #1574d4 so that the user can help find the common actions
  2. font-size should be 14px here
  3. text-decoration:underline;should be used for all hover-over events in secondary links
Snapshot of Cart Section

#5 Data/UX Issue(s):

Independent Feature Pages

https://www.oculus.com/rift | https://www.oculus.com/go/
Rating: HIGH

At $199USD for the cheapest model, Oculus VR is still quite an expensive ask from the consumers. To make things easier on them, there should be more information available on feature pages that help them make an informed decision.

Problem(s):

  1. No comparison chart. There was no way to compare Oculus Rift and Oculus Go. A user will have to have a really good memory to compare both the models and take a purchase decision based on that
  2. No Tech Spec. Geeky consumers have come to expect a spec sheet because they know it will cover every small detail that they need to know about the product
  3. Comfort and Durability. 3/4 participants had this unusual request. Again, for a $199 product, you need to inform the consumers about what it is made of and how long will it last without any damage

Solution(s):

The visual solutions for these can be found below:

Affinity Map

The affinity map helped me to brainstorm and come up with potential ideas to address and alleviate each of user pain points. The initial set of affinity map brought out a lot more points which after testing a bit didn’t hold very strong.

User Journey Map

Taking the key persona (Mathew’s) behavior, goals, needs, and motivations into account, the user’s journey map was plotted.

PROTO

After creating all the high-fidelity changes, I took them to Invision to create a prototype for my usability testings.

Validations

I sent this prototype back to all 4 participants and asked them to complete the following tasks

  1. Find the right Oculus by easily comparing the models
  2. Walk through how they would edit the quantity and number of items in their shopping cart
  3. Remove some items from the shopping cart
  4. Reach checkout screen

The success rate of all these went up from 50% to 75%.

Reflection

Oculus is overall a very well designed website. Fonts and styling are very much consistent. But oddly, it seems like a team of separate designers worked on the website with only a few of the guidelines set in place. A few small changes here and there and a little bit of heat map testing and I believe Oculus’ website can increase its cart clearance percentage by a lot.

Thanks for reading!



Source link https://blog..io/-study-oculus-website-d4756746048a?source=rss—-eb297ea1161a—4

LEAVE A REPLY

Please enter your comment!
Please enter your name here