Interactive Banner for Godrej Spotlight

Experience Type: Interactive Web3D Experience

Role: UI/UX Designer, 3D Designer & Production Artist

Platform: Desktop, Mobile & Tablet Devices

Built Using: ReactJS

Additional Tools: Blender 2.8, Substance Painter & ThreeJS Editor

In early 2020, I was tasked with designing and assisting in the production of an interactive banner for two of Godrej Security Solutions' products. The project was my first exploration in the field of 3D web design and production.

I served as Lead Designer and Production Artist, designing the user Interface and user experience of the banner as well as handling scene lighting, animations and overseeing the production of 3D assets for the experience.

Since consumers could view the experience on both mobile and desktop platforms, designs were created for both.

IDEATION

“The objective was to showcase the products in an engaging manner while making sure the banner was easy to explore and use. ”

After discussing the project requirements with the client, the ideation process included creating a mood board by collecting references pertaining to the experience's general aesthetic, the UI design, animations etc. Figma, a free UI/UX design tool was used to prototype what the experience would look like on both desktop and mobile devices.

Above: A wireframe of one of the screens of the banner. Creating this helped establish the general layout of the page.

Concerning user experience, the objective was to make the banner as simple and straightforward as possible for consumers to use while being informative and engaging.

Above: Design Iterations through the design & developmental process

PRODUCTION

“In addition to showcasing the features of the product, priority was given to achieve a realistic rendering quality on web.”

Once the concept and prototype was approved by the client, production began with 3D assets being modeled and textured using Blender and Substance Painter.

Above: ThreeJS Editor was used to prototype the scene.

Above: The products were rigged and animated in Blender.

Much like in the VR medium, it was important to optimize components as much as possible to ensure smooth performance on both desktop and mobile devices. For the products themselves, checks were made to ensure that the total polycount of the scene did not cross 100,000 triangles and the number of draw calls per frame was as low as possible. The materials of the 3D models used texture atlases to reduce the total file size of the project.