HX3D AR Retail Experience
HyperX · Product Design · AR Commerce
Increase accessory attach rate by bringing digital-only HX3D products into the retail aisle via AR.
Preview. Customize. Purchase.
Retail shoppers were choosing headsets without visibility into HyperX’s strongest differentiator: customization. I designed an AR commerce bridge that surfaced digital-only HX3D accessories at the point of comparison, turning in-store evaluation into a revenue opportunity.
ROLE
Product Design Intern
TEAM
solo project
TIMELINE
13 weeks
WHAT I DID
- •Problem definition and opportunity framing
- •Market research and contextual inquiry
- •Experience and interaction design
- •AR prototyping and technical implementation
TOOLS & PLATFORM
Figma, FigJam, Lens Studio, JavaScript, Blender, Photoshop · Mobile Web AR (QR-based)
Before:
Accessory discovery relied entirely on post-purchase online traffic, leaving high-intent in-store shoppers disconnected from HyperX’s customization ecosystem.
After:
A shelf-placed QR entry point launches AR try-on instantly, converting retail foot traffic into a measurable, direct-to-consumer accessory channel.
PROBLEM
In-store shoppers evaluating HyperX headsets are unaware that customization options exist.
Target User
GOALS
Tech-savvy gamers and streamers (18–28) who shop for peripherals in-store.
MOTIVATIONS
Seeks personalized setups that reflect their identity
PAINPOINTS
Shoppers cannot discover HX3D customization at the moment they are deciding which headset to buy.
What This Means for the User
- •Unaware that customization options exist while shopping in-store
- •Evaluates HyperX as functionally similar to competing brands
- •Misses the opportunity to personalize their setup
What This Means for HyperX
- •Loses accessory attach rate and downstream ecosystem revenue
- •Fails to differentiate at the most competitive decision point — the shelf
- •Risks losing headset purchases to brands perceived as equivalent
Making HX3D visible in-store increases the likelihood that shoppers choose HyperX over competing brands and purchase accessories alongside or even before purchasing the headset itself.
RESEARCH
Differentiation Fails When It’s Invisible at the Moment of Decision
I conducted market research, in-store contextual inquiry, and cross-industry research to understand how headset accessories are discovered today and where meaningful product opportunities exist.
Market Research
Key Insight: HyperX owns the strongest customization ecosystem in the category, but without visibility or digital preview, that advantage cannot influence purchase decisions.
Contextual Inquiry
Key Insight: In-store shoppers can evaluate the product — but not discover its customization potential.
Cross-Industry Pattern
AR reduces hesitation in visually driven categories
AR increases confidence by previewing products in context
AR bridges physical retail and digital catalog ecosystems
Key Insight: AR is not novelty — it is infrastructure for surfacing hidden customization.
Research Insights
- •Customization is a primary differentiator, but it is invisible in retail.HX3D accessories differentiate HyperX from competitors, yet shoppers never see this advantage in-store.
- •In-store shoppers are making decisions without full product awareness.Without knowledge of HX3D, shoppers evaluate HyperX headsets as functionally similar to competing brands.
- •The highest-intent moment occurs before checkout, not after.Shoppers are most open to accessories while comparing products on the shelf, not after leaving the store.
- •AR can surface digital-only products without adding physical inventory.Cross-industry examples show AR is effective at bringing online-only options into physical spaces.
Opportunity Statement
Together, these insights revealed an opportunity to use AR to bridge in-store headset shopping with HyperX's digital HX3D accessory catalog, making customization visible, experiential, and shoppable at the point of decision.
HOW MIGHT WE
How might we help in-store shoppers discover and preview HX3D headset accessories while comparing products in major electronics retail stores?
DESIGN
What Are the Principles?
Make the Invisible Visible
HX3D accessories must be discoverable in the retail aisle, not hidden online.
Preview on the User, Not the Product Page
Shoppers need to see accessories on themselves, not as isolated images.
Support Fast, Confident Decisions
The experience must work in seconds, not minutes, while standing in-store.
Integrate with Existing Retail Reality
The solution must require no additional shelf space, inventory, or store redesign.
User Experience
The flow chart defines the system architecture; the comic validates the behavioral execution in a real retail context. Rather than building an AR feature, the experience was structured as a retail-to-DTC conversion funnel — entering at the shelf via QR, enabling immediate try-on, and exiting through a preloaded cart before checkout.
Key Takeaway: Transform retail foot traffic into a measurable accessory revenue channel without adding inventory, hardware, or operational complexity.
Design Iteration
Lo-Fi Exploration
Iteration Insight: Lo-fi exploration revealed that persistent side controls introduced spatial competition and weakened AR as the primary interaction.
Decision → Moving to Mid-Fi: I transitioned to a bottom-anchored customization model with a visually lightweight checkout, preserving face centering, reinforcing try-on as the core behavior, and improving one-handed ergonomics.
Mid-Fi Prototype
Accessory Selection
Users enter the AR experience, see themselves wearing HyperX headphones, and customize them in real time using popular HX3D accessories.
AR-to-Web Checkout
Users complete checkout within the AR experience and are directed to HyperX.com/cart to review their selected accessories and finalize their purchase.
Validation Insight: Interactive testing confirmed that bottom-positioned controls improved toggle speed and preserved AR focus, while the integrated checkout successfully maintained purchase continuity.
Ergonomic Learning: However, anchoring the customization bar flush to the bottom edge introduced subtle thumb strain in a natural grip.
Decision → Moving to High-Fi: I refined vertical spacing and interaction zones to improve reach comfort while maintaining visual hierarchy and conversion flow.
High-Fidelity Prototype
Refining Ergonomics & Brand System Integration
In the high-fidelity iteration, I raised the customization selector slightly above the bottom edge of the screen to align with the natural arc of the thumb when holding a phone one-handed.
This subtle adjustment:
- •Improved reachability
- •Reduced edge mis-taps
- •Maintained face centering
- •Preserved AR visibility
Brand & System Alignment
The interface was refined to align with the visual language being developed for HyperX NGENUITY, HyperX's device customization platform. Refinements included typography alignment, color hierarchy adjustments, and button styling consistency.
The goal was to ensure the AR experience felt like an extension of HyperX's ecosystem rather than a standalone AR experiment.
Production-Ready Flow: The high-fidelity prototype maintained the validated cart redirect introduced in mid-fi, reinforcing that AR selection transitions directly into HyperX's existing e-commerce system.
Technical Decisions as Product Design
Interaction Logic
I taught myself JavaScript and implemented lightweight interaction logic in Lens Studio to manage accessory toggling and state changes.
Performance Constraints
Lens Studio Web AR enforces an 8MB file size limit, requiring careful prioritization of interactions, assets, and visual fidelity to ensure fast load times in retail environments.
3D Asset Optimization
I optimized product CAD models in Blender, keeping each model under 60,000 triangles while preserving premium visual quality for smooth mobile AR rendering.
Try It Yourself
Scan the QR code to experience the live AR prototype
This demo focuses on in-store discovery and real-time accessory preview. Checkout is represented conceptually in the video.
Works on iOS and Android devices
IMPACT
I independently presented this work during a one-hour session with HyperX and HP senior leadership, including executives and directors across product, design, strategy, brand, and 3D. The session required communicating both the user experience and underlying product strategy to stakeholders with varied backgrounds.
Attendees included:
Gagan Singh (VP & GM), Dan Kelley (VP Gaming Solutions), Mark Spijkers (Global Head of Design & UX), Sean Peralta (Director of Product), Kellie Steinman (Director of Strategic Planning / Chief of Staff), Brendan Nguyen (Director of 3D/CGI), Shawn Denison (Global Product Manager, Audio), Rodrigo Rangel (Global Brand Manager)
Technical Credibility
The quality and performance of the AR prototype reinforced confidence that this experience could scale, demonstrating that HX3D accessories could be realistically previewed in-store without compromising performance or brand quality.
"Thank you so much for all the fantastic work you've shown us. I'm very motivated to get HyperX to invest in these capabilities, and when that becomes a reality, my first focus will be to find a way for you to continue this work with us."
— Mark Spijkers, Global Head of Design and User Experience, HyperX
LESSONS LEARNED
- •Making differentiation visible at the shelf can influence purchase decisions before checkout.
- •AR is most effective when framed as a product bridge, not a standalone experience.
- •Research and live demos are essential for aligning stakeholders on emerging technology.
- •Technical constraints can sharpen, not limit, product design decisions.