UX & UI Design
•
Design System
•
UX Research
•
UX & UI Design • Design System • UX Research •
Overview
Sparkle is an online event browser-based platform that gives guests a sense of space and place.
The platform features a range of unique space templates – each configurable for a different dimension of an online event. The system also links to other social spaces or video conferencing platforms – from Zoom to Spatial Chat – to give the flexibility for the right tools to be used.
The platform is highly immersive, creative, and customizable.
Sparkle was one of the official partners of Burning Man and had the honor to organize the online Burning Man in 2020 and 2021.
The Challenge
Craft an immersive experience centered around co-creation and social interactions, strategically inspiring users to actively engage, interact, and invest meaningful time within the platform. The challenge is to seamlessly blend design elements that not only encourage participation but also foster a sense of community, making the platform a compelling and vibrant space for collaborative experiences.
The platform should sustain around 700 users.
The Solution
Research
In the research phase, I gleaned invaluable insights and feedback from my Sparkle colleagues, avid Burning Man Festival enthusiasts who annually attend the event. Our comprehensive competitor analysis highlighted the Shambala Festival as a particularly inspiring reference for our Splash Page.
Delving into the SparkleVerse platform, we conducted an extensive examination of Sparkle's competitors, with a keen focus on those providing a game-like experience. To refine the branding of the SparkleVerse landing page, we enlisted the expertise of an event organizer specialized in festivals.
Addressing user pain points and needs
Onboarding
Prior to immersing users in the authentic experience, we guide them seamlessly through an onboarding flow. This process involves creating their profile, responding to profile questions, familiarizing themselves with the 10 principles of Burning Man, configuring their cameras and microphone settings, and receiving helpful tips on navigating the platform.
Animated Map
The Animated Map incorporates three distinct zoom levels:
Plane Mode
Bike Mode
Walk Mode
Each zoom level is accompanied by unique audio effects, enhancing the spatial experience for users. Navigation is facilitated through arrow keys or a joystick, with the ability to "localize" the avatar using the designated button. To improve visibility amid a crowd of avatars on the map, a pulsating target surrounds the user's avatar, ensuring easy identification.
Interactions
Collisions
Avatars possess the ability to navigate and interact with venues within the environment.
Upon detecting a collision, the venue undergoes a subtle animation, expanding in size while revealing its label. Users are prompted to engage with the venue by pressing the "Enter" key, fostering an immersive interaction experience.
Interacting with other avatars
Clicking on other avatars will open an interaction menu with quick actions such as "Chat" and "Gift" or open the full profile modal.
Interactive venues
When an event is live, besides finding this information inside the Schedule, it can be observed on the map as a glowing animation of the venue that has a live event.
Dynamic schedule
The dynamic schedule adapts its content dynamically based on the user's location, with the option to download and integrate it into their calendar.
In real-time, the number of attendees in various spaces is displayed alongside a "Live" label if events are currently ongoing.
Users have the ability to bookmark events of interest, enabling them to filter and focus exclusively on those selected events.
Immersive experience
Sense of Spatiality
The map experience unfolds across three distinctive zoom levels—Plane mode, Bike mode, and Walk mode—each offering a unique perspective. In Plane mode, avatars manifest as dots, swiftly traversing the expansive map at high speeds, emphasizing the broader landscape with ambient background noise like the strong wind, distant music, and bass. Bike mode introduces visible avatars capable of elevated travel speeds, with detailed views, accompanied by immersive background noises such as bike rides on sand, muted voices, and diverse music from surrounding camps. Transitioning to Walk mode, avatars take center stage at their largest size, emphasizing intricate details. Here, users can engage with venues and art cars, experiencing a slower walking speed amidst the background cacophony of lively conversations, laughter, resonant music, and the soft crunch of steps on the sand.
Sense of Time
Elevating the user experience, the platform imparts a temporal context by showcasing the local time from the playa, dynamically adjusting the color theme of the map to reflect the distinct phases of the day—from sunrise and day to sunset and night.
In fostering concise and real-time communication, shoutouts resonate briefly for a span of 5 seconds, leaving a fleeting and ephemeral impact, adding an element of immediacy and impermanence to user interactions.
Safety
A safe place was designed, that tried to make the experience feel as real as possible by providing a 24/7 zoom room where users can contact a team of rangers and talk about their problems.
UI Design
Conclusion
The Online SparkleVerse marked an exceptional experience, accompanied by valuable feedback and easily addressable opportunities for improvement.
A key takeaway emphasized the necessity for Sparkle to evolve into a self-served product. This insight emerged from the realization that, during Burning Man, fulfilling numerous customization requests demanded substantial backend efforts from the team. To enhance user experience and streamline accessibility, transitioning towards a self-served model became a pivotal consideration.