Logo of UI Challenges
Sign in

Gallery

See what others have created

Augmented Reality (AR) Shopping Assistant
M

mahyarnasiri

@mahyarnasiri

HardE-commerce

Augmented Reality (AR) Shopping Assistant

Design an AR shopping assistant for a physical store or at-home product preview. The main screen is the live camera view with a subtle scan prompt, a visible reticle or placement cue, and one primary action for the current item. The user should understand when the app is detecting a product, when it has locked onto one, and how to place a 3D preview in the scene.

Once an item is recognized, show a compact product card anchored near the object. Include price, name, rating or key spec, and one clear next action such as Add to cart or View details. Keep secondary actions like Compare, Save, and Share close by, but never let them block the product or make the camera view unreadable.

Include a way to switch between AR and a standard catalog view. The non-AR view should preserve the same product context so the user can browse, compare, and return to the camera without losing their place. Add states for camera permission denied, tracking lost, no product found, and low-light or unsupported-device fallback.

What to deliver

  • Design the camera-based AR shopping view with a clear scan state and visible placement affordance.
  • Show a product detail overlay anchored to the item in view with price, key specs, and a primary action.
  • Add compare, save, and add-to-cart controls that stay usable without covering the product.
  • Include a fallback list or grid view for browsing when AR is not useful.
  • Design permission, loading, and no-match states for camera access, item detection, and search results.

Leverage color contrasts and clear visual cues to make interactive elements stand out in the varied backgrounds of a real-world AR environment.