The event entrance became a Web AR experience that works on a phone

(Challenge)

An online meetup needs a complete event entry point

At the time, many teams moved in-person events online, and a common approach was an email to participants with a video meeting or online social space link.

The goal this time was an online event designed from start to finish, with a low barrier to entry and no app to download for the event.

(Approach)

Event entry points in one web page, with an app-like interface

The video meeting entrance, the social space entrance and each participant's character are all integrated into one event site. Logging in and scanning an AR marker unlocks the character. This step was the biggest surprise before the event, and the hope was that users would share it on social media.

The interface imitates an app: a fixed screen height, single-page navigation, and animation in place of ordinary page loads, so the experience does not feel split into pages or get interrupted. Visitors log in with a game ID first, which adds a sense of ceremony and makes the site feel personal. On entry, an empty character image with an exclamation mark reminds users to claim a personal character.

The video meeting and social space steps are designed desktop-first, with a prompt to use a computer, while the AR step is designed mainly for phones.

(Key design)

Two key designs

Quiz cards

Quiz results had to resonate at once, so each states the user's place within the group and the percentage of the population it represents, kept as low as possible so that users feel unusual. When information is dense, the card layout sets up hierarchy: the index number sits at the top, apart from the rest, and the most important result sits in the middle. Cards are read in AR, where users can zoom and rotate freely, so the layout puts the first impression first.

Web AR build

Web AR was chosen so that users would not have to download an app. 3D objects and animation are exported from 3D software as glb files. An object size within 1–2 cm is enough, larger files take longer to load, and 10–15MB remains acceptable. Lighting is most stable when set in code, using a directional light whose brightness can be adjusted. A glb object can hold only one material, so UV mapping is the most stable approach. Baking animation before export makes it smoother, and a Gamma value of 2.2 or higher avoids color shifts.

(Result)

An AR event entrance that runs in a phone browser

The entrance brings together the video meeting, the social space and a personal character, and users scan an AR marker with a phone with no app to download. At the time, most marketing events in Taiwan still relied on in-app AR, such as social media filters, and Web AR is comparatively rare.