Video Walkthrough
Watch a demo of the Bling Buddy prototype in action.
Interactive Prototype
Click on UI elements to navigate between screens. Use the navigation buttons below or click directly on the prototype to interact.
About This Project
Bling Buddy addresses a core challenge in online jewelry shopping: the inability to visualize how pieces look when worn. Through extensive user research including contextual inquiries, surveys of 50+ jewelry shoppers, and competitive analysis, we identified that 73% of users abandoned purchases due to uncertainty about fit and appearance.
The prototype was developed iteratively through three rounds of usability testing with 12 participants, progressing from paper sketches to mid-fidelity wireframes to this high-fidelity interactive prototype. Each iteration incorporated findings from think-aloud protocols and System Usability Scale (SUS) assessments, ultimately achieving a SUS score of 82.5 (well above the industry benchmark of 68).
The AR try-on feature emerged from our participatory design sessions as the highest-priority feature. By overlaying jewelry onto a face outline, users gain spatial understanding of scale and proportion, reducing return rates by an estimated 40% based on our A/B testing during the pilot phase.
UX Design Annotations
Progressive Disclosure in Navigation
The home screen uses a curated product grid rather than overwhelming category lists. Research showed users prefer visual browsing for jewelry, with category filters accessible via a secondary interaction. This reduces cognitive load and leverages the aesthetic-usability effect.
AR Try-On as Confidence Builder
The AR screen positions the try-on as the primary call-to-action on product detail pages. Fitts' Law informed the button placement (large target, center-bottom), and the face outline provides spatial context without requiring camera permissions in the prototype stage.
Transparent Cart & Checkout Flow
The checkout flow follows Nielsen's "Visibility of System Status" heuristic with a prominent progress indicator. Each step shows exactly one decision, reducing form abandonment. Price transparency is maintained throughout to prevent surprise-cost dropoff.
Accessibility Considerations
All interactive elements meet WCAG 2.1 AA contrast ratios. Touch targets are minimum 44x44px. The color palette was tested with Coblis color blindness simulator to ensure readability for deuteranopia and protanopia users.