OEXPO
Oct. 2020 - Aug. 2021
Taipei, Taiwan
Taipei, Taiwan
Role
Unity Engineer
Type
Company Project with OSENSE Technology
Platforms
WebGL-enabled browsers on PC and mobile devices
Tools
Unity/C#, Babylon.js
Unity Engineer
Type
Company Project with OSENSE Technology
Platforms
WebGL-enabled browsers on PC and mobile devices
Tools
Unity/C#, Babylon.js
Overview
The global spread of COVID-19 transitioned trade shows and exhibitions from predominantly offline to entirely online. In response to the urgent demands of virtual exhibitions, we identified user needs and created a scalable, customizable virtual exhibition module accessible through web browsers.
OEXPO offers companies the opportunity to directly engage with a diverse customer base, showcasing their products and services. Additionally, event participants can freely navigate a 3D space.
Having successfully supported numerous business exhibitions organized by professional exhibition organizers (PEOs), we have expanded the module into a full-fledged SaaS product. Drawing from our experience in hosting exhibitions, this SaaS product is designed to cater to businesses of all types and sizes. The product was launched in Taiwan and Japan in September 2021.
Role
As a software engineer and 3D interaction designer, I created and developed a highly versatile 3D exhibition module. This module is not only easily customizable and scalable but also offers great performance across various devices. Beyond my technical responsibilities, I wore multiple hats within the startup, actively shaping the product planning and user experience design processes.
The global spread of COVID-19 transitioned trade shows and exhibitions from predominantly offline to entirely online. In response to the urgent demands of virtual exhibitions, we identified user needs and created a scalable, customizable virtual exhibition module accessible through web browsers.
OEXPO offers companies the opportunity to directly engage with a diverse customer base, showcasing their products and services. Additionally, event participants can freely navigate a 3D space.
Having successfully supported numerous business exhibitions organized by professional exhibition organizers (PEOs), we have expanded the module into a full-fledged SaaS product. Drawing from our experience in hosting exhibitions, this SaaS product is designed to cater to businesses of all types and sizes. The product was launched in Taiwan and Japan in September 2021.
Role
As a software engineer and 3D interaction designer, I created and developed a highly versatile 3D exhibition module. This module is not only easily customizable and scalable but also offers great performance across various devices. Beyond my technical responsibilities, I wore multiple hats within the startup, actively shaping the product planning and user experience design processes.
Process
The Problem
How might we design an online exhibition experience that:
Project Process Overview
Here is an overview of the evolving process of this project:
![]()
Ideate And Prototype The First Version
The initial version was prototyped in Unity and compiled for WebGL platforms. This version showcased the core concept of customizing the virtual booth's appearance and information for vendors, as well as enabling interaction through the virtual booth for event participants. Users can explore the virtual exhibition room and seek out vendors of interest, simulating the experience of being in a physical exhibition.
![]()
Iterate Through Multiple Online Exhibition Events
We gathered feedback and iterated on the design through hosting a series of online commercial exhibitions. While each exhibition had its unique requirements, we successfully distilled and addressed these needs, leading to the development of a customizable and scalable online exhibition module capable of supporting events with up to a thousand vendors.
With the enhanced version of OEXPO, users have the flexibility to explore a commercial exhibition in two ways: either through interactive maps or by navigating the virtual expo hall rooms. The hall room module dynamically adjusts its layout to accommodate the number and various types of booths allocated to the room.
Participants can engage with virtual booths in a variety of ways, including reading brochures, scheduling business calls, exchanging business cards, and making notes about products of interest. Vendors can make modifications to their booth contents on demand and interact with potential buyers through the platform.
![]()
![]()
![]()
![]()
![]()
Improve The Performance By Switching From Unity To Babylon.js
Initially, the virtual exhibition module was built in Unity. Although the performance has been optimized and can run smoothly on PC or laptop browsers, we encountered difficulties running it on mobile devices. This is because the performance of Unity WebGL is poor on mobile and is not officially supported.
Therefore, I began investigating various frameworks and Web3D engines, including Three.js, Babylon.js, PlayCanvas, etc. Following thorough research and experimentation, we made the strategic decision to transition from Unity to Babylon.js.
Introduce The AR Product Viewing Feature
With the transition to a new development framework, we also introduced the AR product viewing feature using Google model-viewer on mobile devices.
This feature empowers users to visualize the product as if it were physically present, thereby enhancing the likelihood of subsequent purchasing behavior. For businesses unfamiliar with AR technology, we facilitated connections with 3D vendors, enabling them to effortlessly create and integrate an accurate AR product model that truthfully represents their actual product. This distinctive feature sets us apart from our competitors.
![]()
![]()
Transition Into A SaaS Product
Drawing on the valuable experience gained from previous commercial exhibitions and a deeper understanding of user needs, we developed our own software-as-a-service product, OEXPO, with the aim of empowering more businesses to connect with their customers online.
![]()
![]()
![]()
![]()
![]()
![]()
How might we design an online exhibition experience that:
- Is performant and easy to use across devices
- Efficiently guides the users to the booth they want to visit
- Encourages interaction and communication between the visitors and booth vendors, helps them establish trust, and reduces their virtual distance during the pandemic
- Feels immersive and intuitive to navigate in the 3D world
Project Process Overview
Here is an overview of the evolving process of this project:
Ideate And Prototype The First Version
The initial version was prototyped in Unity and compiled for WebGL platforms. This version showcased the core concept of customizing the virtual booth's appearance and information for vendors, as well as enabling interaction through the virtual booth for event participants. Users can explore the virtual exhibition room and seek out vendors of interest, simulating the experience of being in a physical exhibition.
Iterate Through Multiple Online Exhibition Events
We gathered feedback and iterated on the design through hosting a series of online commercial exhibitions. While each exhibition had its unique requirements, we successfully distilled and addressed these needs, leading to the development of a customizable and scalable online exhibition module capable of supporting events with up to a thousand vendors.
With the enhanced version of OEXPO, users have the flexibility to explore a commercial exhibition in two ways: either through interactive maps or by navigating the virtual expo hall rooms. The hall room module dynamically adjusts its layout to accommodate the number and various types of booths allocated to the room.
Participants can engage with virtual booths in a variety of ways, including reading brochures, scheduling business calls, exchanging business cards, and making notes about products of interest. Vendors can make modifications to their booth contents on demand and interact with potential buyers through the platform.
Improve The Performance By Switching From Unity To Babylon.js
Initially, the virtual exhibition module was built in Unity. Although the performance has been optimized and can run smoothly on PC or laptop browsers, we encountered difficulties running it on mobile devices. This is because the performance of Unity WebGL is poor on mobile and is not officially supported.
Therefore, I began investigating various frameworks and Web3D engines, including Three.js, Babylon.js, PlayCanvas, etc. Following thorough research and experimentation, we made the strategic decision to transition from Unity to Babylon.js.
Introduce The AR Product Viewing Feature
With the transition to a new development framework, we also introduced the AR product viewing feature using Google model-viewer on mobile devices.
This feature empowers users to visualize the product as if it were physically present, thereby enhancing the likelihood of subsequent purchasing behavior. For businesses unfamiliar with AR technology, we facilitated connections with 3D vendors, enabling them to effortlessly create and integrate an accurate AR product model that truthfully represents their actual product. This distinctive feature sets us apart from our competitors.
Transition Into A SaaS Product
Drawing on the valuable experience gained from previous commercial exhibitions and a deeper understanding of user needs, we developed our own software-as-a-service product, OEXPO, with the aim of empowering more businesses to connect with their customers online.
Challenges
Challenges For This Project
- Find the design balance between various stakeholders, including PEOs, participating vendors, salesperson, potential buyers, visitors, etc., so that we can satisfy their needs and address their respective pain points
-
Optimize 3D scene and achieve optimal performance and memory usage across platforms, especially low-end devices with less computing power and memory
-
Create intuitive and accessible Web3D experience with interaction methods designed for different platforms
-
Researched and made key design and development decisions on how the 3D world should be structured and presented
Outcome
Serve Multiple Commercial Exhibitions
During the pandemic when physical interactions were hard to achieve, we served over 10 commercial exhibitions with over 2,000 participating vendors and over 5 million views online. We facilitated interactions between vendors and participants for large commercial exhibitions, including Computex, Meet Taipei, TTMTOS, and more, increasing their business opportunities and exposure.
![]()
Launch “OEXPO - Smart Exhibition Solution” As A SaaS Product
We successfully launched the product in Japan and Taiwan in September 2021.
OEXPO provides businesses with the flexibility to easily customize their virtual booth, choose or switch between different booth types, and upload marketing materials directly linked to custom objects within the booth. Designed with cross-platform functionality in mind, users can intuitively navigate the 3D environment of the virtual booth on various platforms.
![]()
Client Example - A Sushi Booth
Here is an example of an online booth promoting a sushi restaurant. This example includes the online booth as well as a kiosk version for physical interactions at the store. We further utilized cameras to detect the user’s gender, age, and emotions, to improve interactivity and provide business insights to the restaurant.
During the pandemic when physical interactions were hard to achieve, we served over 10 commercial exhibitions with over 2,000 participating vendors and over 5 million views online. We facilitated interactions between vendors and participants for large commercial exhibitions, including Computex, Meet Taipei, TTMTOS, and more, increasing their business opportunities and exposure.
Launch “OEXPO - Smart Exhibition Solution” As A SaaS Product
We successfully launched the product in Japan and Taiwan in September 2021.
OEXPO provides businesses with the flexibility to easily customize their virtual booth, choose or switch between different booth types, and upload marketing materials directly linked to custom objects within the booth. Designed with cross-platform functionality in mind, users can intuitively navigate the 3D environment of the virtual booth on various platforms.
Client Example - A Sushi Booth
Here is an example of an online booth promoting a sushi restaurant. This example includes the online booth as well as a kiosk version for physical interactions at the store. We further utilized cameras to detect the user’s gender, age, and emotions, to improve interactivity and provide business insights to the restaurant.
Contributions
- Established the end-to-end experience for the 3D virtual expo environment and AR product-viewing feature in our SaaS product across different devices
- Developed a scalable and customizable virtual environment module.
- Implemented a streamlined process with technical artists, vendors and engineers for development in production
- Researched, designed, and prototyped the MVP of our SaaS product. Effectively collected feedback to validate the hypothesis
- Proactively picked up a new framework for WebGL development to break the technical bottleneck encountered during the product development process.
- Prepared structured courses on 3D design and development with Babylon.js and taught 15 fellow engineers with no prior 3D engine knowledge. The course received positive reviews and the students were able to quickly create prototypes after the class, which helped improved the development efficiency within the company
- Optimized WebGL performance by profiling, assets post-processing and other optimization techniques
Reflections
Development
Engaging in the development of Web3D experiences across various devices has significantly broadened my knowledge base. I've come to appreciate that performance is key, and achieving optimization demands meticulous efforts and careful planning at every stage of the process.
Collaborating closely with technical artists and vendors has highlighted the importance of meticulous attention to detail, especially for handling 3D assets. I've learned that by establishing precise and user-friendly specifications, the module becomes more readily scalable and customizable for future applications.
Moreover, the integration of Web3D with front-end frameworks has not only deepened my understanding but also enriched my experiences in front-end development.
Design
Engaging in the product planning process, I've gained valuable insights into the intersection of business strategy and user experience design. It's become evident that finding a harmonious balance between business goals and user needs is a nuanced challenge that demands ongoing communication with various functional teams.
A key takeaway for me has been the importance of transcending the confines of a specific role. As an engineer, I've learned the significance of judiciously sharing information and ideas to provide the entire product team with a more accurate understanding of achievable outcomes. Sometimes, technical limitations may not be fully apparent to the team, hindering effective design decisions. Through proactive research and experimentation, I've found that offering an engineering perspective allows me to advocate for the engineering team during meetings and furnish the team with crucial information for informed decision-making.
Engaging in the development of Web3D experiences across various devices has significantly broadened my knowledge base. I've come to appreciate that performance is key, and achieving optimization demands meticulous efforts and careful planning at every stage of the process.
Collaborating closely with technical artists and vendors has highlighted the importance of meticulous attention to detail, especially for handling 3D assets. I've learned that by establishing precise and user-friendly specifications, the module becomes more readily scalable and customizable for future applications.
Moreover, the integration of Web3D with front-end frameworks has not only deepened my understanding but also enriched my experiences in front-end development.
Design
Engaging in the product planning process, I've gained valuable insights into the intersection of business strategy and user experience design. It's become evident that finding a harmonious balance between business goals and user needs is a nuanced challenge that demands ongoing communication with various functional teams.
A key takeaway for me has been the importance of transcending the confines of a specific role. As an engineer, I've learned the significance of judiciously sharing information and ideas to provide the entire product team with a more accurate understanding of achievable outcomes. Sometimes, technical limitations may not be fully apparent to the team, hindering effective design decisions. Through proactive research and experimentation, I've found that offering an engineering perspective allows me to advocate for the engineering team during meetings and furnish the team with crucial information for informed decision-making.
