Jugo
2023-2024
The Problem
Virtual meetings have been a reality for many years, and while they unlock a lot of potential for business, entertainment, and a whole host of other use-cases, the standard flat video conferencing model was long overdue an overhaul.
With Jugo, we were tasked with creating a whole new virtual meetings platform using Unreal Engine 5 to create beautifully rendered 3D environments, before placing our users directly into them to communicate, interact, and connect - properly.
However, these meetings were often flat, lifeless, and made little to no use of the environments or virtual space that we were creating - mainly through constant siloed iteration and a lack of proper collaboration between squads.
The Challenge
Create an experience that keeps the wow factor going after the first few events, or even outside of them.
Integrate the UI more seamlessly with the world - create a more congruent experience that stands apart from obvious competitors, and create a product vision that looks forward, not backwards.
Unite the business behind a universal, accepted, and respected design concept.
The Solution
An overhaul of the design methodology was required. The old UI was entrenched in patterns designed for a collection of webcam tiles flat on a screen - and while we weren't entirely free from those shackles, we had new technology and an extra dimension to play with, and this need to inform our ground-up concept.
After a lot of experimentation we landed on a concept: Everything happens in Jugo.
I decided it was key to create a sense of permanence in the spaces, and set this as a pillar of the product design going forward. I achieved this by creating an entirely diegetic experience, where all user interaction took place within their customised environment.
The UI was styled to bring the background forward, screens moving and resizing inside the environment in much the same way as they do within XR applications.
I collaborated with 3D artists and engineers on artistic and technical solutions, while liaising with senior leadership to keep the vision aligned - a custom designed, working space for users to conduct meetings of any size, internally and externally. These were early concepts also - many more possibilities were open to us once we implemented to basics - spatial audio, advanced animation, tactile inputs in tablet controls, myriad new interaction possibilities.
The REsults
Through rigorous testing and user feedback of early prototypes, I was able to get great qualitative feedback from users and stakeholders, including directly from the CEO and owner.
After a unanimous agreement that the new styling and concept elevated Jugo above competitors, and created a real sense of continuous, permanent space, the product look and feel began to shift - all UX and engineering focus was on achieving this new product vision and delivering the value to customers as quickly as possible.
With a concerted effort I was able to bring new concepts to the table and right the ship, satisfying our users and stakeholders alike. Many of these ideas, visual and otherwise, were implemented in the Jugo 2.0 Beta before the project pivoted to a more service-based model.
Spatial Design for Virtual Events
Closer Look
Rethinking the virtual experience
Around the time I began this work, we had been spending a lot of time debating and discussing immersion as a concept. How to create the levels of immersion we could tell were possible.
The main sticking point was that the current version of the app did not satisfy our needs for incrementing towards a more seamless and immersive experience. The current use of 3D environments with 2D UI over the top was a good start, but the technology had so much more potential, and we had blocked ourselves into a rote and not-innovative approach.
The environment tech was good, and created a wow factor initially - but how do we maintain that feeling after we've used the platform for a long time? As you can see below, after a lot of tweaking and iteration, the environments became little more than fancy backgrounds.
Our engineers created a system for tracking elements in a 3D Unreal environment through a broadcast stream - an incredible feat that unlocked customisable, hoverable zones for each user - and a new way to interact directly with our environment.
I set about investigating Spatial UI for future iterations of the product, initially leaning on Apple Spatial Design guidelines, which had recently been released.
I iterated a lot of screens, and pushed the concept in different directions - different forms of navigation, different arrangements of attendee tiles, size of host, etc, as well as prototyping interactions where screens moved forwards and backwards when active, and side to side to accommodate meetings and app UI together.
The main solutions we investigated and partially implemented were:
Embedding UI into environments, using transparency to imbue the UI with the theme of the environment
Using movement within meetings and events to create a sense of space, rather than everything living on the same flat plane - users could move in and out when they spoke, with surrounding screens moving out of the way, allowing for a more organic arrangement of tiles that properly illustrates a conversation, rather than having attendees flashing up whenever they make a sound.
Designing smooth and seamless transition from external UI into small meetings and up to large scale events, without the user ever feeling like they left their custom space.
Creating a sense of permanence and ownership of your space - leading into monetisation options in the future with custom props, schemes, and lighting.
The concept also allows for navigation of the app during meetings without interruption - UI blends and moves to accommodate your actions - this is all going on in your space, after all
The exercise was a great insight into hybrid UI for flat screen and XR applications, as well as creating and implementing a ground-up design methodology to inform decisions and refer back to constantly.