I redesigned Brandlab360 Core UI and built the design system as the sole UX/UI designer on the team.
Product
Brandlab360 Web3 Platform
What I did
Redesigned the product
Stakeholder Interview
User research
Interactive prototyping
My role
UX/UI designer
Brandlab360
We collaborates with innovative brands to create immersive 3D spaces across all industries, enabling their audiences to learn, shop, or work in exciting and memorable ways. The redesigned UI was successfully utilized in projects with major clients, Warner Bros and Deloitte.
Contents
Discover
Define
Develop
Deliver
Outcome
Overview
Virtual Reality is not yet widely adopted, but smartphones are part of our daily lives. To make this complex technology more user-friendly, I leveraged the familiar conventions of smartphone use. This approach allows users to accomplish tasks without needing to learn new interfaces. This is the first VR platform to integrate a smartphone within the virtual space.
Discover
Through quantitative research, I discovered that only 1% of people had tried shopping in a virtual environment. During usability testing, I observed users clicking on inappropriate elements or struggling to understand functionality. By working closely with stakeholders and conducting extensive usability tests, I identified business goals and problem spaces.
Business Goals
Compatibility Across Brands
Ensure maximum compatibility for use across various brands
Enhanced User Engagement
Elevate user engagement among individuals new to VR technology
Scalable design for Future Growth
Design a scalable system for future expansions and additional features
What did we have before?
Below is a screenshot of the previous UI, along with several critical issues identified through expert usability reviews, stakeholder feedback, and usability testing.
Stakeholder insights
Action menu
Non-scalable Design
Bottom buttons
Outdated design lacking refinement
Excessive concentration of icons in a single area
Usability issues
Ineffective Button Grouping
Users struggled to locate desired functions efficiently due to unorganized button groups.
Ambiguous Icongraphy
The existing icons caused users to spend additional time deciphering their functions.
Define
To balance UI issues and business objectives, I set a project goal based on Aaron Walter's hierarchy of user needs.
Project Goals
Functional
Optimizing button grouping, ensuring clarity in iconography, and refining design elements
Reliable
Implementing a comprehensive design system throughout various sections
Usable
Introducing familiar UI for VR newcomers
Develop
The biggest challenge of this project was enabling users to enjoy the VR experience without a steep learning curve. I found the solution in leveraging familiar conventions. Since many people are accustomed to using smartphones, I integrated a virtual smartphone, allowing me to use UI elements that require no explanation.
Additionally, I implemented a design system ensuring compatibility across diverse brands, consistency throughout interfaces, and scalability for future growth.
Phone Feature
Early discussions with leadership highlighted the significant potential of 'Phone' features, which were previously underutilized. Leveraging the conventions of using phones simplified the head-up display by relocating secondary functions to the 'Phone'. Clear labeling beneath each app and a scalable interface similar to app store downloads were additional benefits.
Previous 'Phone'
It was limited to making calls, sending messages, and turning on/off the 'Do Not Disturb' mode.
New 'Phone'
It evolved to encompass features such as VR setting, social sharing, navigation aids, and friend management, making the interface scalable like app store downloads.
Neutral colour schemes
to ensure compatibility across diverse brands and consistency throughout interfaces.
Design System
Clear and coherent icons
To ensure seamless interaction across the platform, providing intuitive symbols for common actions and visually distinctive indicators.
A responsive grid system
For responsive web and mobile interfaces, capable of transforming any device into a 3D virtual experience.
Button Variants
Deliver
I believe the 2D interface should seamlessly blend with the 3D environment behind it. A key focus in designing VR environments is effectively integrating these two layers: functional buttons and the virtual space.
Progressive Disclosure
& Tooltips
Relocating supplementary features onto the phone simplifies the head-up display and avoids overwhelming users. Additionally, I implemented hover button tooltips for brief and relevant information.
Top-right Icons
Notification & Profile
Bottom-middle Icons
Action and emoji menus for immediate user interaction.
Perspective and focus objects for efficient view settings.
Bottom-right Icons
Phone & Hide UI
Video Chat
Enables individual and group video meetings for collaborative shopping, working, or learning experiences within the virtual environment.
To ensure a seamless video chat experience, the video chat window appears at the top-right corner of the screen, outside of the phone interface. This allows users to engage more fully in the virtual space, even while performing other tasks on their phone or turning their phone off to focus on the virtual interaction.
However, a red dot on the phone icon will continuously remind users that they are still on the call.
Video chat window
%20-%20gray.png)
Message
Allows users to send messages to friends within the virtual environment.
For groups that often inhabit the virtual space together, it offers a group chat feature for seamless interaction akin to real-life messaging apps.
Group Interaction
Setting
Users can adjust communication settings, virtual environment display settings, and player settings (e.g., walking speed).
As we control the smart house, users can manage their settings through their phone. By hiding infrequently used icons, we keep the head-up display clean and intuitive.
Control Virtual Settings
People
Users can view a list of participants in the virtual environment, add them as friends, and interact with them (e.g., follow, teleport).
Share
Users can connect their social media accounts to post content and images from the virtual environment.
Quick Nav
Allows users to teleport to desired locations for efficient and rapid navigation within the virtual environment.
Brandlab360
Users can report issues for resolution, access information, and register their interest in participating in future opportunities, contracts, or updates.
Admin
This application is exclusive to administrators and allows them to check the report dashboard and make modifications to the 3D environment.
Outcome
36%
▼
Time on task
The redesigned UI, featuring logically organized icons, clear iconography, and a simplified HUD, reduced the time needed to complete tasks.
Deloitte
Mindscape
The redesigned UI made full use of a digital experience project with Team GB and ParalympicsGB, immersing users in the athlete's mindset.
Warner Bros
Virtual Commemorative Shop
The redesigned UI employed for the Warner Bros. California virtual shop.
