Shopify
Privacy & Compliance App.
Context
You know cookies—those little files websites stash in your browser to remember your login info or keep track of your shopping cart. They’re crucial for a seamless browsing experience, but they can also be used to track your behavior and collect data for ads and analytics.
But here’s the kicker: companies like Google and Facebook took it up a notch with “third-party cookies,” tracking users across the web, even when they weren’t on their sites. This sparked privacy concerns and led to the EU’s creation of the General Data Protection Regulation (GDPR) in 2018.
When I joined Shopify, their privacy tools were pretty basic. The only free app in the Shopify store for cookie consent was a simple banner—hardly GDPR compliant. Third-party apps existed, but they were hit-or-miss in blocking cookies as required. Seeing the need for better privacy solutions, I joined the team to upgrade Shopify’s privacy tools and ensure compliance with global privacy laws.
Mission
1. Redesign the Privacy & Compliance app to align with GDPR guidelines by allowing merchants to publish a cookie consent banner on their storefronts. Create detailed consent options so visitors can pick and choose which cookies they’re okay with. This not only ensures GDPR compliance but also boosts user transparency and control, building trust along the way.
2. Design an optimized default cookie consent banner aimed at maximizing opt-in rates. This ensures users have clear, informed choices while allowing merchants to continue collecting essential customer data.
The Team
1 Product Manager
1 Product Design Lead ~ My role!
1 Technical Lead
1 Content Designer
5 Developers
My Deliverables
scope & feature prioritization
UX/UI direction & design
prototypes
developer handoff
scope and feature prioritization -
Because the current app, at the time, was not GDPR compliant, completing and releasing the new app ASAP was the top priority.
Adding granular consent options to the banner was required.
Designing banner customization tools was paramount.
but first…
What are granular consent controls?
That’s right, where GDPR applies, websites not only need to ask if they can use cookies, but they also must allow visitors to choose the specific types of data they want to share or not share.
Research
Multivariate testing. Which variation garners the best opt-in rates?
Working with the team’s content designer and a data scientist, I crafted multiple banner variations, tweaking content, colors, and placement. The goal? To discover which version would drive the most opt-ins and outperform Shopify’s previous cookie consent banner.
We took a team approach, using multivariate testing — a sophisticated form of A/B testing — on live Shopify storefronts. By progressively pairing the winning variants, we ultimately arrived at a single, fully optimized version.
Optimized banner = 30% more opt-ins
The most performant version
Placement
Color
Border
Headline
Text
Button text
Button order
center - center
dark background, light text
none
"We care about your privacy"
Medium in length, technical explanation
"Accept", "Decline", "Manage preferences"
Accept in the middle, “preferences” as a text link
Next: design the cookie banner publishing app
Which is better? An intuitive experience or a consistent experience?
When I began designing this app for the Shopify app store, a debate emerged: should the design prioritize an intuitive user experience or stick to consistent UI patterns? Is it more crucial for all Shopify apps to look and feel the same, or should each app focus on being as user-friendly as possible?
Design leadership chose "Consistency" as our guiding design principle, which is reflected in my final design.
Post-launch iteration
Address storefront widget collisions by enhancing the real-time page preview experience.
Allow me to elaborate. Nowadays, e-commerce websites often feature several pop-ups and chat widgets that appear over the main website interface. In addition, a cookie consent banner is also displayed, resulting in a cluttered and jarring user experience. Unfortunately, Shopify does not offer an efficient solution for managing the preview and order of these elements, which can be problematic for website owners. However, after our initial launch, that would become a priority, and I would explore solutions in a new round of iterations.
“Life is short, eat the cookie... but remember, some cookies follow you forever, like a nosy neighbor with a sweet tooth.”
Product
A tool for creating an on-brand cookie banner to inform site visitors about privacy policies and let them choose how their data is used.
Status
Live on the Shopify app store
Title
Senior product designer
Activities
scope & feature prioritization
UX/UI direction & design
prototypes
developer handoff