Switching the medium from “offline” to “online”, without sacrificing the realness
SCUAD was originally going to be held in a beautiful city called Bandung in Indonesia. SCUAD itself is an acronym of “Social Cultural Action for Development”, an event that unifies both Indonesian and Japanese youngsters into teams and compete in an idea challenge to tackle social and cultural issues. SCUAD is an initiative to encourage youths to be more aware of SDGs, in an entertaining way.
Then, COVID-19 suddenly hit us in March 2020. Our plan was destroyed.
What would you do if your team’s plan was destroyed in a blink of an eye? It is a devastating moment of us, especially when every details have been set and every bills have been paid.
However, as a Creative Director of SCUAD,
I wouldn’t let my team down, nor let our plan get out of the way. Thus, we shifted the event from offline to online, but we wanted to make it as immersive as if the guests were actually coming to Indonesia.
Summary
The Project
An online event platform where visitors can watch and enjoy the live event surrounded by 180 degree-walkable atmosphere of cyberpunk-ish themed of Bandung City. Visitors can virtually experience the local uniqueness of Bandung City, such as the street food stall and Bandung’s most iconic building: Gedung Sate.
Platform
Web
The Goal
To create a virtual event platform for SDGs idea competition where guests (audiences) can experience an immersive experience as if they were attending the event in Bandung, Indonesia.
Project Staff
4 Designers
2 Engineers
2 Project Manager
1 Program Director
2 Advisors
My Roles
Creative Direction
Managed a team of 4 designers
Developed a design from 0 to 1, working closely with engineers
Target Users
Indonesian and Japanese, 17-30 years old
The Process
Preliminary Test
Using a virtual platform called Cluster, we tested out how the experience would feel if we held a live event this way.
Results
It feels immersive and fun, but it is troublesome to enter the online platform (need to sign up — which takes time!). Also, a smooth internet connection is necessary, which can only be accessed to some target audiences, not accessible for people from remote area in Indonesia.
Design Process: 2D Walk-through
We developed a mid fidelity prototype of 2D walk-through “arena” using 2D materials for feasibility test.
Results
It was visually appealing, with the vibrant color that matches with the overall theme. However, it was not immersive enough, the icon looks amateur, visitors couldn’t do much about it. The scrollable arena was too short to fulfill visitors’ expectations.
Our Idea Plan
A futuristic-feeling immersive virtual event platform with neon colored theme and cyberpunk-ish style UI.
Neon-colored Theme
Futuristic UI
Cyberpunk-ish City
Design Process: 3D Walk-through
Since 2D arena was not immersive enough, we developed a 3D arena for feasibility test.
Results
3D interaction ability left us a much better impression than scrollable 2D arena. However, to develop a platform that 100% fulfills our expectations, we got to face two big problems: time and budget constrains.
Design Process: Mid Fidelity
Neon colored theme and a glimpse of cyberpunk-ish city background helped us imagining how the final result would look like.
Results
We need more details to finish the project. However, with time and budget constrains, it seemed to be difficult to make it 100% as we planned.
Original User Flow Plan
Sign Up to Get Access
Originally, we want to gather users’ data such as nationality and their email address for our future projects. Users need to sign up in order to enter the virtual platform.
However, since it was troublesome to some users (we have tested it before going it publicly), we decided to discard this process. We want to keep this platform entertaining, not bothering to our users.
Login to Access
We know that this flow is somewhat bothersome (even for us!) because we need to re-enter our login credentials. Thus, we also discard this process and let users to enter the platform directly.
Final User Flow
Loading Zone
To check the stability of users’ internet connection and load heavy data, unfortunately users need to wait in the loading zone. To entertain them, we put a cute animation of our mascot!
Enter Venue Zone
Since we had time constrain to build a fully realized plan, we decided to use our materials (2D scrollable scene) to guide users to enter the main venue. We kept the color consistent from the beginning to the end so that users think that experience are one package.
Main Arena
In this arena, users can walk through 180 degree and interact with 3D assets such as the street food stalls. Users can see the details of the uniqueness of Bandung city culture. Moreover, while users enjoying the atmosphere of night city, they also can watch a live stream event where we injected YouTube live streaming code into our website!
Final Result of Our Event Platform
Details have been added, neon-colored night city theme has been painted, codes have been injected to make this go online!
User Guidance shown in the landing page
Live stream from OBS to YouTube
From users' perspective
Lesson Learned
Put Users First
We might have a crazy-wild-superior idea that we think it’s cool and we “assume” that users will love it. Unfortunately, it is not how it should be. As a designer, we need to test for every single step we made before going to the next step. This is to ensure that users’ needs are fulfilled (re: usability).
How to Overcome Time and Budget Constraints
Communicate the problems with program director and engineers, finding the solution and make sure everyone is agree and happy about the changes we may make. From users’ perspective, they won’t realize anyways.
Always Have a Backup Plan
At the moment we held the live event, we received complaints from users regarding the access to the online platform. Our targeted users from Indonesia have difficulties to access due to internet connection. Since the goal is to let them watch our event, we initiated to provide the original source of YouTube link which we put in the landing page.