Shopify
Privacy & Compliance App.
Context
You probably know that cookies are files websites store on a user’s browser upon visiting. They’re essential to the modern browsing experience because they help the website remember the user’s preferences, such as their login information and what’s in their shopping cart. However, websites can also use cookies to track user behavior and collect data for analytics and advertising purposes.
Did you know companies like Google and Facebook began using cookies to track users’ online activity, even when they weren’t on their respective sites? Yeah, using these “third-party cookies” raised privacy concerns, leading to the European Union’s creation of the General Data Protection Regulation (GDPR) in 2018.
When I joined Shopify, the platform's privacy settings were limited, and the only free and reliable solution available in the Shopify app store was a basic app that helped merchants display cookie consent banners on their storefronts. However, this app did not fully meet the compliance requirements of GDPR. Although there were third-party apps available, they did not consistently block cookies as required by GDPR. Recognizing the urgency to improve its privacy capabilities, I was brought onto the team to help enhance Shopify's privacy tools and ensure compliance with global privacy laws.
Mission
1. Redesign the Privacy & Compliance app to meet GDPR guidelines, enabling merchants to publish a cookie consent banner on their online storefront. To meet GDPR requirements, the app must have granular consent options for site visitors, allowing them to choose which cookies they consent to and which ones they do not. This will help ensure compliance with the GDPR's data protection regulations and provide greater transparency and control for users, thus building trust.
2. Design an optimized default cookie consent banner that will maximize opt-in rates and ensure users are provided with clear and informed choices while also ensuring that merchants can continue to collect important 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.
Add granular consent options to the banner.
Add banner customization tools.
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 designed multiple banner variations, each containing adjustments to content, colors, and position. The goal was to find out which variation would receive the most opt-ins and, thus, improve upon Shopify's previous cookie consent banner.
In a team effort, we utilized a multivariate testing technique, a form of A/B testing, while working with live Shopify merchant storefronts. This approach involved pairing successful tests with variants in a progressive manner, ultimately resulting in 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 set out to design this app for the Shopify app store, a discussion arose as to whether the app's design should prioritize an intuitive user experience or consistent UI patterns; Is it more important for all Shopify apps to look and feel similar, or should the design of each app prioritize a user-friendly experience?
Post-launch iteration
Address storefront element 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