You can see the code for this project on my github.

Whenever I get a brief like this, the first thing I do is break down the task into smaller pieces and identify potential problem areas. In this case, the primary challenge is clearly the AR target tracking.

In an ideal scenario, I would use the WebXR standard in combination with a library like qrjs for QR code detection. Unfortunately, the WebXR standard is not supported by iOS devices, which limits its practicality for this project.

The standard solution, therefore, involves using a library that provides AR capabilities alongside a 3D graphics library for the web. For AR libraries, there is a broad selection, ranging from established tools to newer options. Since this was only a proof of concept, I chose AR.js, an open-source option that fit the project requirements.

For the 3D graphics aspect, I used A-Frame, a library built on Three.js, which integrates seamlessly with AR.js and supports creating 3D experiences on the web.

Developing this project solely in an HTML file would be overly simplistic and not reflective of typical client work. To make it more realistic, I opted for a modern web framework: Next.js. However, AR.js doesn’t officially support React-based implementations, and while some third-party repositories attempt to bridge this gap, I prefer not to rely on them. In a studio setting, it would be advantageous to create an internal solution, perhaps by integrating React Three Fiber, which could yield more sophisticated results.

For this project, a straightforward solution is to serve an HTML file and load the necessary libraries from a CDN. This approach aligns well with client requirements—many complex applications can be effectively managed directly within an HTML file, though using a bundler like Webpack to minimize file size is highly recommended.

Next.js stands out as one of the most robust React frameworks, with features like server-side components, strong SEO support, and built-in performance optimizations that make it an excellent choice for serious web applications. Additionally, incorporating Tailwind CSS allows for faster development by enabling styling directly within HTML through utility classes. This not only keeps the bundle size small but also maintains a consistent design system.

Once the tech stack is confirmed, we can move on to design. The first step is always benchmarking. By examining successful implementations across various brands and sectors, we can identify usability patterns that are effective in real-world applications. This process covers product discovery flows, filtering systems, checkout processes, and wishlist functionality. For AR features, benchmarking is particularly useful: integrating established e-commerce patterns with AR technology is essential for maintaining user confidence and smooth shopping experiences.

By stripping away aesthetic elements and focusing purely on layout, hierarchy, and user flows, wireframes enable quick iterations and stakeholder alignment on core functionality. This lean approach proves especially valuable in e-commerce design, where complex user journeys - from product discovery to checkout - must be carefully orchestrated to minimize friction and maximize conversion. Starting with low-fidelity sketches and progressing to more detailed wireframes helps teams identify potential usability issues early, ensuring that fundamental navigation patterns and content organization support both business goals and user needs.

Creating a seamless AR commerce experience involves carefully designing user flow transitions, particularly at key points where the physical and digital worlds converge. The interface should guide users smoothly through permissions, camera access, and surface detection steps while being transparent about each phase. This transparency builds trust and keeps users engaged.

Loading states, in particular, play a critical role in the AR experience. These states should be designed to reassure the user during potentially long load times, using visual cues that communicate progress and manage expectations. Initially, the UI should offer clear instructions, which can then fade into subtle, unobtrusive prompts as the user becomes more comfortable with the interaction.

To ensure this smooth experience, several technical decisions are essential. Preloading assets is one key step, enabling faster load times by having the 3D models and textures ready before the user even initiates the AR view. This minimizes disruptions and improves immersion. Additionally, implementing load screens with clear progress indicators not only keeps users informed but also gives the application time to process complex assets and environmental data.

The navigation UI should be intuitive, with consistent and clearly labeled controls that enable users to interact confidently. This includes designing intuitive prompts to grant device permissions and contextual hints for orienting the user during surface detection. Controls should allow users to easily return to the catalogue or adjust the AR view, ensuring they feel in control of the experience from start to finish.

The website employs a minimalist aesthetic with a clean grid layout and generous white space, allowing product photography to take center stage. Bold sans-serif typography establishes clear hierarchy, while crisp monochromatic interface elements guide users through the shopping experience. This refined design approach extends to the thoughtful organization of product information, featuring an intuitive size selection grid and clear call-to-action buttons. The result is a sophisticated yet accessible shopping interface that prioritizes both visual

My approach to this project was centered on dissecting each challenge and applying practical, scalable solutions tailored to a real-world workflow. By breaking down the technical and design requirements, I was able to identify effective tools and streamline the development process, from selecting libraries that integrate well with modern frameworks to crafting a clear and user-friendly interface. Emphasizing usability and responsiveness, I focused on ensuring a smooth experience for the user at each step. This methodical approach allowed me to efficiently manage technical limitations while still achieving a polished, cohesive result.

You can check the repo on my github.