Applitech

Web-Based 3D Viewer

UX Case Study

Enhancing User Experience for Web-Based Industrial 3D Viewer

Introduction Background Challenge Approach Outcomes Conclusion

1.0 Enhancing User Experience for Web-Based Industrial 3D Viewer

Client: Applitech
Project: Web-Based 3D Viewer
Duration: 4 months
Team Size: 6 (3 Developers, 1 Frontend dev, 1 UX & UI, 1 project manager)

2.0 Background

Applitech, a leading provider of 3D modeling solutions, embarked on a project to develop a web-based 3D viewer using WebGL technology. The goal was to create a user-friendly platform for architects, engineers, and designers to showcase and manipulate 3D models. The project utilized HTML5.0, CSS3, JavaScript, and Bootstrap 5.1 as the core technologies.

3.0 Challenge

While the 3D viewer’s functionality was robust, the user experience needed improvement. The project team identified several key challenges:

Complexity: The interface was built as an static list of the obejects’s.
Performance: Some users experienced lag and slow loading times, especially when rendering large 3D files.
Navigation: Navigating through the 3D space was not intuitive, and users struggled to perform basic actions like zooming, panning, and rotating.
Accessibility: The application lacked accessibility features, excluding inapropriate rendering on resolutions smaller than 2k.

4.0 Approach

The project team, including the UX specialist, collaborated to address these challenges and enhance the user experience. Here’s a breakdown of the steps taken:

User Research: We conducted comprehensive surveys and interviews with both current users and developers to gain insights into their challenges and collect valuable feedback.
Information Architecture: We undertook a substantial overhaul of the menu and toolbar structure. This redesign aimed to simplify the interface by separating file navigation from core functions, resulting in a more intuitive structure that facilitated easier access to essential features.
Performance Optimization: Collaborating closely with the development team, we implemented an array of performance enhancements. These included the incorporation of lazy loading, progressive rendering, object tree visualization, refined pop-up behaviors, and asset compression, all of which significantly improved the viewer’s speed and efficiency.
Responsive Design: We ensured that the 3D viewer exhibited responsiveness by leveraging Bootstrap 5.1. This adaptation allowed the viewer to seamlessly adapt to various devices and screen sizes, enhancing accessibility across the board.
Accessibility: In order to enhance accessibility, we introduced several critical improvements. These encompassed the addition of keyboard shortcuts, the provision of alt-text for 3D elements within the models, and the optimization of rendering contrast for a more accessible user experience.
Testing and Iteration: We conducted thorough usability testing sessions involving a diverse spectrum of users. Subsequently, we engaged in a rigorous iterative process that involved refining both design and functionality based on the invaluable feedback garnered from these tests.

5.0 Outcomes

Streamlined Interface: The new interface was perceived by users as notably more intuitive and user-friendly, resulting in a reduced learning curve for newcomers.
Improved Performance: Loading times saw significant reductions, leading to users reporting a smoother experience, particularly when handling large 3D models.
Enhanced Navigation: Enhanced controls facilitated users’ effortless navigation within the 3D environment, thereby improving their ability to interact with models.
Accessibility Compliance: The 3D viewer became more inclusive, accommodating a broader user base, including individuals with limited prior experience in such applications.
Positive User Feedback: The updates garnered praise from users, resulting in a substantial increase in user satisfaction scores.

Conclusion

By incorporating UX principles and collaborating closely with developers, Applitech successfully transformed its WebGL-based web-based 3D viewer into a more user-friendly and performant platform. This case study demonstrates the importance of prioritizing user experience in web projects, even when dealing with complex technologies like WebGL. The project’s success has solidified Applitech’s position as a leader in the 3D modeling industry.

Resources & Assets

The Assets section of this case study includes a collection of screens from the actual Applitech 3D Viewer web-application, showcasing the redesigned interface and new features. These screens provide a visual representation of the optimized workflow, responsive design, user permission levels, functional dashboards, and the limited version for lower-resolution devices.

Redesigned application