Sunnie
Data-Driven Designer
Selected Work

Monetization

Shopify Billing Currency — Redesigned the subscription payment flow so global Shopify merchants could pay in their own local currency, lifting task completion by roughly 60%.

Acquisition

Auth0 × Vercel — Partnered with Vercel to design a new onboarding experience that made Auth0 integration easier to discover and adopt in Vercel's marketplace, driving roughly a 20% increase in traffic.

Activation

Shopify Mobile Subscriptions — Revamped the subscription experience on the Shopify mobile app to feel native to mobile, driving activation gains across a series of experiments.

Retention

Achievers Marketplace — Rebuilt the Achievers marketplace homepage with an updated design system and improved navigation, lifting redemption rates by 50%.

About
Growth
Product Designer

I am a data-driven product designer with more than seven years of experience designing and scaling impactful SaaS and marketplace products.

I use AI daily as part of my design workflow, including AI prototyping to move faster from insights to shipped decisions.

Get in touch

Experience

  • Geotab SaaS Telematics, Now
  • Okta Growth, 2024
  • Shopify Growth, 2022
  • Achievers Marketplace, 2021

Teaching

  • University of Toronto 2021 – 2022

Education

  • Master of Information University of Toronto

Monetization

Paying Bills in Local Currencies in Shopify Admin Centre

Shopify billing currency

Overview

A retention initiative featuring a re-designed self-serve tool specifically for International Merchants.

Shopify pricing shown in different local currencies

For merchants in supported countries and regions, Shopify offers billing in local currency instead of USD. This initiative cuts down on currency exchange fees and making recurring costs like the Shopify subscription easier to predict.

Shopify rolled this out across several countries and regions in 2022. It was expected to be a smooth transition, but it wasn't. The merchant support team saw a spike in complaints, with merchants struggling to navigate the new billing option in the admin and needing direct support just to get through it.

Problem Statement

How might we enable merchants to independently modify their billing currency without requiring assistance from the support team?

Solution & Impact

The redesign launched in 2023 and has achieved success based on the following metrics:

  • Increasing task completion success rate.
  • Increasing user satisfaction.
  • Decreasing number of tickets pertaining to this feature received by the support team.
Before: Change currency modal
After: Change currency modal

Design Process
01

Performance Analysis

Performance analysis research

I ran a quantitative analysis on the current feature's dialogue, focused on how users engaged with its call-to-action elements. Using user behavior data, I tracked user activities and segmented across key demographics.

The data pointed to a clear pattern: users wanted more information before making changes to their account. That insight set up the next step for a qualitative research to pin down exactly what merchants needed to know.

Design Process
02

User Frustrations

User frustrations

I pulled together all complaints related to this feature using an internal customer feedback tool, then used an affinity diagramming technique to sort and group them. The findings are summarized in the three points listed.

Design Process
03

User Journey & Prioritization

User journey map

Despite the project's limited scope, the design was confined to the mentioned dialogue. However, I managed to extrapolate a more comprehensive user journey and collaborated with other teams responsible for various touch points within this mapping. This strategic approach allowed me to effectively persuade my project manager to prioritize the issue, consequently influencing the organization's roadmap.

Design Process
04

UX Workshops with Stakeholders

UX workshop flowchart

Utilizing the user flow I constructed, I conducted multiple rounds of design critique workshops, engaging key stakeholders such as the PM Lead, Engineer Lead, Customer Support Partner, Content Designer, and UX Manager. Drawing upon the expertise of each participant in their respective domains, I iteratively refined the flow, culminating in the final user flow showcased below, encompassing both system decisions and user-centric considerations.

Design Explorations

Refining through Iterative Feedback from Critique Groups

Design explorations

Multiple rounds of critique and iteration pushed the design forward significantly. Throughout, I worked closely with stakeholders including the Polaris design system team in keeping communication open at every step.

One idea didn't make it into this design directly is the timeline component used in Shopify Checkout. Rather than drop it, we carried the concept forward into a related project, the Mobile Subscription Experience Revamp, and flagged it on the roadmap as a pattern worth adopting anywhere time and billing intersect within Shopify Admin.

Final Design

Bridging Usability Testing, Engineering Synergy, and Enhanced Merchant Experience

Final design

Through extensive usability testing, I crafted the final design, ensuring seamless synchronization with the engineering team.

This refined design effectively addressed all user frustrations gathered from our comprehensive research efforts in the earlier stage. As a result, merchants now benefit from a clear understanding of their currency options, expectations, and the change timeline.