Designing а Zero-Disruption Loyalty Widget for Shopify Merchants & Their Shoppers
Designing а Zero-Disruption Loyalty Widget for Shopify Merchants & Their Shoppers
Designing а Zero-Disruption Loyalty Widget for Shopify Merchants & Their Shoppers
Project Overview
Project Overview
Project Overview
Industry
Industry
Industry
E-Commerce
B2B
E-Commerce
B2B
E-Commerce
B2B
Role
Role
Role
UX Designer
UX Designer
UX Designer
Shoppers persistent, frictionless access to their loyalty status — points balance, tier, and available rewards — without ever pulling them away from the page they're on.
The product consists of two core components: a mobile bottom sheet drawer and configurable CTA blocks that merchants can drop anywhere on their storefront. My role covered the full design lifecycle — from competitive discovery and interaction architecture through Figma prototyping, merchant configuration UX, edge-case resolution, and engineering handoff.
Shoppers persistent, frictionless access to their loyalty status — points balance, tier, and available rewards — without ever pulling them away from the page they're on.
The product consists of two core components: a mobile bottom sheet drawer and configurable CTA blocks that merchants can drop anywhere on their storefront. My role covered the full design lifecycle — from competitive discovery and interaction architecture through Figma prototyping, merchant configuration UX, edge-case resolution, and engineering handoff.
UX Research
User Journey Mapping
UI
Interaction Design
Responsive Design
Feature Design
Shoppers persistent, frictionless access to their loyalty status — points balance, tier, and available rewards — without ever pulling them away from the page they're on.
The product consists of two core components: a mobile bottom sheet drawer and configurable CTA blocks that merchants can drop anywhere on their storefront. My role covered the full design lifecycle — from competitive discovery and interaction architecture through Figma prototyping, merchant configuration UX, edge-case resolution, and engineering handoff.
Shoppers persistent, frictionless access to their loyalty status — points balance, tier, and available rewards — without ever pulling them away from the page they're on.
The product consists of two core components: a mobile bottom sheet drawer and configurable CTA blocks that merchants can drop anywhere on their storefront. My role covered the full design lifecycle — from competitive discovery and interaction architecture through Figma prototyping, merchant configuration UX, edge-case resolution, and engineering handoff.
UX Research
UX Research
User Journey Mapping
User Journey Mapping
UI
UI
Interaction Design
Interaction Design
Responsive Design
Responsive Design
Feature Design
Feature Design
Project Outcomes
Project Outcomes
Project Outcomes
22%
22%
Merchant
ARR UPLIFT
Merchant
ARR UPLIFT
38%
38%
Loyalty
Engagement
Loyalty
Engagement
2.4x
2.4x
Increase in
Purchase Rate
Increase in
Purchase Rate
Problem
Problem
Problem
Most loyalty programs kill conversion by forcing shoppers to leave the product page to find or redeem rewards. This friction breaks buying momentum and leads to abandoned carts.
Most loyalty programs kill conversion by forcing shoppers to leave the product page to find or redeem rewards. This friction breaks buying momentum and leads to abandoned carts.
Most loyalty programs kill conversion by forcing shoppers to leave the product page to find or redeem rewards. This friction breaks buying momentum and leads to abandoned carts.
Shopper Pain Points
Shopper Pain Points
Shopper Pain Points
Shoppers abandon carts when they can't find rewards
Shoppers abandon carts when they can't find rewards
Shoppers abandon carts when they can't find rewards
Loyalty programs feel disconnected from the store experience
Loyalty programs feel disconnected from the store experience
Loyalty programs feel disconnected from the store experience
No persistent visibility into points or tier status
No persistent visibility into points or tier status
No persistent visibility into points or tier status
Redemption flows break the browsing journey
Redemption flows break the browsing journey
Redemption flows break the browsing journey
Merchant Pain Points
Merchant Pain Points
Merchant Pain Points
Merchants need flexible placement without developer help
Merchants need flexible placement without developer help
Merchants need flexible placement without developer help
Configuration must work within Shopify's theme editor model
Configuration must work within Shopify's theme editor model
Configuration must work within Shopify's theme editor model
App embeds vs. app blocks create merchant confusion
App embeds vs. app blocks create merchant confusion
App embeds vs. app blocks create merchant confusion
Preview state must be distinct from live shopper experience
Preview state must be distinct from live shopper experience
Preview state must be distinct from live shopper experience
Solution
Solution
Solution
Automated, role-based user onboarding experience: a hands-off conversion method for the staff
Automated, role-based user onboarding experience: a hands-off conversion method for the staff
Automated, role-based user onboarding experience: a hands-off conversion method for the staff
Solution - Shopify
Loyalty Widget
Solution - Shopify Loyalty Widget
Solution - Shopify
Loyalty Widget
The Spotlight Widget is a lightweight entry point that can live anywhere on a page and expand into a bottom-sheet overlay. No page redirects. No sticky UI. No broken shopping flow. Shoppers can access loyalty without leaving what they're doing. Merchants can place it wherever it makes sense - without sacrificing layout or brand. One solution. Two problems solved.
The Spotlight Widget is a lightweight entry point that can live anywhere on a page and expand into a bottom-sheet overlay. No page redirects. No sticky UI. No broken shopping flow. Shoppers can access loyalty without leaving what they're doing. Merchants can place it wherever it makes sense - without sacrificing layout or brand. One solution. Two problems solved.
The Spotlight Widget is a lightweight entry point that can live anywhere on a page and expand into a bottom-sheet overlay. No page redirects. No sticky UI. No broken shopping flow. Shoppers can access loyalty without leaving what they're doing. Merchants can place it wherever it makes sense - without sacrificing layout or brand. One solution. Two problems solved.
Trigger
Trigger
Drawer
Drawer
0 points - Welcome Screen
0 points - Welcome Screen
0 points - Welcome Screen
0 points - Welcome Screen
0 points - General
0 points - General
0 points - General
0 points - General
Completed the new member reward earning rule
Completed the new member reward earning rule
Completed the new member reward earning rule
Completed the new member reward earning rule
With Tier
With Tier
With Tier
With Tier
Logged in scenarios
Logged in scenarios
Logged in scenarios
At least 1 reward available but not all of them
At least 1 reward available but not all of them
At least 1 reward available but not all of them
With min spending restrictions
With min spending restrictions
With min spending restrictions
With product/collection restrictions
With product/collection restrictions
With product/collection restrictions
One of the coupons has been redeemed but not used
One of the coupons has been redeemed but not used
One of the coupons has been redeemed but not used
The shopper can redeem more than one coupon
The shopper can redeem more than one coupon
The shopper is redeeming one of the coupons
The shopper is redeeming one of the coupons
The shopper is redeeming one of the coupons
Spotlight Desktop - Trigger - Logged in
Spotlight Desktop - Trigger - Logged in
Spotlight Desktop - Trigger - Logged in
Spotlight Desktop - Trigger - Logged Out
Spotlight Desktop - Trigger - Logged Out
Spotlight Desktop - Trigger - Logged Out
Spotlight Desktop - Drawer - Logged in
Spotlight Desktop - Drawer - Logged in
Spotlight Desktop - Drawer - Logged in
Designed to fit every brand
Designed to fit every brand
Designed to fit every brand
We weren't designing for a brand. We were designing something that needed to fit all brands.
We went through countless iterations: Stripping visuals down to their essence. Removing stylistic bias. Challenging each other constantly. It was one of the most demanding - and rewarding - design exercises I've done.
To validate our thinking, I took the same widget and re-skinned it for 3–5 real merchants. Different industries. Different aesthetics. The structure held.
We weren't designing for a brand. We were designing something that needed to fit all brands.
We went through countless iterations: Stripping visuals down to their essence. Removing stylistic bias. Challenging each other constantly. It was one of the most demanding - and rewarding - design exercises I've done.
To validate our thinking, I took the same widget and re-skinned it for 3–5 real merchants. Different industries. Different aesthetics. The structure held.
We weren't designing for a brand. We were designing something that needed to fit all brands.
We went through countless iterations: Stripping visuals down to their essence. Removing stylistic bias. Challenging each other constantly. It was one of the most demanding - and rewarding - design exercises I've done.
To validate our thinking, I took the same widget and re-skinned it for 3–5 real merchants. Different industries. Different aesthetics. The structure held.
Component Library
Component Library
Component Library
Responsive behavior
Responsive behavior
Responsive behavior
Scaling points balance count
Scaling points balance count
Scaling points balance count
Scaling rewards on >360 px screens
Scaling rewards on >360 px screens
Where the project is now
Where the project is now
Where the project is now
Spotlight is currently in a live build-to-learn phase with design partners, with public release targeted for early April 2026. The design partner phase has been used to validate core interaction patterns, surface edge cases in real merchant environments, and stress-test the configuration UX with non-technical merchants.
Spotlight is currently in a live build-to-learn phase with design partners, with public release targeted for early April 2026. The design partner phase has been used to validate core interaction patterns, surface edge cases in real merchant environments, and stress-test the configuration UX with non-technical merchants.
Spotlight is currently in a live build-to-learn phase with design partners, with public release targeted for early April 2026. The design partner phase has been used to validate core interaction patterns, surface edge cases in real merchant environments, and stress-test the configuration UX with non-technical merchants.
Spotlight is currently in a live build-to-learn phase with design partners, with public release targeted for early April 2026. The design partner phase has been used to validate core interaction patterns, surface edge cases in real merchant environments, and stress-test the configuration UX with non-technical merchants.
2026 all rights reserved
2026 all rights reserved
2026 all rights reserved
2026 all rights reserved
Back