Skip to content
Lumina

Frame, lens and fit in one view

Nine frames across three sizes, with lens tints rendered against a measured face width rather than a stock photo.

Client
Nordvik Eyewear
Year
2024
Discipline
Product configurator
Our role
Design, WebGL, front-end, accessibility

The challenge

The challenge

Almost half of all returns were sizing, not taste. Customers were choosing frames from photographs of models whose face width they had no way of knowing.

The approach — 3 moves

What we did

  • 01

    Frames are rendered against a scale reference set from the customer’s own measurement, so the comparison is dimensional rather than aesthetic.

  • 02

    Lens tints are physically-based transmission rather than a colour overlay, which means a gradient tint reads correctly against both a light and dark background.

  • 03

    The whole configurator is keyboard operable and works at 200% zoom — it is the primary buying interface, so it could not be a mouse-only toy.

Frame configurator with a gradient tint applied
Size comparison against a measured face width
Keyboard focus moving through the frame picker

Outcome

What changed

Size returns
−41%
Conversion
+22%
WCAG 2.2 audited
AA

Built with

  • Next.js
  • React Three Fiber
  • MeshPhysicalMaterial transmission

Next project

One product, one page, one scroll

Corvid Cycles / 2024 / 3D web experience