MelloMind

Virtual Reality Meditation App
Mellowmind cover image

Project Brief

MelloMind is a subsidiary brand of EsVedra that is focused on providing corporate health experiences. EsVedra is a global community of wellness content creators offering locally-driven, science-backed experiences to users around the world through the EsVedra App. 
ISM has partnered with EsVedra to design and develop MelloMind’s VR meditation application. At the initial stage of the project, the product was named EsVedra but as it evolved EsVedra found great potential to make it part of its subsidiary brand, MelloMind. I initially joined the project as an XR designer and after the XR development phase, I was offered the role of the lead product designer.

Clients
TimeLine
December 2021- February 2023
Collaborations
  • Design workshops with cross-functional team
  • Facilitate collaboration between  teams
  • Usability testing
  • Product design team guidance through the creation and application of UX strategies
  • Technical design audit with the developer
  • Project timeline with the product manager
Deliverables
  • Mid-fi and Hi-fi prototype
  • Usability testing plan
  • Usability testing report
  • Style guide & component library
  • Handover instructions
  • Planning and scope definition
Team
  • Product manager
  • XR design team (my team)
  • Product design team (my team)
  • Development Team
  • EsVedra's Marketing team

Design Outcome

Key Features

All in one menu for Mellomind

All in one menu

A simple and well-organized main menu not only reduces cognitive load for users but also allows them to immerse themselves fully in the meditative experience.

Pleasant scape from the reality

VR scenes are designed to immerse users in secluded worlds, offering an escape from the pressures of reality into our surreal and tranquil environments.
VR Scenes look and feel

Design and research process | XR Design

XR Research

ISM invested in an initial pilot research phase to explore the concept of VR meditation, leading to the development of a testable prototype before my participation as the VR designer began. The prototype underwent the first round of usability testing, providing valuable insights that served as a solid foundation for our team to envision and design innovative VR experiences. Leveraging the findings from user testing and taking into account VR limitations, we embarked on the next phase, conducting a comprehensive competitive audit to identify market gaps.

Findings of UX Research

3D Design & Initial VR Prototype

ISM and EsVedra collaboratively decided on designing new VR scenes with a different look. We picked themes and moods for these immersive spaces, creating various concepts based on XR research. After discussions with the team to decide on the experience for each scene, including the environment, storyboards, and architecture, we moved on to 3D design and developed them for initial VR testing.

Projects's final moodboard
VR prototyping

Iteration & VR Testing

After the initial testing, we fine-tuned the experience and 3D design. We brought the 3D spaces into the Unreal game engine, incorporated environmental sounds and motions. Different videos were created as a mock-up of the experience and were shared with EsVedra for additional feedback. With all the feedback in hand, we made further technical refinements before passing the designs on to the development team.

research Process | UX UI Design

Previous UI

Following the XR design phase, I took on the role of lead product designer in the project. Given my experience in designing VR scenes, we seized the opportunity to enhance the overall user experience (UX) and user interface (UI), aiming for a consistent design language across the entire product. Our team persisted in refining the design, drawing insights from data gathered during the initial usability testing of the first UI prototype and incorporating feedback from our design review session.

The initial menu UI (created by the previous design team)

The initial menu UI (created by the previous design team)

Usability testing feedback + our design review notes for the first UI

Usability testing feedback + our design review notes for the first UI

Whole product view + Second UI

Insights from the initial usability testing guided our future design decisions. To kick off, we established an initial user flow. Subsequently, we employed a mid-fidelity prototype—a simplified version—for a follow-up round of usability testing. I took on the responsibility of planning and organizing this phase. The primary aim was to:

Usability Testing for the second UI (Mid-fi prototype)

Usability Testing for the second UI (Mid-fi prototype)

Usability testing feedback from the second UI

Usability testing feedback from the second UI

Competitors

To find solutions that are most meaningful to users, it is important to analyze what the competitors are doing in the market. Our strategy involved delving into the approaches our competitors adopted to address the design challenges identified in usability testing. To gain a deeper understanding of their products, we organized sessions for team members to explore each competitor's product using VR headsets.

Competitive Analysis

Design Process | UX UI Design

MelloMind User Flow

User feedback and the insights gained from competitor analysis proved invaluable in identifying overlooked aspects of the user flow. This realization coincided with EsVedra unveiling "MelloMind" as the new name for the product. As we progressed with the final UI design, the user flow underwent enhancements and refinements.

Refining MelloMind userflow

Pivot the VR Experience
Final Product

Deep user research as well as all the rounds of usability testing helped us find the main challenges and the best solutions to them.

Product outcome challenge one

Challenge 1

  • Poor readability of written content on VR
  • Reading lengthy text causes motion sickness in VR

Solutions

  • Created cards for key information about each scene
  • Added informative naming and type of practice to replace the long description
  • Used a cover image to communicate the scene’s feel and look
  • Implemented a curved ergonomic menu
Product outcome challenge two

Challenge 2

  • VR interface is new for a lot of users
  • Complicating the flow increases user cognitive load.

Solutions

  • Minimize the number of pop-up menus to one menu
  • Align with the user's mental model by incorporating play, pause, and restart icons for the ongoing meditation
  • Demonstrate system status with a circular progress bar, showing the user's position in the meditation timeline
  • Differentiate current meditation card from others
Product outcome challenge three

Challenge 3

  • No control over sensory experience negatively impacts the VR practice

Solutions

  • Quick access to brightness and volume controllers on the main menu
  • Standard icon size for accessibility consideration in VR
Product outcome challenge four

Challenge 4

  • Users need to be reminded of how to use the controllers in VR as well as in our product

Solutions

  • Displaying a quick and easy to follow tutorial cards with a voice over to read the instructions after welcoming intro
  • Access to tutorial cards from Mello Home
  • Use imagery to help users find the button on the controllers with the VR headset on
MelloMind final menu UI

Takeaway

Lucrative Journey

This project was a significant journey, blending my industrial design skills with UX/UI knowledge and expanding my understanding of VR research and design. Designing in VR was quite different from mobile and desktop and heightened my awareness of device limitations.
The pivotal moment of emotionally detaching from a design allowed for clearer user insights, marking the inception of a remarkable product. As we went through rounds of user testing, it became clear that what we initially envisioned didn't always align with how users truly interacted with the product.

A photo of MelloMind team

View more projects