Creating XR Experiences with QuantaCam 3D

Exploring an AI-Generated 3D Modeling App

Overview

The QuantaCam 3D is a conceptual project that aims to create a mobile app using AI to make the process of creating 3D models from 2D images, text, and videos easier. The objective was to test the app, gather user feedback, and improve the user experience. The app's usability and satisfaction levels saw significant enhancements from the app’s redesign.

My Role

I was the sole UX/UI designer for QuantaCam 3D. I was responsible for managing the entire project, conducting research, creating prototypes, testing usability, and gathering feedback from users. I implemented a UX research strategy, and by conducting usability testing, I was able to redesign and finalize the second iteration of the design.

Problem Statement

Design a user-friendly 3D modeling app with AI technology for professionals and hobbyists to make 3D models easily. It should meet various needs by providing accurate models for experts and artistic freedom for creative users.

Client

Project Owner, Self-directed

Timeline

10/02/2023 to 11/14/2023

Team

Individual Designer

Role

UX & UI Designer

Activities

  • Iteration
  • Research
  • User Flow
  • Wireframe
  • Prototype
  • Usability Testing

Tools

Figma
Figjam
Adobe Illustrator
Google Forms
Maze

Challenge

Balancing Creativity and Precision

Initially, the project aimed to create an app seamlessly integrating user input with AI to generate 3D models for commerce purposes. However, the first rounds of concept and usability tests revealed a key challenge: catering to the varying needs of users with diverse goals.

  • Commercial users desired precise, ready-to-use 3D models and expressed frustration with user flow and interface design.

  • Artistic users valued creative freedom but lacked control over the model generation process and felt the initial photogrammetry-inspired interface required too much manual effort.

I think this is a rapidly growing concept and is going to be very prevalent in the near future.
— User Feedback

Solution

User-Centered Design and Iteration

After analyzing data gathered from the first round of user interviews and prototype testing highlighted the desire for greater control over the AI-generated models. To address this feedback, I implemented a text-to-image generation workflow and feature (Design Feature 2) that allows users to describe their desired models in detail, allowing for greater creative control and improved user satisfaction with the 3D designer redesign.
The diagram outlining the iterative design process of QuantaCam 3D. Start with "Identifying the issue" and "Investigating user requirements." Move on to stages like "Crafting initial prototypes," "Gathering user input," "Enhancing the design," and "Developing sophisticated prototypes." The process concludes with "Developing the final product."
Figure 1. My iterative process for QuantaCam 3D is depicted in the diagram. It follows a cycle from "testing and gathering user feedback" to "research and ideation" until a satisfactory resolution is achieved, utilizing design thinking principles.

Design Thinking Approach

To fulfill the goals of the project, the second phase involved several steps, including research, multiple iterations, prototyping, and testing. The second iteration process began with competitive analysis research to develop a solution that focuses on creating a 3D designer that emphasizes Text-to-Image 3D Modeling workflow. The ultimate aim of the redesign was to provide users with a more practical and intuitive way to generate 3D models.

Research

A comparison chart has been created to analyze three text-to-3D generation applications: Alpha3D, MagiScan, and 3DFY.ai. The chart includes information on their value proposition, target audience, strengths, weaknesses, and key differentiators. Alpha3D is known for its strong market presence and its use of generative AI to create 3D models from text and image inputs. MagiScan, on the other hand, utilizes photogrammetry, IR, and generative AI to produce medium-quality 3D models and is compatible with mobile platforms. Lastly, 3DFY.ai holds a strong market position in text-only generative AI and offers an API for integration with existing platforms.
Figure 2. This analysis highlights QuantaCam 3D's unique selling proposition as a AI text-to-image solution for 3D model generation.

Iterations

The diagram shows how users create a 3D model step by step. First, they enter a description of the model they want to prompt. Then, they can choose from pre-defined model categories or use their text description. After that, the app generates a 3D model based on the user's input.
Figure 3. The diagram displays the sequential process of producing a 3D model based on user input.
A basic wireframe draft showing: Text box: "Enter a description" for users to type a description of their 3D model. Microphone icon: Allows voice input for model description. Image icon: Upload image for reference in 3D model creation.
Figure 4. The mobile app interface sketch showcases various methods users can use to input information for prompting the idea for their design.
Low-fidelity wireframe sketch of 4 cards illustrating the process of creating a 3D design asset in an app.
Figure 5. Wireframe sketch of 3D designer card prompting progression.
The low-fidelity wireframes of 3D designer workspace features a basic wireframe mockup divided into sections with color-coded text labels. These labels indicate various data tones for AI-generated suggestions on creating 3D models. While the functionalities and elements in each section are not completely specified, the color-coding assists the designer in engaging with the AI's suggestions and enhancing the 3D model design.
Figure 6. AI-generated suggestions are structured with color-coded labels on low-fidelity wireframe screens and 3D designer workspace components.
Eight mockups show the 3D designer mode process on mobile screens. Users receive guidance through card-based prompts on a chat interface.
Figure 7.Finalized design and refined UI for 2nd iteration mobile mockups. Simplifies 3D design process with interactive chat using card prompts.
A Figma design workspace screenshot is divided into two parts. On the left side, there is a mobile prototype of the QuantaCam 3D app, presenting the second design version. The prototype consists of screens for a 3D design process, possibly utilizing a chat interface with card-based prompts. On the right side, there are different design components such as buttons, text labels, and chat interface elements, which are used to construct the mobile app prototype.
Figure 8. Screenshot of mobile prototype is on the left and design components are on the right in Figma.

Feedback & Methodology

The design process heavily relied on understanding user needs and preferences through various methods:
  • Usability Testing: I conducted usability tests on the prototype app to analyze user interactions, gather data on user expectations, and pinpoint areas for improvement in UI, navigation, and functionality.
Two heatmap visuals compared: Upper row: User heatmap displaying popular spots on a site or app with user clicks or activity. Colors vary from cool (less activity) to warm (more activity). Lower row: AI-generated testing heatmap showing AI model predictions on user behavior. Colors' meanings differ based on the AI tool.
Figure 9. Two heatmaps visualizations are being compared. The top row shows the user heatmap, while the bottom row displays the AI-generated testing heatmap analytics.
  • User Interviews: Insights from user interviews directly influenced specific enhancements in usability, navigation, and functionality.
  • Further Research: The following text has been noted: "3DALL-E: Integrating Text-to-Image AI in 3D Design Workflows". In this qualitative study, users of 3DALL-E, a text-to-image AI tool, were observed and interviewed.1The research insights gained from this study played a critical role in understanding the practical requirements of users who seek a flexible workflow and conceptual framework for creating 3D models using AI technologies.

Focusing on User Needs

By utilizing various research methods, I obtained a holistic understanding of user needs and preferences, which informed the design process and resulted in a more user-centric application.
A chart comparing the original design method (Before) and the updated method (After) for the QuantaCam 3D app. The "Before" part displays a user starting 3D creation via camera input and a photogrammetry-based design process, needing manual input and object scanning. The "After" part showcases a modified method with user cues and AI-driven recommendations for procedural modeling, as well as a structured 3D designer module providing keyword suggestions, descriptive cues, and AI-created images for improved design choices. This analysis highlights the transition from a manual, user-led method to a more automated and AI-supported design process.
Figure 10. A comparison of the design between the first and second iterations.

Design Features

The QuantaCam 3D app's default screen features a gif animation showcasing its redesigned interface. The top of the screen includes a search bar with a message saying "Welcome, start creating input via text, image, or sketch." This indicates that users can input information through text, images, or sketches to create 3D models using the app.

Multimodal Prompting Capabilities

This feature simplifies 3D modeling by allowing users to start their design prompt with text, pictures, and image references, catering to diverse user preferences.
The QuantaCam 3D app design includes a gif animation that highlights its second design feature - AI-driven suggestions and recommendations. The screen shows a 3D chair model with different color choices. Each color option is labeled with a keyword and a color code, allowing users to easily customize the look of their 3D models using the provided suggestions and codes.

AI-Driven Suggestions and Recommendations

The application allows users to customize the appearance, design, and components with the assistance of color-coded elements and AI-generated keyword suggestions.
A gif animation demonstrates the image gallery selection feature in the QuantaCam 3D app. Users can choose various images from the gallery, and each selection updates the 3D model visually to show the impact on the final design.

Iterative Refinement with Visual Feedback

The feature enables users to refine 3D models with visual feedback, giving precise adjustments and meeting expectations.

View Prototype

QuantaCam 3D, a text-to-image 3D model generation app, has a splash screen on its mobile app. The splash screen showcases the app's logo, which acts as a gateway to the interactive prototype in Figma.
Preview QuantaCam 3D prototype in Figma here.

Results

Key Takeaways

Early User Testing

The iterative design approach, with a focus on user testing and feedback, significantly improved the app's usability and overall satisfaction, increasing from 52% to 80%. Additionally, 72% of users showed interest in the market, and 100% would endorse the application.

Reflection & Next Steps

User Validation and Ongoing Iteration

The positive feedback received from users underscores the potential of a text-to-image to 3D modeling application that promotes community and idea sharing. The next steps include conducting more usability testing, gathering technical feedback, and determining development requirements to further enhance and iterate on the concept app.

Preview of 3D earbuds mockup design and 3D designer cards interface.

Citation

  • Liu, V., Vermeulen, J., Fitzmaurice, G., & Matejka, J. (2023). "3DALL-E: Integrating Text-to-Image AI in 3D Design Workflows," Section 8.3 Generalizability.https://arxiv.org/pdf/2210.11603.pdf

Thank You!

I trust you found as much delight in observing this project as I did in crafting it.

Next Projects

iPhone and desktop mockup devices for UX/UI Design project, showcasing Wagamama's customized Ramen ordering for take-out. Includes images of topping and protein selection process.
Case Study

Wagamama

Custom Ramen Order

UX and UI Design

View Project
Home page screenshots of KW Realtor marketing landing page, featuring real estate website design.
Case Study

Keller Williams Realty

Landing Page Design

UX and UI Design, Development

View Project
Made in Webflow