Dopplr

Dopplr

This work reflects my time at Dopplr, a fashion tech company building web-based 3D virtual try-on experiences for ecommerce brands.

The product allowed users to create personalized avatars and preview garments in 3D before purchase. My role focused on designing the core try-on interface, supporting internal workflows, and shaping early marketing surfaces.

This was my first experience designing for 3D interactions on the web, which required thinking beyond traditional UI patterns.

Services

UI/UX Design

User Research

Motion Design

Industries

Industry

Fashion Technology, E-commerce

Tech Stack

Figma

Protopie

Jitter

Year

2022-24

Date

2022-24

VoltBike is a leading provider of electric bicycles, designed for both urban commuters and recreational riders. We were tasked with creating a user experience that was intuitive, efficient and enjoyable for riders of all levels.

VoltBike is a leading provider of electric bicycles, designed for both urban commuters and recreational riders. We were tasked with creating a user experience that was intuitive, efficient and enjoyable for riders of all levels.

VoltBike is a leading provider of electric bicycles, designed for both urban commuters and recreational riders. We were tasked with creating a user experience that was intuitive, efficient and enjoyable for riders of all levels.

Petavue Homepage

The Problem Space

Dopplr was building a web-based 3D virtual try-on experience for fashion ecommerce. The core challenge was helping users understand fit and comfort through a browser-based 3D avatar without overwhelming them with controls, data, or visual noise.

Existing try-on tools felt either too technical for shoppers or too simplistic to build trust in fit accuracy.

Dopplr’s goal was to solve this by:

  • Letting users create a realistic avatar

  • Allowing garments to be previewed on that avatar

  • Showing fit and tension visually rather than through text alone


The challenge was making this experience usable and understandable inside a web browser without overwhelming the user.

What We Set Out to Solve

We defined three primary success criteria:

Clarity of Fit and Body Insight

Help users assess fit confidently without losing focus on the garment.

Simplified Interaction Model

Create a quiet interface where controls are discoverable yet unobtrusive.

Functional Motion and Feedback

Use motion to communicate state and interaction without distracting from the 3D experience.

What We Set Out to Solve

We defined three primary success criteria:

Clarity of Fit and Body Insight

Help users assess fit confidently without losing focus on the garment.

Simplified Interaction Model

Create a quiet interface where controls are discoverable yet unobtrusive.

Functional Motion and Feedback

Use motion to communicate state and interaction without distracting from the 3D experience.

Making the Interface Quiet and Focused

Traditional UI patterns with persistent panels and visible toggles competed with the 3D canvas. In early tests, users spent time interpreting the interface rather than the garment.

To resolve this, we redesigned controls to be contextual. Instead of always-on panels, controls surfaced only when users interacted with the avatar or garment. Motion became the primary means of discovery, reducing reliance on labels and fixed UI elements.

Outcome: The interface feels calm and purposeful, keeping attention on the try-on experience.

Dopplr Product Prototype

Fit Visualization with Restraint

Visualizing fit requires balancing detail with readability. Strong, persistent overlays can distract from fabric and texture details.

We introduced a tension heat map overlay that is optional and tuned for contrast across varied skin tones and garment types. This allowed users to view fit information only when they wanted it, rather than forcing an always-on visual layer.

Motion as Feedback, Not Decoration

3D assets take time to load. That is unavoidable.

Instead of hiding this, I leaned into motion as a way to communicate what was happening. I designed animated loading states using Jitter that reflected the product’s tone without feeling distracting. The goal was simple. Let users know something is happening and avoid the feeling that the interface is stuck.

This approach carried into smaller interactions as well. Subtle motion helped clarify state changes and made the experience feel more responsive overall.

3D assets take time to load. That is unavoidable.

Instead of hiding this, I leaned into motion as a way to communicate what was happening. I designed animated loading states using Jitter that reflected the product’s tone without feeling distracting. The goal was simple. Let users know something is happening and avoid the feeling that the interface is stuck.

This approach carried into smaller interactions as well. Subtle motion helped clarify state changes and made the experience feel more responsive overall.

Dopplr Product Prototype

The Impact

A calm, focused interface where the product (garment + avatar) is the star

Communicative motion and feedback that clarify state without clutter

Optional yet powerful fit insight visual layers

Stronger alignment between design intent and engineering execution

©2026 – Made by Piyush

3:01 AM