Jugo
2023
The Problem
We were struggling with a lack of congruity in our environments, and across our products. Our 3D rooms looked decent, but didn't give the feel of a connected space that we were looking for, as well having fairly random themes that didn't really speak to the business-focused customer the company was looking to attract.
We also had issues with our 'Director View' - an overly complex application that was equally unsuitable for planning ahead, or quickly adapting on the fly.
The Challenge
Put together a brand new connected 3D environment for all facets of the product, rethink the live event control concept, and get it all together into a presentation video for senior stakeholders.
The Solution
Working with 3D designers and creative directors, we planned and built a whole new environment with inter-connected breakout spaces, a main auditorium, and a separate meeting room.
I designed and created a new timeline control for events - in this early version a user can stack elements on a timeline in real time, scheduling their next speakers, camera angles, and lighting changes - as well as dropping elements onto the current layout to make live changes.
This was then shown in a Figma prototype, and finally a demo video created in After Effects.
UI for live event control
Closer Look
Understanding the product as one entity
An constant issue at Jugo was isolation of certain product areas, and gatekeeping of 'in-event' and 'pre-post' flows.
This project represented the first push into a more unified product - the timeline UI was originally intended as a quick and simple way to make edits and plan ahead during live events. However, it became clear early on the this approach would also be useful for planning the event, leading to:
User familiarity with new patterns
More cohesion between different areas of the product
Less pressure on users by removing completely different UI patterns
There was also a lot of benefit is creating a new, more architecturally meaningful environment - even to the extent of creating an exterior. Users would feel like they are in a real place, and recognise places they may have 'sat' in the past, as well as opening up the opportunity for a free-roaming lobby type area.
Users could also see other areas while in meetings, for example, a view to the auditorium while they are sat in a breakout room. Activity continues no matter what, and the space feels alive and occupied as a result.
I created the initial UI concepts in Figma, and once we had a good idea of where things were going, began to recreate elements in After Effects to animate them properly, and show them in action, creating and editing the environment on-the-fly.
Users can cycle through various sections to find elements to drag into the scene - dragging a change onto an existing or live scene will prompt a change:
Layout changes = removing audience, big screen, presenter
Lighting changes
Camera angles
Bringing new documents into the big screen
Launching polls
Changing time of day
And many more.
Dragging these elements into an empty part of the timeline, or in-between existing sessions, would create a new area. Sessions in this version were not time-based, but could be moved forward through different means - manually skipping ahead, allowing the next lined up speaker to take control when they were ready, or setting a countdown before automatically changing to the next session.
This type of arrangement allows for quick live pivots within existing presentations, as well as pre-planning the next session or sessions. This translates perfectly to pre-event planning, and further into user and speaker management - once someone is lined up as a speaker, they are notified and allowed to administrate their own session.
The possibilities are huge once we adopt a consistent experience.
