Gensler

EXPERIENCE

Working closely with creative technologists on software development and projection mapping, collaborating with UX/UI designers on motion design, and participating in brainstorming, design development and prototyping.

MAIN PROJECTS

#1: Interactive wall software development & prototyping
#2: Interactive laser installation visual design & prototyping
#3: Data visualization conceptual design

brief

TIME: May 2019 — Aug. 2019 | 11 Weeks

TEAM: Gensler Digital Experience Design (Team of 30)

ROLE: Creative Programming, Prototyping, Motion Design

TOOL: TouchDesigner, React.js, MadMapper, AfterEffect, Cinema4D

#1 Interactive Wall Creative Development & Prototyping

My role: Collaborate with software development director on the development of a Content Management System (CMS) for the schedule management and a dynamic web component controlled by TouchDesigner on the backend for content update and display. Work on projector study and full-scaled projection mapping prototyping.

Tools: TouchDesigner, React.js, MadMapper, C4D

Welcome Wall is a real-time projection-mapped wall built on the main reception floor of the client’s new headquarter building, where the clients can setup their play schedule and manage the content projected on it through an online calendar.

Software Development
_____________________________

1. When the clients set up their play schedule through the online calendar (Content Management System), all the data including uploaded images, customized messages, and colors used for replacing preset colors in videos will be packaged and synced with the React App.

2. The real-time running React App will communicate with TouchDesigner through web socket. When receive messages (data) from the app, TouchDesigner will process videos, update real-time information, match app content with selected videos, and output composition of the two to projectors.

Web Development - React App

#2 Interactive Laser Installation Mockup

My role: Collaborated with brand strategists, motion designers and design managers, visualizing client’s brand values through lasers/light.

Tools: TouchDesigner, GLSL, AfterEffect

The experience will be a benevolent feedback loop tangibly connecting brand expression to human experience.Define a branded digital experience that aligns with, and extends beyond, the client’s vision. The experience must actively engage the public, capture their interest, encourage curiosity, and reward engagement.

Visual Expressions
_____________________________

Our mission is to translate client’s brand values into actionable digital experiences, the following are some visual examples representing speed, low latency, high resolution, and connectivity.

Flood

Circle

Response

Noise Elimination

Depth

Product Highlight

Public Canvas

Connection

#3 Data Visualization Conceptual Design and Mockup

My role: Collaborate with digital experience designers on the data visualization mockups to show the brand values and the marketing power of our client.

Tools: TouchDesigner, AfterEffects

This innovative and elevated approach warrants an equally innovative and elevated client briefing experience.
Out client is leveraging its entrepreneurial spirit and roots in innovation to accommodate dramatic shifts in people’s content engagement and expectations, creating an elevated advertising experience that’s propelling the industry forward to make advertising matter.