IN3D Virtual Showroom for Online Retailers

IN3D Virtual Showroom for Online Retailers

IN3D Virtual Showroom for Online Retailers

Industry

Furniture

Client

Overstock

Project Type

B2B, B2C/ Launched service / Product Design

My Role

UI/UX Designer

Duration

Jan 2021-2024

Team

CEO, PM, Front-End Developers, 3D Engineers

Tools

Figma, Adobe XD, Zeplin, Full Story, Google Analytics



My Contribution

From Initial Concept to a Multi-Brand Platform

UX Research / UI Design / User Testing

Overview

Overview

IN3D Showroom is a 3D virtual shopping platform that helps furniture retailers turn traditional e-commerce into immersive experiences, enhancing customer engagement and streamlining the buying journey.

I worked as the sole designer to build the product from 0 to 1. I collaborated closely with stakeholders to define goals, using research methods, competitive analysis, user journeys, and wireframes to transform requirements into a functional product.

My Contribution

My Contribution

I delivered a successful product that not only launched but also scaled for 3 enterprise companies, making it adaptable for various clients and brands.

Collaborated with furniture retail "Overstock" for the Labor Day sales marketing event. (Beta Launch recording)

From 0 to 1

Where Ideas Evolved Through Iteration

Where Ideas Evolved Through Iteration

This outlines the development of the 'Changing Colors' feature, from early wireframes to refined mockups and final implementation in close collaboration with the front-end engineer.

Project Timeline

2021

🏗️ Foundation & Validation

Project kickoff & POC validation with stakeholders (Q2-Q4)

2021

🏗️ Foundation & Validation

Project kickoff & POC validation with stakeholders (Q2-Q4)

2021

🏗️ Foundation & Validation

Project kickoff & POC validation with stakeholders (Q2-Q4)

2022

🎉 Development & Launch

Beta launch with "Overstock" (May) Official public launch with "Overstock" (Sep-Oct)

2022

🎉 Development & Launch

Beta launch with "Overstock" (May) Official public launch with "Overstock" (Sep-Oct)

2022

🎉 Development & Launch

Beta launch with "Overstock" (May) Official public launch with "Overstock" (Sep-Oct)

2023-24

💪 Scalability & Expansion

Launch for "Inspire Q" (Apr 2023) Launch for "EC-Life" (May 2024) POC for "Giant" (Oct 2024)

2023-24

💪 Scalability & Expansion

Launch for "Inspire Q" (Apr 2023) Launch for "EC-Life" (May 2024) POC for "Giant" (Oct 2024)

2023-24

💪 Scalability & Expansion

Launch for "Inspire Q" (Apr 2023) Launch for "EC-Life" (May 2024) POC for "Giant" (Oct 2024)

Why We Built It?

Replacing Costly Photo Setups with an Immersive 3D Solution for Online Retail

Replacing Costly Photo Setups with an Immersive 3D Solution for Online Retail

Furniture retailers rely on costly, time-consuming showroom setups and photo shoots for every product launch. IN3D Showroom offers a scalable 3D solution that streamlines product display, lowers production costs, and boosts customer engagement through immersive, e-commerce-ready experiences.

Stakeholder Kickoff
& Goal Setting

Conducted stakeholder interviews, user research and a competitive analysis to validate the business case and identify key user needs. This helped me align user expectations with business needs and ensure the product was both effective for the business and meaningful for users.

Business Goals

Business Goals

A browser-based 3D virtual showroom that seamlessly integrates with e-commerce platforms, enabling intuitive product exploration and home decor inspiration

A browser-based 3D virtual showroom that seamlessly integrates with e-commerce platforms, enabling intuitive product exploration and home decor inspiration

Immersive Shopping Experience

Branding & Emotional Connection

Realistic Product Visualization

Increased Engagement & Conversion

Interactive Exploration

Product Understanding & Confidence

Intuitive Navigation & Control

Seamless Purchase Flow

User Goals

User Goals

Easy to navigate, visually realistic, and interactive to support exploration for confident furniture purchases.

Easy to navigate, visually realistic, and interactive to support exploration for confident furniture purchases.

  • Primary User :  Millennials (25–45)  Tech-savvy, urban, and actively furnishing their homes.

  • Secondary User : Gen X (42–57)  A smaller but high-spending group that values

📝 Read More Research Detail

📝 Read More Research Detail

💭 How Might We…

Design a 3D virtual showroom that balances innovation with ease of use, inspiring users while driving purchase decisions?

Define & Develop

Define & Develop

Defining User Flow

Aligned on key user journeys, clarified feature priorities

Aligned on key user journeys, clarified feature priorities

Aligned on key user journeys, clarified feature priorities

Building on the previously defined user and business goals, I led user flow sessions to help the team shape the overall structure of the project. Through multiple discussions and collaborative iterations, we aligned on key user journeys, clarified feature priorities, and ensured the experience met both user expectations and business needs.

Wireframes & Hi-Fidelity Mockup

Wireframes &
Hi-Fidelity Mockup

Wireframes & Hi-Fidelity Mockup

Iterating through wireframes to refine ideas before development.

Iterating through wireframes to refine ideas before development.

Iterating through wireframes to refine ideas before development.

Wireframes and prototypes helped align the team and clarify the stakeholder’s vision. I led UI design from concept to execution, creating a style that fit the 3D showroom and delivered high-fidelity mockups.

Click images to see more details. 👀

Design System

Building for Scalability and Collaboration

Building for Scalability and Collaboration

Building for Scalability and Collaboration

Collaborating with front-end engineers, I developed a parametric UI system that allows for easy adjustments to styles, colors, typography, and layouts. This improves consistency and scalability for future brand implementations.

Feature Showcase

Feature Showcase

Feature 1

Interactive Furniture Customization

Users can now customize item colors, sizes, and styles in a more intuitive interface. This new design, a collaboration with the 3D team, streamlined the process by reducing clicks and improving clarity based on user feedback.

Feature 2

Onboarding Experience

Based on user testing that showed high bounce rates, I redesigned the onboarding process from a full-screen tutorial to a simplified instruction card. This change reduced onboarding drop-off from over 80% to 50%.

V.1 Lunched with a full-screen onboarding tutorial. While informative, it caused cognitive overload and led to high user drop-off.

V.2 Simplified to a two-step tutorial focusing on key features. Though more concise, it still felt heavy and interrupted the showroom experience.

V. 3 Final design: a lightweight instruction card appears at entry, with a help icon in the corner providing full access to a detailed tutorial for users who need it.

Feature 3

Room Navigation

Replaced a complex 3D mini-map concept with a flexible, image-based room list UI. This approach reduced development cost and improved scalability, while keeping the user experience smooth and visual.

Feature 4 (Unreleased)

AI Stylist Assistant 

Designed a mockup for an AI chat-based avatar assistant that helps users find products through natural conversation, paired with a modern, refined interface to enhance personalization and engagement.

A newly designed UI style was introduced to modernize the interface, making the product feel more current and visually engaging while maintaining usability.

Test Before Launched

Internal User Testing

Internal User Testing

Internal User Testing

Validating Design Through Cross-Team Feedback

Validating Design Through Cross-Team Feedback

Validating Design Through Cross-Team Feedback

I invited volunteers from other departments to test the product before launched. Their feedback revealed usability issues and helped refine the interface to ensure clarity for first-time users.

Test Before Launched

Clickable Portotype

Clickable Portotype

Clickable Portotype

Validating and Refining with Stakeholders

Validating and Refining with Stakeholders

Validating and Refining with Stakeholders

Explored interaction ideas and shared them with stakeholders for feedback. This collaborative process helped align expectations, validate key decisions, and fine-tune the product before final implementation.

Learn From Users

After the beta launch, we were able to receive clear images of our true users. Get the most out of users

FullStory Session Recordings

Reviewed session recordings to identify usability patterns and inform design improvements.

Reviewed session recordings to identify usability patterns and inform design improvements.

Google Analytics

Google Analytics

Google Analytics

Google Analytics provided demographic and behavioral data that clarified our user personas and informed feature prioritization.

Google Analytics provided demographic and behavioral data that clarified our user personas and informed feature prioritization.

Eye Tracking

Eye Tracking

Eye Tracking

I used eye-tracking analysis to understand how users engaged with the interface, allowing me to refine layout, hierarchy, and visual focus areas.

I used eye-tracking analysis to understand how users engaged with the interface, allowing me to refine layout, hierarchy, and visual focus areas.

Never Stop Iterating & Beyond

Designing Flexible Interfaces: Evolving the IN3D Showroom into a Scalable Product.

Designing Flexible Interfaces: Evolving the IN3D Showroom into a Scalable Product.

Following a successful launch, IN3D Showroom has continued to scale across multiple clients and industries. After our collaboration with Overstock, the product was adopted by new partners including Inspire Q, a Chicago-based furniture retailer, and EC-Life, Taiwan’s largest home appliances chain. With a solid UI foundation in place, I was able to adapt the interface to meet each brand’s unique visual style—proving the system’s flexibility and maturity as a scalable design solution.

The Wrap Up

The Wrap Up

The Wrap Up

Self-Review & What I Learned

✦ Cross-Functional Collaboration
This was a stakeholder-driven project, and I learned how to balance user needs with business goals and translate both into product decisions. I also gained experience in presenting design concepts clearly and persuasively to stakeholders unfamiliar with UX.

✦ Communication with Engineers
I made it a priority to involve engineers early when exploring product ideas. Their input was essential for ensuring design feasibility and helped me better understand the technical constraints and possibilities.

What I Would Improve Next Time

✦ Deepen Technical Knowledge
I would invest more time learning the basics of 3D technologies like Unity or Unreal Engine 5. This would help me communicate more effectively with the 3D team and find feasible design solutions within technical constraints.

✦ Better Adhere WCAG standards for accessibility
I would proactively follow WCAG guidelines earlier in the design process to ensure the product is accessible to a wider range of users. This includes improving color contrast, text readability, keyboard navigation, and overall inclusive interaction design.

Thanks for reading! 😊🙏

Thanks for reading! 😊🙏

Thanks for reading! 😊🙏

Create a free website with Framer, the website builder loved by startups, designers and agencies.