Responsive 3D/webGL configurator and visualizer.
Ideation // Complete UI/UX // Prototyping // Front-end HTML & CSS
The What
Interactive 3D & image-based configurator that utilizes various media as its sources, such as web-friendly 3D webGL, 3D Panoramas, and simple image-based layering. The product was designed with a mobile-first mindset in an Agile development workflow.
The Problems and Jobs to be Done
Mobile first... mobile portrait first... mobile portrait with bottom navigation first, then everything else. It's not rocket science that mobile portrait is THE most used device and orientation, and that most humans hold the phone in one hand and prefer to use their thumb. So integrating as much of the core configuration navigation and interactions at the bottom was a "no-brainer" while horizontal scrolling was also used to optimize the use of space. Another glaring "job to be done" was solving the mobile puzzle of allowing the user to see the product visually react while making changes to it.
Current in-house configurators were dated and had limited compatibility with modern 3D solutions (like webGL and Unreal) while also not being mobile-responsive. From a competitor perspective, most image-based configurators on the market leave much to be desired. As mentioned before, good luck finding one that is not only optimized for mobile but actually allows the user see to the visual changes to the product/model while options are selected/deselected while on a phone. On average, our research concluded that there is a general lack of quality UX outside of the automotive industry, and even those don't often work well on a phone. Most also failed to offer an easy way to save, share, download configured images, or contact the company (which based on our discussions with current clients, are all very important).
The out-of-the-box solution by Threekit is one of the better 3D configurator solutions out there right now, but even they leave a ton to be desired when it comes to the overall quality of its mobile interface and user experience.
The Why
With the increased prevalence of working from home, thus increasing the “shop at home” or “on the go” mentality, shoppers and businesses alike are hungry for new ways to adopt, adapt, and take advantage of this environment.
From an in-house business perspective, utilizing a consistent and flexible front-end interface was key to decreasing development time while increasing UX quality and brand consistency. Maximum Integration into the company's proprietary CMS (Content Management System) was also a priority. Many of the integrated components include UI and branding colors, configurable categories, options, configurable 3D components, pricing, and option types. The CMS is accessible to both internal employees and external clients, thus making changes to the application quick, easy, and more cost-effective for everyone involved.
Insights and Usability Research
Insights and Business Opportunities:
3D configurators are an advanced tool to accompany any company that provides custom product packages, options/add-ons, and customizations in a growing mobile-first world. It can solve many problems all at once if designed correctly while functioning optimally (as one application) across mobile and desktop devices. This product can and will be used for:
3D configurators are an advanced tool to accompany any company that provides custom product packages, options/add-ons, and customizations in a growing mobile-first world. It can solve many problems all at once if designed correctly while functioning optimally (as one application) across mobile and desktop devices. This product can and will be used for:
1. eCommerce
2. Customizable product visualization and education
3. Sales and Team Insights
4. Gaining valuable insights into customer preferences
5. Education and empowering customers. Increase customer satisfaction
2. Customizable product visualization and education
3. Sales and Team Insights
4. Gaining valuable insights into customer preferences
5. Education and empowering customers. Increase customer satisfaction
3D and Augmented Reality Research:
As deep dives into custom statistics and research were not part of the budget, general (sourced) data was pulled and utilized for internal stakeholders and sales marketing/consulting alike. Some of those highlighted stats include:
1. 82% of viewers view a product in 3D while 34% interact with 3D views for more than 30 seconds.
2. 60% of Online Shoppers Say They’re More Likely to Buy a Product If It’s Shown in 3D or Augmented Reality.
3. 3D product images increase customer conversions by 250% while 360-degree views increase buyer confidence.
4. $2b was the market size of 3D in 2019, thus the adoption of 3D models for better product visualization gives retailers that extra edge in a highly competitive market.
2. 60% of Online Shoppers Say They’re More Likely to Buy a Product If It’s Shown in 3D or Augmented Reality.
3. 3D product images increase customer conversions by 250% while 360-degree views increase buyer confidence.
4. $2b was the market size of 3D in 2019, thus the adoption of 3D models for better product visualization gives retailers that extra edge in a highly competitive market.
Miro: Rough Flow Chart
