VR meditation game - UX/UI designer

Overview

Maloka is a meditation game designed for both VR and mobile platforms. My role involved revamping the UI for the VR app to attract investors and address crucial functionalities missing from the initial POC.

The team

Project manager, UX designer, UI designer (me), Technical artist, Q&A & multiple Devs

My toolkit

Figma, ShapesXR

Context

This project was developed remotely with the teams of Unity Accelerate Solutions, now part of Capgemini

Try the app

Download the app here

Understanding the user

In collaboration with the UX designer, I defined two High-level Personas to:

Know the target audience's location

Understand their habits and goals

Define their technological proficiency

💡 Insights that guided the visual design process

Insight #1

Meditation as the main focus for the adult audience

Insight #2

Games as the main focus for the younger audience

Insight #3

Keep the relational part present

Insight #4

Openness to exploring new technologies

Ideation

To define the elements and interactions within the Maloka app, we conducted a Benchmark to:

Gather visual style references from other games and meditation apps (VR and mobile)

Gain insight into diverse interaction approaches

Comprehend the visual hierarchy of elements within the 3D space

💡 Insights from the Benchmark

Insight #1

The main panel is prominently displayed in front of the user, while sub-panels are positioned at slight angles on the sides

Insight #2

Colors and fonts are employed to reinforce the hierarchical structure

Insight #3

Meditation apps often employ more gentle shapes, such as circles, to create a soothing visual experience for the user

Insight #4

Haptic feedback serves as a guiding mechanism, enabling users to deeply engage in the experience

Maloka’s visual identity

Visual design (Hi-fi)

My job was to translate the Lo-fi wireframes the UX designer created into Hi-fi wireframes (mockups) respecting Maloka’s visual identity. There was also a reflection on how to present the information in the 3D environment in terms of font size, color contrast, etc.

God view

This space provides context about the user’s last game session and any updates to the gameplay

Rewards

In this space the user can see their portal rewards

Program board

Here the user can access the full catalogue of meditation programs

Stats board

This board gives users a sense of progress and encourages them to return and play

Prototyping

I proposed using ShapesXR to help the development team visualize element positioning and distances more accurately. This streamlined the 3D prototyping process, considering ergonomic factors to prevent arm or neck fatigue and dizziness.

Virtual dummy

I used a seated virtual dummy to simulate an average-sized human. Developers could move around and position their head 'inside' the dummy's head, providing a more accurate sense of distances and orientation.