Dopo Case Study | Immersive 3D Portfolio Website

The Starting Point

Concept Background

Dopo is an immersive website project designed as a portfolio website design case study. Built with interactive 3D elements and scroll-based web development, it highlights our creative process for bringing conceptual brands to life through immersive design.

Building the 3D assets: Balancing accuracy and optimization

The powerbank and sleeve were both modeled based on the real product, As the product geometry was simple, the main challange became balancing between keeping the mesh light for loading speeds and making sure it looked as realistic as possible,

Texturing and Realism

Crafting the Website Experience

To create that hyper-realistic feel, we layered many seemingly tiny insignificat details - inluding imperfections such as making the main body of the powerbank slightly bumpy. Below you can see the final texture maps and some of the decals and stickers. Using post-processing for the screen a glow gave it the final touch to really make the product come to life.

Powerbank Texture maps

Stickers and Normalmap decals

Designing the screens

Design & 3D Development Process

Designing the screens was about creating an easy to follow walk trough of the product and its features. The goal was to stay minimalistic and let the product shine while emitting a calm “it just works” feeling.

Developing the vision

Final screens

The Scroll Animation

Interactive Storytelling & Scroll-Based Flow

The animation was created around the designed screens where the main goals was to make a smooth animation while making sure that the product would never be in an unfavourable light or angle at any given point of the scroll.

Desktop main scroll animation

The animation is slightly different for all screen sizes. (For example, mobile is 30 frames longer)

The product never moves; it’s the camera that creates all the motion.

Altogether, there are six animations, including an intro and the main scroll sequences.

A Hidden Detail

Project Takeaways

You might not notice right away, but the color swatch is actually clickable. Furthermore, the color change is persistent trough out all the animations when scrolled back to the top.

The Final Result

This is where everything comes together — motion, layout and the details. everything just works together to combine a simple and balanced feel with a magical experience.

Case Study: Dopo — Immersive Portfolio Website

Concept Background

Crafting the Website Experience

Design & 3D Development Process

Interactive Storytelling & Scroll-Based Flow

Project Takeaways