Bayer OpenLabs

Website Link: https://www.openlabs360.com/

Intern work @Paradowski Creative

| Project Goal
Bayer OpenLabs delegated Paradowski Creative to re-design and re-develop their original website during my internship.

| Role
Developer, collaborate with senior developer & experience designer

| Toolkit
React.js, React-three-fiber, Figma

01. Technical Development

Throughout my internship, I contributed to the development of key components of the experience, including the primary UI across various scenes (as shown below), implementing responsive design, and integrating the interface with the database behind the scenes. I focused on optimizing the overall user experience post-implementation, making iterative improvements in collaboration with the experience designer & senior dev.

I explored, demoed, and addressed several key challenges during development.

How to create a 3D space with independent controls within another 3D environment?

Since the background featured a controllable 3D sphere, we needed a way to separately control in-UI 3D models without interference. However, Three.js’s stopPropagation() function does not work for a 3D space layered over a 2D UI.

To achieve independent control, we leveraged Drei’s view helper to segment the viewport, effectively treating everything that appeared 2D as 3D. This approach allowed us to create distinct interaction zones within the UI - an unconventional but effective solution that successfully met our requirements.

How to coordinate multiple UIs in one screen responsively?

There are many different types of UI (info pop-up, sound play bar, model pop-up, etc) according to the design. Meanwhile, the background is a 360 video that will take place in OpenLab’s laboratary, including sounds.

I categorized the different types of user interfaces and built the logic that when the user interface expands (or is focused in some way), the background video and audio will pause so that the user is not distracted.

To view my coding samples on this project, please email joycezheng@nyu.edu.

Part of the visual materials in this case study is from Bayer OpenLabs (the old site)

︎︎︎[Prev]

[Home]

[Next]︎︎︎