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.

AR Try-On Experience

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

1 Product Designer (Me)

2 3D Designers

1 Team Manager

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 and after comparison

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 direct-to-consumer accessory channel.


PROBLEM

In-store shoppers evaluating HyperX headsets are unaware that customization options exist.

Target User

User persona - Jordan Mitchell

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

Competitive analysis

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

Contextual inquiry findings

Key Insight: In-store shoppers can evaluate the product — but not discover its customization potential.

Cross-Industry Pattern

AR precedents - Nike, Adidas, Gucci, Zara, Meta

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

Experience architecture and flow
User Experience Comic

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

Low-Fidelity Exploration

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-Fidelity Validation

MidFi Select Accessories

Accessory Selection

Users enter the AR experience, see themselves wearing HyperX headphones, and customize them in real time using popular HX3D accessories.

MidFi Checkout

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: Transitioning from Mid-Fi to a functional Web AR prototype introduced an 8MB file-size constraint, requiring careful tradeoffs between interaction complexity and 3D asset fidelity.

To stay within performance limits while preserving product quality, I:

  • Simplified and consolidated coded interaction states to reduce script weight
  • Optimized 3D models for mobile rendering without compromising perceived premium quality
  • Prioritized only conversion-critical customization flows

High-Fidelity Refinement

To validate feasibility beyond static mockups, I translated the interface into a functional Web AR prototype in Lens Studio—integrating exported Figma UI, custom 3D assets, and real interaction logic to demonstrate production viability to executive stakeholders.

Hifi enter with headset
Hifi customization option 1
Hifi customization option 2
Hifi customization option 3

AR Try-On HX3D Best Sellers

User enters the AR experience, sees themselves wearing a headset, and tries on HX3D’s best-selling accessory sets in real time.

Hifi Checkout

AR-to-Web Checkout

User selects a preferred HX3D accessory set in AR, proceeds to checkout, and is directed to HyperX.com/cart to review and complete their purchase.

Ergonomic: Optimization: Elevating the customization bar slightly above the screen edge improved thumb reach, reduced edge mis-taps, and preserved AR visibility without disrupting face centering.

System-Level Alignment: The interface was then refined to align with HyperX NGENUITY’s visual system— standardizing typography, color hierarchy, and button styling to ensure the AR experience felt like an extension of the broader product ecosystem.


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.

QR code to try AR experience

Works on iOS and Android devices


OUTCOME & INFLUENCE

  • Validated technical feasibility within an 8MB Web AR constraint, de-risking AR commerce as a viable retail channel for HyperX.
  • Clarified interaction and ergonomic direction through iterative prototyping — resolving thumb-reach and spatial hierarchy tradeoffs that informed the final interface model.
  • Aligned the AR experience with HyperX NGENUITY's visual system, reinforcing ecosystem coherence across digital and physical product touchpoints.
  • Independently presented to HyperX and HP senior leadership — including executives and directors across product, design, strategy, brand, and 3D — in a one-hour session covering both the user experience and underlying product strategy.

LEADERSHIP ENDORSEMENTS

Leadership & Mentor validation of execution, strategic thinking, and AR feasibility.

“During your internship at HyperX, you operated with a level of ownership and strategic thinking well beyond your tenure. You not only led the HX3D AR try-on initiative, but also introduced us to the broader potential of AR technology within our ecosystem. The AR Quick Start Guide you developed brought clarity and structure to a complex workflow, and you presented both initiatives to the executive team and cross-functional stakeholders with confidence and polish. Your ability to connect emerging AR technology with real business impact and user experience truly sets you apart.”
— Brendan Nguyen, Manager, Product Visualization & CGI
“Kirana brought an exceptional blend of creativity, technical curiosity, and business acumen to her internship with HyperX. She developed a series of forward-thinking AR concepts designed to elevate customer engagement and meaningfully impact sales conversion.

Her ability to connect vision with value was evident as she presented her design and technology concepts to executive leadership with clarity and confidence, articulating ROI and strategic impact. Kirana demonstrated a strong ability to tailor her messaging based on the audience, showing empathy and insight into stakeholder priorities.

She is a thoughtful designer, a strong communicator, and a strategic thinker with tremendous potential ahead of her.”
— Mark Spijkers, Head of Design and User Experience, HyperX
“I had the pleasure of working closely with Kirana during her internship at HyperX. She always showed a eager willingness to learn and was quick to adapt to new challenges. Whenever she faced a problem she didn’t have an immediate answer for, she took the extra step to research and came back with a solution the next time we talked. Her curiosity, persistence, and problem-solving mindset truly made her a wonderful and valued member of our team.”
— Wesley Ihezue, 3D Designer, HyperX

LESSONS LEARNED

  • In a future iteration, I would validate the shelf-to-scan journey in real retail environments to ensure discoverability and reduce friction before optimizing the AR interface itself.
  • With more time, I would instrument the AR-to-cart flow to measure point-of-scan conversion and collaborate with retail and e-commerce teams to pilot a production integration.
  • This project reinforced that hard performance constraints sharpen product decisions — balancing interaction depth with 3D fidelity required disciplined prioritization.
  • I'll carry forward the practice of building production-feasible prototypes early to align stakeholders, reduce ambiguity, and de-risk emerging technology initiatives.