Case Study: Designing UI for the Metaverse

Cover Image

Project Brief

The IBFNet Group is building a WEB3 ecosystem and was in need of a user-friendly Menu UI for their metaverse. The Menu UI should provide easy access to various features and functions within the metaverse.

As the Lead Product Designer for this project, I was responsible for designing these User Interface components in collaboration with a 3D Designer and a Unity Developer.

This was the alpha version of the project where we had to show proof-of-concept to the investors and stakeholders, so with that in mind; we had a lot of time restrictions and limitations.

Problem Statement

As a user of the IBFNet metaverse, I want to easily access and navigate various features within the metaverse through a clear and intuitive Menu UI.

The current Menu UI is confusing and difficult to use, which leads to a frustrating user experience.

Outcome

• Improved user experience: By redesigning the Menu UI to be more intuitive and user-friendly, users of the metaverse should be able to access and navigate various features and functions more efficiently, leading to a better overall experience.
• Increased user satisfaction: With a more efficient and enjoyable user experience, users should be more satisfied with their interaction with the metaverse.
• Reduced user frustration: By addressing the current issues with the Menu UI, users should experience fewer frustrations when using the metaverse.
• Increased user engagement: With a more enjoyable and seamless experience, users should be more likely to engage with the metaverse and use its various features and functions.
• Increased user retention: By providing a better user experience, users should be more likely to continue using the metaverse and return in the future.

Research Process

• Investigated the current UI that was already implemented to understand the current state of the design and identify any issues or problems.
• Identified UX issues and problems with the current UI through methods such as user testing and user feedback, as well as by examining the design from a usability perspective.
• Researched guidelines and best practices for designing for the metaverse by looking at resources such as Facebook’s Oculus guidelines. This helped me to ensure that my design would be intuitive and user-friendly for the virtual reality environment.
• Experienced the UI in real-time in Oculus to gain a deeper understanding of the user experience and identify any issues or problems that may not have been apparent through other research methods.
• Created a mood board to visually communicate my design ideas and capture the overall aesthetic and feel of the design. The mood board included inspiration and reference images that helped me to conceptualize my ideas.

Researching Attention Areas

Discovering UX Issues

To discover and address UX issues with the existing design, I followed the process stated below:

• I went through the current Menu UI and carefully examined every design aspect, from the overall layout and structure to the individual elements such as buttons, icons, and text.
• As I reviewed the design, I identified several issues that needed to be addressed, such as incorrect use of colors, accessibility issues, and incorrect font sizes.
• To fix these issues, I implemented the brand’s color palette, fonts, and other design elements to ensure consistency with the overall branding of the IBFNet Group.
• I made sure that the buttons looked like real-time buttons and that the contrast of the menu was sufficient to make the elements easily visible to users with visual impairments.
• I used my understanding of Information Architecture to properly organize the various elements within the menu, ensuring that they were logically grouped and easy to find. This helped to improve the overall usability and navigation of the menu.

Old vs New Design

Navigating the Challenges of Metaverse Design

To understand and implement best practices for designing for the metaverse, I:

• Conducted research on various guidelines and resources, such as Oculus and other platforms, to understand the specific considerations and challenges of designing for virtual reality.
• Focused on understanding the appropriate aspect ratio for the design, as I needed clarification on the best approach to take. Through my research, I learned that the best aspect ratio for the metaverse is typically 1920x1080 within another frame size, which allows for flexibility in the actual metaverse.
• I used Figma plugins, such as 3D for XR, to view my prototype in VR and get a sense of how the design would look and function in the metaverse. This helped me to understand the user experience better and identify any issues or problems that may have yet to be apparent through other methods of testing.
• Followed guidelines on font sizes and accessibility to ensure that the design was easily readable and accessible to all users, regardless of their abilities.

Researching structures

Understanding Field of View & Perspective

For this research, I had to go back to my Xth grade textbooks and remember what my science teacher explained to me back then. FOV & Perspective plays an important role when designing for VR;

• FOV refers to the amount of the environment a user can see through their VR headset at any given time. A wider FOV can provide a more immersive and realistic experience, allowing users to see more of their surroundings. However, a wider FOV can also lead to performance issues if the VR system cannot render the environment quickly enough.
• Perspective refers to how objects in the virtual environment are rendered based on their distance from the user. In VR, the perspective changes as the user moves their head, providing a sense of depth and immersion.
• The FOV and perspective in VR work together to create a sense of immersion and realism for the user. A wider FOV allows users to see more of their surroundings, while the changing perspective as the user moves their head adds depth and realism to the environment.
• Many factors can affect the FOV and perspective in VR, such as the hardware and software used to render the environment, the resolution of the VR headset, and the user’s physical movements.

FOV & Perspective

Visuals Process

• Created a mood board to capture the overall aesthetic and feel of the design. The mood board included inspiration and reference images that helped me to conceptualize my ideas.
• Worked on basic wireframes and structures to experiment with different layouts and navigation structures. The wireframes allowed me to test out different ideas quickly and easily.
• Iterated on the designs through multiple rounds of feedback and testing. This allowed me to refine and improve the designs over time.
• Finalized the final version of the designs after considering all of the project's limitations and technical aspects. The final designs were visually appealing, easy to use, and intuitive for users, and they took into account the specific design challenges and considerations of designing for the metaverse.

Moodboard & Inspiration

• Organized a mood board by collecting inspiration and reference images that captured the overall aesthetic and feel of the design.
• Found inspiration by looking at existing metaverse platforms and games, as well as the menu UI of Oculus itself when the user puts on the VR headset. I also took references from other user interfaces, such as those on Dribbble.
• Analyzed the inspiration to understand the design elements and techniques used and considered how they could be adapted or modified for my project.
• I incorporated elements and techniques from the inspiration into my designs for the Menu UI, including layout, color palette, typography, and other design elements.

Moodboard

UI Exploration

• After researching popular layouts commonly used in the metaverse and looking at various sources such as online articles, design blogs, and forums, I started evaluating them to understand their strengths and limitations. I considered how they fit the specific needs and goals of my project.
• Experimented with different layouts using wireframing to create low-fidelity prototypes of the Menu UI.
• Tested the layouts within the metaverse to see how they functioned and how users interacted with them. This allowed me to identify any issues or problems with the layouts and make adjustments as needed.
• Selected the final layout that was the most effective and suitable for the project, taking into consideration the metaverse's diverse aspects and design challenges and the needs and goals of my team and stakeholders.

Menu UI Explorations

Finalizing the Experience

• After going through the research and design iterations and processes, I arrived at the final designs for the Menu UI that were visually appealing, easy to use, and intuitive for users. The designs were built after considering the metaverse's specific design challenges and considerations, and they were well-informed from the inspiration and references I collected.
• Since this was an Alpha version of the metaverse, I wanted to keep the interactions and animations to a minimum to facilitate a faster proof-of-concept implementation. I focused on creating a static, streamlined experience that could be easily implemented and tested.
• Many of the flows also consisted of accessing the in-built browser to perform specific actions; we had to design screens keeping this information in mind.
• The final experience and UI were well-received by investors and stakeholders, who were happy with my attention to detail and the user-centric approach. The Menu UI was effective in helping users navigate and interact with the metaverse, and it helped to create a sense of immersion and realism for the user.

Exploring the Menu in Metaverse

Learnings

While working on this project, I gained valuable experience in:

• Designing for VR environments: I learned about the challenges specific to designing for immersive and interactive experiences and all that must be taken into consideration. I also learned about the importance of usability, accessibility, and immersion in VR design and the role that layout, color palette, typography, and other design elements play in creating a successful VR interface.
• Working with Unity developers: I learned about collaboration and handoff with Unity developers, including communicating design decisions and providing clear and detailed instructions for implementation.
• Prototyping for VR: I gained experience in multiple tools and techniques for prototyping and testing in VR, including plugins and software that allow me to view my designs in a virtual environment.

Final UI

Thank you for checking out my case study. You can reach out to me on LinkedIN and don’t forget to clap!