Nanette Creative Logo with Idea Lightbulb full color

From Freelancer to Futurepreneur – Transforming Client’s E-Commerce Growth with Augmented Reality (AR)

From Freelancer to Futurepreneur – Transforming Client’s E-Commerce Growth with Augmented Reality (AR)

It has been on my mind as I neared the end of my tenure with the closure of the American Handcrafted tradeshow, , I can’t help but recognize the shifting challenges faced by small businesses, especially in the handmade product niche. While acknowledging the irreplaceable nature of in-person experiences, I see the need for innovative solutions for these small businesses to reach the market. With the use of a smartphone, I envision the expansion of e-commerce shopping integrating Augmented reality that allows interactivity to experience products is something that will be widely used in the near future. This article dives in with an exploration of this technology about acquiring this skill as a designer.

Image from TIME: Augmented Reality is the Future of Online Shopping

Augmented reality (AR) is rapidly transforming online shopping, already embraced by retail giants like Amazon, IKEA, and Sephora, AR enables consumers to virtually experience the products in their homes, or see them being worn. AR will be the path to empowering small businesses to put their products directly in customers’ “hands,” thanks to the technology becoming more accessible than ever for businesses of all sizes.

“Input” refers to user actions like hand gestures or voice commands, initiating interactions.

Augmented Reality - Trying on a watch.

Designing inputs involves specifying which elements users can interact with and establishing clear boundaries between the augmented and real components. Common AR inputs include physical gestures like hand swipes and facial expressions. Devices utilized for AR interactions come with their own inputs, such as tactile buttons, taps, and swipes on mobile phones.

Outputs in e-commerce applications often entail three-dimensional product models, configurable in terms of scale, color, and orientation.

Unlike traditional interfaces confined to physical screens, environmental considerations play a pivotal role in shaping user experiences in AR. These interfaces dynamically adapt to user actions, allowing the viewport to move seamlessly.

To ensure the success of AR applications, designers need to skillfully navigate spatial nuances and consider the environment in which users will interact. Whether the goal is to immerse users in public spaces or provide a more intimate experience, understanding and incorporating these environmental considerations is crucial.

Looking at furniture with Augmented Reality

Image showing devices illustrating User Fatigue, too much activity with AR

Designers must be mindful of interaction costs, steering clear of actions that may exhaust users mentally and physically. To mitigate fatigue, frequently accessed functions should be strategically placed in easily reachable areas. Over-stimulation, arising from an excess of interactable 3D visual elements, can detrimentally impact the overall user experience.

Particularly when the entire body serves as a controller, addressing user fatigue is crucial in AR design.

Despite the novelty of AR technology, designers are encouraged not to abandon established design standards. Instead, they should actively embrace fundamental user experience design principles.

In the realm of AR applications, key elements are crucial. Visual and audio cues serve as navigational aids, providing users with intuitive signals that enhance their understanding of the virtual environment. Feedback mechanisms play a pivotal role, ensuring that users receive real-time responses to their interactions, fostering responsiveness and engagement.

In-depth tutorials become valuable tools. By offering users comprehensive guidance, designers empower them to navigate and interact with AR applications seamlessly.

Below is an example I created on my smartphone with Amazon’s AR showing visual cues, as described above.

AR image with cues - point your phone
AR image with cues - Tap to place item
Furniture Item shown as if in house using AR


Designers can integrate augmented reality (AR) into their e-commerce website projects by having some understanding of 3D modeling concepts and processes that can be beneficial when working with augmented reality (AR) in e-commerce.

The good news is that you, as a designer, don’t necessarily need to be a 3D modeler. Collaboration takes center stage, allowing you to team up with skilled modelers who can expertly navigate the intricate world of 3D modeling.

Collaborative meeting picture

Alternatively, you can explore user-friendly platforms that house a wealth of pre-made 3D assets, offering a rich resource beyond the complexities of modeling. This cooperative approach empowers you to channel your creativity into crafting immersive AR experiences, ensuring that the integration of 3D models enhances the overall user journey.

This collaboration highlights the effectiveness of teamwork and the fusion of diverse skills, especially in the continually evolving landscape of AR in e-commerce.

AR overlays digital elements onto the real world as seen through your phone or tablet’s camera, which unlocks product visualization for hundreds of millions of smartphone users, driving the explosive growth of AR in e-commerce.

ARKit and ARCore are software development frameworks created by Apple and Google, that enable developers to build AR experiences for mobile devices, and both are free for developers. Both are constantly evolving and are likely to offer even more advanced features in the future.

Apple’s ARKit features strengths in facial recognition and flat surfaces, making it ideal for virtual try-ons and games. It utilizes the camera, LiDAR scanner in newer models, and motion sensors of iPhones and iPads.

Google’s ARCore focuses on depth perception and environment through advanced algorithms, creating more realistic AR experiences, utilizing the camera and motion sensors of Android devices.

Beyond ARKit and ARCore, Vuforia provides another compelling option for e-commerce AR development. ARKit excels in facial recognition for virtual try-ons, ARCore prioritizes depth perception, and Vuforia offers unique features like marker-based AR and cloud recognition. These can be valuable for product visualization in specific scenarios, such as visualizations for furniture placement in a room using markers or enabling product recognition across various physical locations.

Vuforia possesses a longer track record and provides more extensive resources and support compared to the native platforms. The free plan caters to basic needs, but advanced features like object recognition and cloud-based experiences typically require paid subscriptions.

Photo credit: mobileworldlive.com

There are many ways to incorporate AR into website design projects. Most platforms are now offering this in some form, which is great news for designers who concentrate their work on specific platforms. We’ll start first by sharing the top 3 plug-ins for WordPress.

User-friendly interface, freemium model with basic features, suitable for beginners or those wanting a simple AR experience. $20/month

3D models can be uploaded in GLB, GLTF, and USDZ formats, ensuring seamless compatibility across various mobile devices. 

Once uploaded, developers can conveniently copy and paste the provided shortcode into the page or post for model display.

The plugin’s user-friendly interface guarantees accessibility, allowing individuals with minimal coding experience to effortlessly incorporate 3D models into their website.

Generating the 3D models necessitates the ability to create images in GLB, GLTF, and USDZ formats. Collaboration may be essential for designers lacking expertise in this aspect.

Created by the same company, this plug-in offers seamless integration with WooCommerce stores, specifically designed for product visualization. This is a paid plugin with tiered features, pricing at $200/year.

This plug-in offers AR Integration without the need for a dedicated app and integrates with WooCommerce, allowing customers to explore products in AR directly from their mobile browsers. Whether they’re on iOS or Android, ARKit and ARCore support guarantees smooth performance across devices. The plug-in allows the designer to experiment to get started but then there are paid plans that offer advanced features such as multiple product configurations, analytics, and custom branding.

Shopify’s AR features are designed to be effortlessly incorporated into its stores, ensuring an easy setup and management process for users. The capabilities of this integration extend to the presentation of 3D product models, allowing for product placement in real environments, accompanied by basic customization options.

Shopify’s AR platform does have some limitations in terms of customization compared to other platforms, and the learning curve might be steeper for beginners. While the pricing structure involves a paid per-store subscription, starting at $49 per month, the platform’s strengths lie in its direct integration with Shopify, offering a good range of fundamental AR features, supported by Shopify’s assistance, with plenty of tutorials and support options, such as the video below.

While Wix currently doesn’t have a platform-specific AR solution like Shopify AR, several options can enable AR experiences for Wix e-commerce stores through plug-in type apps.

  • SwiftXR (3D/AR/VR) Viewer: This app brings your 3D product models to life with AR, allowing customers to view, rotate, and virtually place them in their environment. Pricing is based on credit per file use.
  • Zakeke – 3D/AR Viewer: Similar to SwiftXR, Zakeke offers AR visualization for your products, with additional features like multi-language support and AR marketing options. Pricing starts at $25/month.
  • Arforia: This app integrates advanced AR experiences into your Wix store, including features like object recognition, interactive elements, and real-time customization. However, it requires development expertise and custom pricing quotes.
  • Vuforia: Utilize Vuforia’s cross-platform capabilities to create AR experiences seamlessly integrated into your Wix website. While requiring development skills, Vuforia offers more advanced features and wider platform reach compared to app-based solutions.
  • Shopify AR: For those who use Shopify for their e-commerce, there is an option to embed their AR solution within the Wix site.

Designers should strive to master the chosen AR development platform they desire to use. This allows them to navigate the intricacies of integrating 3D models into their website e-commerce platforms. Designers will need to assess how models adapt to diverse environments, ensuring proper scaling, and aligning with the overarching design aesthetic.

While designers do not need to be 3D modeling experts, a foundational understanding of these concepts empowers them to use their expertise to incorporate AR features into e-commerce websites.

Collaborative efforts with 3D modelers or leveraging existing models emerge as common and effective practices in the dynamic field of AR design for e-commerce.

How do you feel about embracing AR to enhance your skill set? Do you find it important to stay at the forefront of innovation, and provide clients with this type of solution to revolutionize their online sales? Feel free to reach out and share your thoughts on this continually evolving topic!

Written in collaboration with ChatGPT and Google Gemini

Share post to:
Author:  
Nanette Asbury
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram