SuperFile is a next-gen file-sharing platform built around a proprietary .super format—secure, trackable, and even revocable.
The team’s mantra says it all: “Unhackable. Trackable. Takebackable.” When I joined as Senior Product Designer, SuperFile was preparing its next milestone: enabling creators and professionals to monetize files without breaking that security promise.
The Challenge

How do you let someone sell access to a file that’s designed never to leak?

We needed a frictionless payment-locked flow one that felt as fast and transparent as normal sharing, but lived up to SuperFile’s zero-trust standards.
Our goals were clear:

  • Seamless Stripe integration that instantly unlocks files after payment

  • Unbreakable access-control logic (no payment = no decryption key)

  • One consistent experience across macOS + Web

  • Preserve “Security at speed” We didn't want a clunky detour or a force to sign up, this should feel so easy the user should be asking why isn't payment like this on every platform?

Role & Scope

My title said Senior Product Designer, but this project pushed me far beyond design.
I acted as Product Designer + Interim PM + Creative Director, bridging strategy, UX, and engineering execution. I partnered directly with the CEO, CTO, and seven engineer. I ran agile sprints, prioritizing tickets in Jira, while aligning design decisions to business goals. Every deliverable lived in Figma (for flows + UI) and Notion (for technical specs + PRD).

Approach and Solution

Start with architecture, not pixels.
Before drawing screens, I mapped the full payment event chain with our CTO: from Stripe checkout to key release inside SuperFile’s DRM system.
That diagram became the shared blueprint for design + engineering.


Designing the flow
1. File owner tags file → “Pay to Unlock” & sets a price.
2. Recipient sees the file with an indicator and tooltip saying it can be viewed only if payment was received.
3. Once the user clicks "Pay to Unlock" this triggers Stripe Checkout → payment is successful and file is instantly unlocked.


To keep parity across platforms, I proposed embedding a lightweight web view inside the macOS app so both environments reused the same Stripe flow and webhooks.


Security at Speed
To keep payments frictionless, we introduced one-click checkout for users using securely stored Stripe tokens. To maintain transparency, I added microcopy like “This file is locked , pay to instantly gain access” so users always understood what was happening behind the scenes. Finally, we extended SuperFile’s “Takebackable” promise to paid files. File owners could still revoke access even after purchase, We followed the structure framed more like a streaming rental than a permanent download. This balance preserved user trust while keeping the platform’s security values intact.

Pay to Unlock

I Approached this feature by combining UX design with technical architecture from day one. Instead of designing screens in isolation, I worked with our CTO to map the full lifecycle of a Pay to Unlock event—from checkout to file decryption—and used that flow to guide every design decision.


1. File Locking & Encryption Logic

When an owner marked a file as Pay to Unlock, it was uploaded in an encrypted state with a price tag. The file’s decryption key stayed locked on our servers until Stripe confirmed payment.
Every unlock attempt—successful or not—was tracked for the owner’s analytics, reinforcing SuperFile’s “Trackable” principle.
I documented this logic in Figma and Notion so engineering, design, and leadership shared the same blueprint for what “secure” meant in practice.


2. Payment Integration (Stripe)

We leaned on Stripe Checkout for security and familiarity. I designed a clean, branded payment modal that worked the same across the web app and macOS desktop app.
Here’s how it flowed: Click “Unlock for $” → Stripe Checkout → Payment confirmed → File instantly decrypts. To keep it fast and resilient, I outlined fallback logic for edge cases (e.g., delayed or failed webhooks). Our system automatically rechecked Stripe in the background—so the user never sat waiting on a spinning loader. That design detail, though small, made the entire experience feel instantaneous.


3. Cross-Platform Consistency (Mac + Web)

One of the hardest parts was ensuring identical behavior between macOS and the browser. I collaborated with engineers to embed a lightweight web view inside the Mac app, allowing us to reuse the same Stripe flow. After payment, a callback unlocked the file locally—no sync issues, no lag. Visually, both platforms mirrored each other: locked thumbnails with price tags, identical payment modals, and a smooth transition from “locked” to “streaming.”
To keep alignment, I maintained a single-source flow diagram in Figma showing every state and transition across both apps.


4. Security at Speed

To reduce friction for repeat users, we added one-click pay using secure Stripe customer tokens.


I also crafted transparent microcopy like “This file is locked—pay to instantly access” to help users trust what was happening behind the scenes.
If anything failed—payment canceled, webhook delay—the UI responded clearly with retry options and friendly explanations. We extended this clarity to ownership logic too. The Unshare / Takeback feature still worked even after purchase, designed as a temporary license—like a streaming rental rather than permanent ownership.


That balance preserved SuperFile’s “Takebackable” integrity while keeping users’ expectations clear and fair.

Collaboration & Tools

Building Pay-to-Unlock was a cross-functional effort, and I facilitated it using a trio of tools – Figma, Notion, and Jira – to keep everyone aligned:


Figma (Design): I used Figma not only for high-fidelity UI designs but also for journey mapping. I constructed an interactive prototype of the entire pay to unlock flow, which we could test internally and even demo to stakeholders. This prototype covered the flow on both the web app and macOS app screens. By visually mapping each step, I helped the engineering team and CEO see how the pieces would come together. It also allowed us to do quick usability tests with a handful of beta users, whose feedback I gathered and iterated on (for example, clarifying the wording on the payment button).


Notion (Documentation): Given the technical nuance, I maintained a detailed Product Requirements Document (PRD) in Notion. This included the user stories, acceptance criteria for the feature, flow charts with embedded Figma frames, and technical notes (e.g. how the Stripe API and our backend interact). I also kept a section for edge cases and FAQs (like “What if a user forwards a pay to unlock link to someone else?”) to ensure we had answers or solutions ready. This Notion doc became the single source of truth that I shared with engineers and even new team members to get them up to speed. It also recorded decisions made during the project, which was helpful when the company underwent a pivot and we revisited certain assumptions.


Jira (Project Management): Acting in a product manager capacity, I broke the project into Jira tickets across front-end, back-end, and design. I ran sprint plannings where we prioritized the Pay to Unlock feature development, balancing it against other roadmap items. Using Jira, I made sure that when design was finalized for a sub-component (say, the “locked file” thumbnail state), a corresponding development ticket was updated with the Figma link and any specs. I regularly tracked progress, and if devs hit blockers (for example, a tricky Mac app integration issue), I was quick to convene problem-solving sessions. By managing these tasks, I kept the project on schedule we aimed to launch the feature in our next beta release and succeeded.


Collaboration was also person-to-person: I worked hand-in-hand with our CEO to ensure the feature aligned with the startup’s business strategy (monetization was a key revenue idea). This meant presenting him with options (e.g., different pricing model ideas, or how the user experience might affect adoption) and incorporating his feedback quickly. I also coordinated with the Stripe partnership team (through our developer contacts) to make sure we followed best practices for secure payments. Our small team’s daily stand ups often turned into mini-design reviews or brainstorming sessions, and I embraced those, making sure engineering and design perspectives were both heard as we refined the solution.

Outcome

The Pay to Unlock feature launched as part of SuperFile’s beta release and was a cornerstone capability that set us apart from generic file sharing services. We successfully integrated a commerce model into a security focused product without degrading user experience in fact, early beta feedback highlighted that the unlock process felt “surprisingly simple for something so secure.” The feature enabled SuperFile to start generating revenue streams for content, and it became a talking point in sales demos (especially for creators looking for new monetization channels and enterprises looking for secure client billing solutions).


Internally, this project also had lasting impacts. It established a more user-centric, design-driven development culture at the company – a shift from the earlier engineering led approach. By spearheading a cross functional initiative, I helped the team experience firsthand how thoughtful UX planning and technical collaboration can produce a complex feature in a short time frame. The CEO and CTO used the Pay to Unlock architecture and documentation as a template for future features that required similar coordination between product, design, and engineering.


Pay-to-Unlock exemplified my ability to lead end-to-end product design: from strategic conception, through meticulous UX design and technical planning, to agile execution and iteration. The result was a feature that not only met SuperFile’s high bar for security and control, but also introduced a new, innovative value proposition to the product – all delivered with the clarity, speed, and confidence that define my approach as a product designer.