FitXR

| VR, UX, UI

FitXR

| VR, UX, UI

FitXR

| VR, UX, UI

Home screen redesign

Home screen redesign

Home screen redesign

Dashboard Sidebar Close Up

FitXR is one of the major VR fitness apps on Quest - that combines fitness and gaming into this fun & immersive experience.

I was brought to the team to redesign the home navigation with the insights and pain points learnt from the users and business.

FitXR is one of the major VR fitness apps on Quest - that combines fitness and gaming into this fun & immersive experience.

I was brought to the team to redesign the home navigation with the insights and pain points learnt from the users and business.

FitXR is one of the major VR fitness apps on Quest - that combines fitness and gaming into this fun & immersive experience.

I was brought to the team to redesign the home navigation with the insights and pain points learnt from the users and business.

The challenge

Current home screen has limited discoverability for the amazing content the team has created.

Current home screen has limited discoverability for the amazing content the team has created.

The challenge

Current home screen has limited discoverability for the amazing content the team has created.

Results: Better browsing experience

For users:

  • Improved content discovery

  • More relevant classes for relevant users

  • Interact with content, better


For business:

  • More content can be displayed

  • Old classes get more exposures

  • More space to display featured classes



Takeaway


Fail fast, learn fast

Results: Better browsing experience

For users:

  • Improved content discovery

  • More relevant classes for relevant users

  • Interact with content, better


For business:

  • More content can be displayed

  • Old classes get more exposures

  • More space to display featured classes



Takeaway


Fail fast, learn fast

Discovery

Feedback / Pain points
Data critique


Competitor research

Discovery

Feedback / Pain points
Data critique


Competitor research

Problem space

Defining problems

Problem space

Defining problems

Solution space

Workshop


LI-FI mockups

Solution space

Workshop


LI-FI mockups

Design & build

HI-FI mockups
Test & iteration
Design handover


Developer check-ins

Design & build

HI-FI mockups
Test & iteration
Design handover


Developer check-ins

Discovery

Feedback / Pain points
Data critique


Competitor research

Problem space

Defining problems

Solution space

Workshop


LI-FI mockups

Design & build

HI-FI mockups
Test & iteration
Design handover


Developer check-ins

Full Dashboard

Original vs New home screen

Original vs New home screen

01 Users feedback + Data critique

Based on the feedback collected from users, we learnt most of FITXR users were highly engaged with the filter to access to personalized content but less engaged with new content / collection or irrelevant content.

We looked into data to better understand their behaviours.


Key learnings:

01 Studio and Difficulty have the most interactions
02 Music is not the main filtering target
03 Users interact with arrows to go through classes
04 Old classes became undiscoverable as they got stacked behind
05 Favourite as a shortcut for users to find classes they repeat

01 Competitors research

Research to find out:

01 Optimal content discovery


02 Pushed content (Explore) vs relevant content (For you)
03 How the content was catered to the audiences/user, such as 

sorting, terminology, etc

Research within/beyond the fitness field:

Supernatural, Peloton, Apple Fitness, Tonal, Open
Netflix, Youtube, Spotify, HBO

Key learnings:

  • Thumbnails VI gives visual guidance, as well as thumbnail sizes

  • Most of these apps have dedicated space for push content

  • Tabs commonly used on top to navigate to themed content, row, and scrolling for browsing

  • Users would engage if the content is relevant

  • Good content engagement comes from the good algorithm

02 Defining the problems

Putting them together, we concluded the insights 

into 5 problem statements :

01 Users don’t get to explore content fully
02 Users are less engaged with content that are not relevant/uninterested to them
03 Users don’t get personalized content / hence they use filter straightly to ‘personalize’ their content
04 Users don’t interact with older classes unless they are saved as favorite
05 Users interact little with the collections tabs

03 How might we...

A cross-functional workshop was held to share perspectives with the ‘how might we’ framework, the aim was to expand our challenges/problems with open-ended questions that can help generate a wide range of ideas.

  • How might we show more content for users to explore?

  • How might we show older content?

  • How might we show users personalized content?

  • How might we make collections more discoverable?

03 Putting designs into VR environment

Some wireframes on minor ‘quick fixes’ based on the current home were explored initially, but we came to the conclusion that there were no ideal solutions to fit all with such limitations. 



We have to redesign the home screen structure - was what we came to agreement.

In order to test the usability of the design, I started by designing with configurable panels in mind, then putting them into VR environment via ShapeXR, which allowed me to play around with the layout, and spot/adjust any issues that I didn’t realize while looking at the 2D monitor.

Little details matter

  • Small buttons are hard to navigate in VR

  • Small fonts are hard to read in VR, and kerning to be adjusted

  • Avoid clusters of information, elements

  • Clear visual hierarchy through thumbnails, and sizes. Too many class thumbnails appear overwhelming

03 Solution: Configurable panels

Configurable panels as solutions that cover content and functionality for:

For you


you might like, relative classes

Pushed content


collection, featured classes

My activity


history, milestone, saved classes
Bottom bar (Stays due to technically restrain)

shortcut items

Here are the items we wanted to validate on with users:

  • Layouts for each section

  • Terminology

  • Redesign home vs Original home


and a task:
Identify a boxing beginner class

04 User testings and learnings

We conducted two rounds of user testings.



In summary, users prefer the new home screen, and felt excited and engaged with the content. The first reaction, was not able to find where the filter is with old habit, but managed to locate it after exploring.

For you

  • User attention in VR starts from center/middle, to sides

  • Equal grid layout = don’t know where to focus

  • Small nav arrows/scrolling bar = unfriendly to use

  • Users don’t notice/interact with the new placement of filter bar



Pushed content

  • Small box = uneasy to browse = shorter time spent

  • Users feel confused when the class thumbnails are similar to 

the main panel


My activity

  • Saved classes as shortcut

  • Users use history to repeat class, quickly

  • ‘Milestones’ boost momentum

  • ‘Working plan’ is not intuitive to understand

  • Icons menu bar are clear to navigate