The Taiwanese app team Fourdesire held their annual user online meetup in September. With the core spirit of Fourdesire being „playful design,“ POLISH™ crafted an event portal webpage for them, creating a memorable immersive experience for users.

1. Core User Experience

“Make online events more than just a plain meeting link, but a complete immersive experience that is designed from the beginning to the end.“

Over the past two years, affected by the pandemic, many teams have turned physical events online, but the method is often simple, usually by sending an email to participants with a link to Google Meets or Gather Town, resulting in a relatively singular experience. The event page created for the Fourdesire online meetup aims to craft a more sophisticated and dedicated immersive experience.

”Fourdesire Playland“ Event Portal Page

We integrated the Google Meets entry, Gather Town entry, and participant-exclusive roles that will be used on the event day into one campaign site. Users can log in to the webpage and scan an AR marker to unlock their roles. The AR marker scan is the biggest surprise element before the event, hoping users will want to share this fun experience on their social networks.

„AR Scanning Segment“ is a major highlight of the event webpage

2. Website Structure Design

“Gather all user experiences in this online carrier, and enhance the immersive effect through an app-like interface design.“

Process: Before entering the website, users need to log in with a game ID, adding a sense of ceremony and exclusivity, making users feel this site is just for them. Upon entering the site, they see an empty character image with an exclamation mark guide, reminding everyone to claim their exclusive role.

Website Login Screen

Interface: By fixing the screen height and using a SPA (Single Page Application) for page switching, animations replace regular webpage loading effects, reducing the feeling of paginated websites, making the experience smoother and undisturbed.

Device Consideration: The interfaces for Google Meets and Gather segments prioritize the desktop version, also prompting users to browse these two places on a computer. The AR scanning phase mainly focuses on the mobile version.

Computer vs. Mobile Version

3. Quiz Card Design

”Arrange information hierarchies so users can immediately see the text content that resonates most with them.“

Quiz Result Card Design

Key points in card design:

1. The quiz results must immediately resonate with users, drawing from the previously popular NetEase color quiz, by illustrating the user's „position in the group“ and „percentage of total population,“ making this percentage as low as possible, allowing users to feel unique and rare.

2. We hope to reduce the burden on users in absorbing information. We found that when there is a lot of information, mimicking a card layout prevents text from being cramped and hard to read. The card layout can also create different information hierarchies, for example, placing „XX Index/Number“ at the top, separating it from other content to avoid obstructing user reading. The most important quiz result should be in the middle, not the top.

3. Consideration must be given that this information will be read in an AR environment. After multiple tests, it was found that unlike normal graphic design, text size is not a major focus in an AR environment because users can freely zoom and rotate; instead, one should focus on the initial „feeling“ at first glance, ensuring it resonates strongly with them, as previously described.

   
   

4. Web AR Implementation

“Using C4D to export GLB files achieves the best web performance.“

We observed that most marketing events in Taiwan are still app AR-focused (such as IG filters), with fewer Web AR implementations. We aimed to lower the threshold for user participation, avoiding the necessity to download an app for the event, hence deciding on Web AR.

In terms of implementation, the greatest challenge was web performance issues. After a series of tests, this Web AR's 3D objects and animations were generated using C4D to export GLB files. There are some limitations and details to note during the implementation process, shared below:

After testing, file output size within 1-2 cm is more than sufficient

Object Size: The size of an object directly affects file size, and overly large files tend to crash browser performance. Therefore, the object size set in 3D software being within 1-2 cm is more than sufficient.

1. Light Source: Initially, we added a light source in C4D, but even though it rendered normally in the software, upon uploading to AR, the object turned black. Eventually, we discovered that setting the light source in the program was the most effective solution, being stable and allowing for adjustments in brightness and type (we used directional light).

2. Material: The GLB file type recognizes only one material per object in 3D. Therefore, UV Mapping is the most stable approach, closely matching the original design color. Although we considered adding glowing effects for card appearances, the material performance with GLB does not support emissive output (luminance).

3. Animation: The GLB file format limits the main animation functions of C4D (Mograph). However, GLB supports exporting character animations using the bone system, with basic movements like translation, rotation, and scaling possible.

In terms of material, using UV Mapping is the most stable method

Other file output notes:

• If a color deviation occurs in the AR model, first check if the Gamma value in render settings is set above 2.2.

• If animation is involved, bake before exporting to ensure a smoother animation.

• The larger the file, the longer the AR loading time, with 10-15MB still within an acceptable range.