Jewelett — Jewelry E - Commerce App

ADAM.REZNIK

Design_System_V4

Local_Time

Contact

ADAM.REZNIK

Contact

Sr. Product Designer · End-To-End Research To HandOff

Designing confidence for high-value jewelry purchases

Jewelett is an iOS product designed for premium jewelry e-commerce. The core challenge was not discovery alone, but helping users move from visual interest to confident purchase — especially when material, scale, and configuration are difficult to judge through static imagery.

Viewer Engagement
+60%

Configuration Retention
↓ 3× drop-off

01 · THE PROBLEM

You can't try on a ring through a flat photo

Fine jewelry sits at the intersection of high price and high emotion. A wrong purchase is genuinely distressing, and any ambiguity in the online experience leads directly to doubt, returns, or no sale.

Configuration anxiety

The difference between a 1ct oval and a 1.5ct cushion is significant — in appearance, in price, in feel on the hand. But from a dropdown or a chip picker, those choices are completely abstract. Doubt accumulates with each selection, and the easiest resolution is to abandon the cart.

Configuration anxiety

The scale problem nobody talks about

Studio photography makes rings look larger than they are. When the product arrives, it's physically smaller than the customer imagined. This isn't a returns problem — it's a trust problem. The customer didn't misunderstand the description; they were given no way to understand the actual object.

The scale problem nobody talks about

Trust at high-value purchase

At these price points, every unresolved question is a reason not to proceed. Certification, material quality, exact proportions — each gap between what the customer needs to know and what the product page tells them is a lost sale. Our job was to close every one of those gaps before the CTA.

Trust at high-value purchase

02 · Research & insights

One pattern that
reframed the problem

Moderated sessions with jewelry buyers across self-purchase and gift scenarios, combined with a review of existing mobile experiences, revealed how decisions are actually made.

Finding 01 · The IA pivot

Discovery is driven by intent

In most sessions, users approached browsing with a clear intent — occasion, material, or budget — rather than a specific brand. Brand only became relevant later in the flow, primarily as a justification for price on the product page, which led us to shift the IA toward intent-based entry points.

Finding 02 · Configuration

Uncertainty emerges during variant selection

Users frequently hesitated when selecting materials or variants, not because of lack of interest, but due to difficulty imagining the differences. This reframed configuration as a visualization problem, positioning the 3D viewer as a core decision-support tool.

Finding 03 · Scale

Static imagery lacks reliable scale reference

When asked to estimate size from studio imagery, users often misjudged proportions, typically overestimating dimensions. Without a reference point, images failed to communicate real-world scale, which led to introducing a 1:1 viewing mode.

FINDING 04 · TRUST SIGNAL

Trust increases when verification is immediate

Certification had a noticeable impact only when presented directly within the product page, rather than as an external link. Inline visibility made the product feel more tangible and credible during evaluation, so certification was integrated into the main decision context near the primary action.

Jobs to be done · 3 primary segments

Segment A · Self-purchase

"When I'm buying something for myself, I need to feel certain about how it will actually look and fit into my life, so I don't regret the purchase later."

Focus: reduce uncertainty around appearance, scale, and material

Segment B · Gift buyer

"When I'm buying a gift, I need to quickly narrow down to something appropriate and safe, so I can make a confident decision without overthinking."

Focus: fast narrowing, occasion fit, low-risk choice

Segment C · Collector

"When I'm considering a high-value piece, I need signals that justify its quality and authenticity, so I can trust the purchase beyond just how it looks."

Focus: provenance, certification, brand credibility

03 · USER-FLOW

Where decisions shape the flow

A high-level flow from browsing to purchase, focused on key decision points. The 3D viewer supports evaluation on the product page, while checkout remains direct and uninterrupted.

04 · Information architecture

Structured
around user intent

Material and occasion drive discovery, while brand supports final decisions. Authentication appears at checkout only, with all prior screens fully accessible, including the 3D viewer.

Jewelett App

5-tab navigation · Auth gate at checkout only · Guest browse fully featured

Jewelett App

5-tab navigation · Auth gate at checkout only · Guest browse fully featured

Zone 01 · Discovery — tab bar

Home

Default entry · editorial hero · category grid

Home

Default entry · editorial hero · category grid

ENTRY

GUEST

Catalog

`Material · occasion · price filters · inline search`

Catalog

`Material · occasion · price filters · inline search`

GUEST

Wishlist

`Saved items · price alerts · quick add to bag`

Wishlist

`Saved items · price alerts · quick add to bag`

AUTH

Bag

`Persistent cart · config summary · gift wrap`

Bag

`Persistent cart · config summary · gift wrap`

GUEST TO VIEW

GUEST

AUTH TO BUY

AUTH

Profile

`Orders · certs · size profile · preferences`

Profile

`Orders · certs · size profile · preferences`

AUTH

Zone 02 · Evaluation — triggered from Catalog

PDP

`Photos · stone, carat, metal · IGI cert · sticky Add to Bag`

PDP

`Photos · stone, carat, metal · IGI cert · sticky Add to Bag`

GUEST

3D Viewer

`Rotate · zoom · 1:1 scale mode · real-time metal switch`

3D Viewer

`Rotate · zoom · 1:1 scale mode · real-time metal switch`

GUEST

KEY FEATURE

FEATURE

Brand Profile

`Brand story · full catalog · provenance · accessible from PDP`

Brand Profile

`Brand story · full catalog · provenance · accessible from PDP`

GUEST

Search

`Full-text · Recent queries · Trending`

Search

`Full-text · Recent queries · Trending`

GUEST

Authentication boundary — account required to complete purchase

Authentication boundary

Zone 03 · Transaction — entered via Bag tab or Add to Bag CTA

Zone 03 · Transaction

Bag

`Persistent tab — entry point into Zone 03, not a transaction-only screen`

Bag

`Persistent tab — entry point into Zone 03, not a transaction-only screen`

AUTH TO BUY

Checkout

`Delivery · Apple Pay primary · card fallback · Face ID confirm`

Checkout

`Delivery · Apple Pay primary · card fallback · Face ID confirm`

AUTH

Confirmation

Order summary · cert available · delivery tracking

Confirmation

Order summary · cert available · delivery tracking

AUTH

Order History

Past orders · certificates · reorder · support

Order History

Past orders · certificates · reorder · support

AUTH

05 · Interaction

Product introduction
and in-context interaction

A short sequence showing how the product is introduced and explored. The 3D viewer is integrated into the product page and used directly during evaluation.

06 · interfaces

Discovery
and configuration

Home leads with editorial content, not a product grid. Catalog surfaces price at list level for quick decisions. PDP keeps all configuration in a single scroll with a persistent CTA.

HOME

Editorial-first entry — browsing starts with context, not products.

CATALOG

Price upfront — reduces low-intent PDP visits.

PRODUCT DETAILS

Configuration, trust, and action aligned in a single view.

HOME

Editorial-first entry — browsing starts with context, not products.

PRODUCT DETAILS

Configuration, trust, and action aligned in a single view.

CATALOG

Price upfront — reduces low-intent PDP visits.

07 · KEY FEATURE

3D interaction and 1:1 scale

Real-time rotation, pinch-to-zoom, and live metal switching update instantly. The 1:1 mode renders the ring at its physical diameter on screen.

Design call 01

3D over AR for controlled realism

AR was considered, but dismissed due to unreliable rendering and scale. A controlled 3D viewer provides consistent visual accuracy and supports decision-making without introducing false expectations.

Design call 02

1:1 is the primary control

Placed directly in the toolbar, not hidden in menus. The only full-contrast element, making it immediately discoverable.

Design call 03

Metal switching stays in-viewer

White · Yellow · Rose toggles update the model instantly. Comparison happens through interaction, without additional views or transitions.

08 · TRANSACTION SET

Focused
on completion

Transaction stays direct. Bag summarizes without adding decisions. Checkout prioritizes speed with saved details and minimal input. Confirmation provides a clear summary and access to certification.

09 · RESULTS

Defined before testing
Validated against it

Defined before
production validation

Moderated testing, across three segments, final prototype vs baseline configuration flow.

3D viewer adoption

+60%

Sessions with viewer interaction showed high engagement with product evaluation versus the baseline flow.

26 of 30 participants opened the viewer unprompted

1:1 mode usage

Active

A noticeable portion of users who open the viewer engage with 1:1 scale mode, suggesting that scale uncertainty is being actively resolved rather than ignored.

Signal: 1:1 mode drove the strongest trust reactions

CONFIGURATION RETENTION

3×

Drop-off during variant selection was 3× lower than in the baseline flow. Participants who switched metals in-viewer proceeded to Add to Bag without revisiting configuration.

Task: configure a ring to a given spec

Return sensitivity

↓ Decrease

If scale and material are communicated more accurately before purchase, return rates related to expectation mismatch should decrease over time.

Signal: return reasons · size / expectation mismatch

If scale and material are communicated more accurately before purchase, return rates related to expectation mismatch should decrease over time.

Signal: return reasons · size / expectation mismatch

Perceived trust

22/30

Cited inline certification, clear material states, and inspection depth as a purchase-trust factor.

Signal: Post-test interviews, qualitative only

Accessibility

WCAG 2.1 AA

All key interactions remain accessible: Dynamic Type support, minimum touch targets, and VoiceOver coverage including 3D controls.

Validated during design review

3D viewer adoption

+60%

Sessions with viewer interaction showed high engagement with product evaluation versus the baseline flow.

26 of 30 participants opened the viewer unprompted

1:1 mode usage

Active

A noticeable portion of users who open the viewer engage with 1:1 scale mode, suggesting that scale uncertainty is being actively resolved rather than ignored.

Signal: 1:1 mode drove the strongest trust reactions

CONFIGURATION RETENTION

3×

Drop-off during variant selection was 3× lower than in the baseline flow. Participants who switched metals in-viewer proceeded to Add to Bag without revisiting configuration.

Task: configure a ring to a given spec

Return sensitivity

↓ Decrease

If scale and material are communicated more accurately before purchase, return rates related to expectation mismatch should decrease over time.

Signal: return reasons · size / expectation mismatch

Perceived trust

22/30

Cited inline certification, clear material states, and inspection depth as a purchase-trust factor.

Signal: Post-test interviews, qualitative only

Accessibility

WCAG 2.1 AA

All key interactions remain accessible: Dynamic Type support, minimum touch targets, and VoiceOver coverage including 3D controls.

Validated during design review

10 · DESIGN SYSTEM

Token-based product system

Core and semantic token architecture for iOS (SwiftUI / UIKit) and React Native. It underpins every spacing, color, and typography decision, structured for implementation.

VIEW ON GITHUB

struct PrimaryButton: View {
    var body: some View {
        Text("Add to Bag")
            .font(.system(size: 17, weight: .medium))
            .foregroundColor(DS.Color.textOnCTA)
            .padding(.horizontal, DS.Space.md)
            .padding(.vertical, DS.Space.sm)
            .background(DS.Color.ctaPrimary)
            .cornerRadius(DS.Radius.button)
    }
}

Trillion AR Ecosystem

B2B SaaS • 3D/AR • Dashboard

Trillion AR Ecosystem

F2 Innovations Admin Panel

IoT Control System • Web • Dashboard

Open to new product challenges.

Available for product design work across web, mobile, and connected systems.

Email Me

Contact Form