vStage, an immersive 3D concerts platform
For TETAVI B2C
Role: Lead UX/UI Designer, Art Direction
Collaborators: Development Team, Product Managers, Business Development Team
Platforms: WebGL
Project Duration: 3 weeks
As the Lead UX/UI Designer, I was tasked with creating an immersive, interactive virtual concert space that caters to a younger audience eager to explore the metaverse and to music artists and producers seeking broader online exposure.
Goal
In essence, vStage’s goals are centered on building a dynamic, inclusive platform that not only entertains but also nurtures a sense of community, innovation, and ease of access in the digital music world.
Engaging the Tech-Savvy Youth To create an enthralling online environment blending the virtual with the real, enabling tech-savvy youths to dive into a world where technology and music merge, offering them a space to explore, connect, and share their experiences in an exciting 3D concert landscape.
Empowering Emerging Music Talents Aiming to transform the traditional music scene, vStage serves as a launchpad for emerging artists, giving them a global platform for virtual concerts. This approach democratizes music performances, providing artists with the tools to reach a wider audience, increase their exposure, and cultivate a digital fanbase, crucial for those carving out their niche in the digital music arena.
Catering to Virtual Event Enthusiasts With a vision to be the premier destination for online concerts, vStage is designed to appeal to a broad spectrum of music lovers. This includes seasoned concert-goers and those who favor the convenience of virtual events. The platform prioritizes ease of access, high-quality streaming, and interactive elements to ensure each event is distinctive and engaging.
The challenge
In crafting vStage for TETAVI, the objectives were meticulously aligned with the challenges of engaging a diverse audience in a digital realm. The platform was envisioned to mesmerize tech-savvy youths by merging the virtual with the real in an immersive online environment. This initiative was particularly challenging due to the need to create a space that was both technologically advanced and intuitively navigable, allowing users to effortlessly explore, connect, and share experiences within a dynamic 3D concert space. Concurrently, vStage was designed to empower emerging artists and producers, offering them a global stage to break traditional performance barriers and establish a presence in the digital music scene and the metaverse.
This goal presented the challenge of providing a robust platform for live virtual concerts with comprehensive artist tools and audience engagement features. Additionally, addressing the rising interest in virtual events, vStage aimed to be a go-to platform for online concert experiences. This included tackling challenges like ensuring high-quality streaming, interactive engagement, and user-friendly interfaces to cater to both seasoned concert-goers and those new to virtual events.
Research
The research phase for vStage, conducted under a stringent deadline, was intensely focused on understanding the nuances of UX and UI in the realm of online live events and WebGL experiences. This targeted approach was essential to develop a platform that was both user-centric and technologically sound, despite the time constraints.
Competitive Analysis of Online Live Events With the limited timeframe in mind, I executed a focused study of popular online live platforms such as Facebook Live, YouTube, and Twitch. This analysis concentrated on extracting crucial insights about user engagement strategies, interface layouts, streaming quality, and interactive features. The goal was to swiftly identify the key attributes that make these platforms successful or lacking, which directly fed into creating a distinctive UX/UI design for vStage.
Targeted Exploration of WebGL Experiences Recognizing the central role of WebGL technology in vStage, my exploration into existing WebGL experiences was particularly driven by the urgency to understand its application in creating immersive 3D environments. I selectively examined WebGL instances that showcased innovative use of the technology, focusing on those aspects that could be rapidly integrated into vStage’s design to enhance user interaction and visual appeal.
Focused Study on User Interaction and Gestures Given the project's tight deadline, my investigation focused on user gestures, navigation patterns, and engagement behaviors that were most critical to the design of vStage. This approach enabled me to quickly gather actionable insights for the engaging interface.
Pain points
User Interface Complexity While aiming to be immersive and feature-rich, the interface might become overwhelming for some users, especially those who are not as tech-savvy. Navigating through various features and options could be challenging for a segment of the audience. Nevertheless, given the virtual nature of the concerts, some users might feel a lack of the authentic “concert feel” or find the digital interactions (like claps, and camera flashes) less satisfying compared to physical events.
Technical Performance and Compatibility Users might face issues with streaming quality, especially if they have slower internet connections. Compatibility with different devices and browsers could also be a concern, as not all users may have the latest technology or updated software. Other than that, managing large-scale live events without technical hiccups, such as server overloads or streaming issues, can be challenging, especially during high-traffic events.
Initial flow
Solution
In addressing the unique challenges posed by the development of vStage, the solution was multifaceted, focusing on technological innovation, user experience, and audience engagement. The primary solution involved creating an immersive 3D concert environment using WebGL technology, meticulously designed to be both visually captivating and easy to navigate. This environment was tailored to resonate with tech-savvy youths, offering them an interactive space that seamlessly blends the digital with the real world.
The platform was designed with a user-centric approach, ensuring ease of access and interaction. This included high-quality streaming capabilities, and a range of interactive features like live chat and gesture-based interactions, enhancing the overall user experience. The introduction of innovative features such as multiple camera angles, interactive “Claps” and “Camera Flash” options, alongside a “Like” counter that triggered visual celebrations in the form of 3D confetti canons. All of those further enriched the virtual concert experience. These features not only fostered user engagement but also added a sense of community and shared excitement among attendees.
Wireframing
Wireframes and Prototyping
The prototyping phase for vStage was pivotal in realizing our multifaceted solution, encompassing technological innovation, user experience, and audience engagement. Throughout the design process, an emphasis was placed on iterative development and internal testing, ensuring that the final product was not only technologically sophisticated but also aligned with user expectations and project timelines.
Initial Wireframes with Basic Interactions I started with basic wireframes to simulate the 3D concert space, features, and gestures, always keeping in mind to prioritize intuitive navigation. The goal was to create a seamless experience for users, regardless of whether they were using touch, mouse, or keyboard controls.
Basic Prototyping with Enhanced Features The next phase involved Initial Prototyping to experience the interactive elements. This included live chat, gesture-based controls, and innovative features like the “Claps” and “Camera Flash” options. Additionally, incorporates multiple camera angles, including a pre-animated camera view, allowing users to customize their concert experience. The prototyping of the “Likes” counter was also a crucial aspect, where reaching a target number would activate a 3D confetti cannon, adding a celebratory element to the platform.
In-House User Testing Due to Tight Deadlines Given the project's tight timeline, user testing was conducted internally. This approach enabled us to quickly gather insights and iterate on the design. Although external user feedback would have been valuable, in-house testing allowed for rapid development cycles essential for meeting our project deadlines.
Final Prototype with Integrated Features: The culmination of the prototyping phase was a comprehensive prototype that included all planned functionalities. This prototype was integral in guiding the final development of vStage.
Loading page and festival map, concept and exploration
Implementation
Results
Upon the completion and launch of vStage, the platform quickly demonstrated its success, showcasing the effectiveness of our targeted research and development efforts.
Positive User Engagement The innovative option for users to experience live shows online, select their camera angles, and engage in real-time interactions brought a new level of personalization and immersion to the online concert experience, greatly enhancing user satisfaction.
Positive Reception from Participating Artists Artists participating in the vStage event experienced enhanced fan engagement and were able to showcase their talents in a technologically advanced environment. This not only affirmed their relevance as artists but also positioned them as frontrunners in adopting new technologies. vStage provided these artists with a unique platform to connect with their fans more interactively and engagingly, further solidifying their presence in both the music and digital worlds.
Increased Platform Adoption The launch of vStage significantly bolstered the company's position in showcasing advanced technology, quality content, and compelling storytelling, attracting a wider audience drawn to innovative digital experiences.
Achievement of Project Timelines Despite the ambitious scope and technological complexities, vStage was successfully launched within the projected timelines. This accomplishment underscores the efficiency and dedication of the product and development team in bringing this innovative concept to fruition on schedule.
Feedback and Future Directions Post-launch, vStage received a wealth of feedback from its audience, which was meticulously researched and addressed promptly. These insights were instrumental in making swift adjustments and enhancements, ensuring that the platform continued to evolve in line with user expectations. This ongoing process of gathering and integrating feedback is a cornerstone of vStage's commitment to continuous improvement and adaptation to emerging trends and user needs.
