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.
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.
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.
ROLE
Senior Product Designer
ROLE
Senior Product Designer
ROLE
Senior Product Designer
SCOPE
End-to-end research to handoff
SCOPE
End-to-end research to handoff
SCOPE
End-to-end research to handoff
KEY FEATURE
3D viewer · 1:1 scale mode
KEY FEATURE
3D viewer · 1:1 scale mode
KEY FEATURE
3D viewer · 1:1 scale mode
01 · THE PROBLEM
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.
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.
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.
01
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 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.
01
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.
02
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
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.
02
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.
03
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
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.
03
02 · Research & insights
reframed the problem.
reframed the problem.
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.
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.
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 01 · The IA pivot
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.
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 01 · The IA pivot
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
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.
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
around user intent.
around user intent.
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.
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.
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
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
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
and in-context interaction.
and in-context interaction.
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.
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
and configuration.
and configuration.
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 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 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.
01
HOME
Editorial-first entry — browsing starts with context, not products.
02
CATALOG
Price upfront — reduces low-intent PDP visits.
03
PRODUCT DETAILS
Configuration, trust, and action aligned in a single view.
01
HOME
Editorial-first entry — browsing starts with context, not products.
03
PRODUCT DETAILS
Configuration, trust, and action aligned in a single view.
02
CATALOG
Price upfront — reduces low-intent PDP visits.
07 · KEY FEATURE
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.
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
Design call 01
3D over AR for controlled realism
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.
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
Design call 02
1:1 is the primary control
1:1 is the primary control
Placed directly in the toolbar, not hidden in menus. The only full-contrast element, making it immediately discoverable.
Placed directly in the toolbar, not hidden in menus. The only full-contrast element, making it immediately discoverable.
Design call 03
Design call 03
Metal switching stays in-viewer
Metal switching stays in-viewer
White · Yellow · Rose toggles update the model instantly. Comparison happens through interaction, without additional views or transitions.
White · Yellow · Rose toggles update the model instantly. Comparison happens through interaction, without additional views or transitions.
08 · TRANSACTION SET
on completion
on completion
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.
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.
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 · SUCCESS CRITERIA
production validation.
production validation.
production validation.
The product was designed and handed off for development, but not yet validated in production. Instead of fixed KPIs, a set of directional success criteria and measurement signals defines whether the core hypotheses hold.
The product was designed and handed off for development, but not yet validated in production. Instead of fixed KPIs, a set of directional success criteria and measurement signals defines whether the core hypotheses hold.
The product was designed and handed off for development, but not yet validated in production. Instead of fixed KPIs, a set of directional success criteria and measurement signals defines whether the core hypotheses hold.
3D viewer adoption
High
The viewer should be used organically by a meaningful share of users on PDP without prompts, indicating that it solves a real evaluation need rather than acting as a decorative feature.
Signal: % of PDP sessions with viewer interaction
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: share of viewer sessions with 1:1 activation
Conversion behavior
↑ Increase
Sessions involving product inspection (gallery, material switching, 3D) should show higher progression to Add to Bag compared to passive browsing sessions.
Signal: PDP → Bag progression by interaction depth
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
↑ Increase
Inline certification, clear material states, and inspection depth should increase perceived product credibility at the moment of decision.
Signal: qualitative feedback · post-purchase surveys
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
High
The viewer should be used organically by a meaningful share of users on PDP without prompts, indicating that it solves a real evaluation need rather than acting as a decorative feature.
Signal: % of PDP sessions with viewer interaction
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: share of viewer sessions with 1:1 activation
Conversion behavior
↑ Increase
Sessions involving product inspection (gallery, material switching, 3D) should show higher progression to Add to Bag compared to passive browsing sessions.
Signal: PDP → Bag progression by interaction depth
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
↑ Increase
Inline certification, clear material states, and inspection depth should increase perceived product credibility at the moment of decision.
Signal: qualitative feedback · post-purchase surveys
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
High
The viewer should be used organically by a meaningful share of users on PDP without prompts, indicating that it solves a real evaluation need rather than acting as a decorative feature.
Signal: % of PDP sessions with viewer interaction
Conversion behavior
↑ Increase
Sessions involving product inspection (gallery, material switching, 3D) should show higher progression to Add to Bag compared to passive browsing sessions.
Signal: PDP → Bag progression by interaction depth
Perceived trust
↑ Increase
Inline certification, clear material states, and inspection depth should increase perceived product credibility at the moment of decision.
Signal: qualitative feedback · post-purchase surveys
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: share of viewer sessions with 1:1 activation
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
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
Core and semantic token architecture for iOS (SwiftUI / UIKit) and React Native. It underpins every spacing, color, and typography decision, structured for implementation.
Core and semantic token architecture for iOS (SwiftUI / UIKit) and React Native. It underpins every spacing, color, and typography decision, structured for implementation.
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) } }
Open to new product challenges.
Available for product design work across web, mobile, and connected systems.