a large satellite dish set against a cloudy sky

Context

My role

Design & Prototyping

Team

Amazon Home Innovation Team

Timeline

Jan - March 2024

Tools

Figma, Blender, Babylon.js

Amazon’s 3D product viewer lets customers rotate around a product to see it from all angles, but it looked so fake that customers would question the product quality.

I went outside my scope as a UXD to independently revamp the feature’s photorealism without sacrificing interactivity (something the team thought wasn’t doable), and helped ship a realism overhaul that generated tens of millions in revenue per year and facilitated the expansion of our tool to teams across Amazon.

The Problem: Realism, or Interactivity?

When I joined the team, we were stuck between two not-great options: photoreal 3D spins that were locked to one camera angle, or full 3D views that looked cartoony.

The photoreal spins were just scrubbing left/right between 72 real photos or high quality renders of an item, so you were locked to one axis. The full 3D viewer was a newly launched real-time 3D model which let you orbit and zoom to any position—but with a massive realism dropoff.

Try em both out below:

The photoreal, limited angle version didn’t allow for crucial evaluation angles like looking at the sole of a shoe, seeing the upholstery of a couch, or peering inside a lampshade.

The full 3D viewer gives you those angles, but it was so unrealistic that it would turn some people away from the product entirely, thinking it was low quality or a scam.

All real-time 3D graphics suffer from this tradeoff of realism vs interactivity. Rendering lighting at 60 frames per second can’t ever match the quality of prerendered images. If you’ve ever played a video game with incredibly realistic video cutscenes, and much lower quality gameplay visuals, you know what I mean.

Our engineers worked hard to get this to be performant, but they did so without an artistic eye in the room. I set out to see how we render products, and what realism improvements could be available to us without causing huge performance issues.

Digital image with horizontal lines and color distortions, no discernible objects or scene

Close-up of computer hardware components, including a circuit board and connectors.

Our customers need both realism and interactivity.

Business goals and weblab wins don’t always tell the whole story.

Although our new full 3D viewer hit our goals on paper and was making money, I had a hunch customers weren’t really satisfied. I independently ran user studies to validate that both the limited angles and the low quality visuals were both dealbreakers for many customers. We were leaving a lot on the table.

Our competitors hadn’t solved this either.

Looking at other similar large shopping sites, I saw the same issue: interactive 3D models that looked super fake. Almost as if we were all using the same factory default render settings and calling it a day.

But it’s possible!

Other non-shopping sites had solved it though. Sites like Sketchfab, a 3D model marketplace, had incredible looking interactive products. It made sense; it’s a business devoted to showing 3D models, so they’ve put a ton of work into a proprietary renderer that makes models look great.

Photo of a CRT television with horizontal line interference, showing black and gray static.

This validated that the tech for high quality web 3D models was attainable, but now I had to figure out how we could build something of similar quality for our model pipeline.

The image shows a mostly black and grey clouded sky with a thin strip of blue near the horizon and some faint lines or streaks.

Learning Babylon

I’ve had plenty of experience with 3D modeling and rendering, but never with web rendering or through code. I’ve always used software like Blender or Unity that are designed for artists. Babylon.js is completely code based, with its own rendering system and dos and don’ts.

I read through tons of documentation to learn how to edit rendering options via code. This was all pre-vibe coding, so this was quite a lot of learning outside my comfort zone!

Dialing in the improvements

I started adding improvements line by line, carefully pushing the quality limits while keeping a careful eye on performance, and only choosing improvements that wouldn’t drastically slow load time. I also experimented with so many heavy effects like bloom, depth of field, screen-space reflections, and plenty of other post-processing effects, but those were too expensive to include.

I made sure any effects and lighting setups were scalable and would work for every product type, to avoid us manually curating scenes to each individual product.

Before

Original Amazon Product

After

Fully Enhanced Render

Distorted digital glitch image with horizontal color lines and static noise.

Image showing a dark, blurred surface with horizontal lines and a faint streak of light near the bottom.

Note - I just have a screen recording for mobile, since I can’t load the full quality interactive version on a page with so much other media that isn’t present on the Amazon experience. Try it out on desktop though!

The end result is a highly realistic and highly interactive experience that builds trust in the product. This hits a sweet spot of fidelity, control, and low latency that gives customers everything they need to make a buying decision.

This update unanimously performed better in user testing, and we quickly shipped the improvements and had great conversion success. This improvement also secured cross-team interest in the experience, facilitating the expansion of View in 3D to more product categories like Shoes, which generated tens of millions in revenue each year.

This was a simple personal desire to elevate the quality of an experience I own beyond what business goals needed, and beyond the traditional role of a UX Designer, but it elevated our UX and led to exponential scaling of our tool across Amazon.