Adding tipping to Gumroad’s checkout page

Have you ever revisited a company after a few years and been astounded by its evolution? That's how I felt about Gumroad. They’ve become profitable, operate with a laser-focused mission to help creators earn more, and are incredibly transparent—even publishing their board meetings on YouTube. Their latest meeting (check it out here) is a treasure trove of insights about their culture, mission, and roadmap.

As a designer and avid problem-solver, I was excited about their latest big feature: an automatically added tipping function at checkout to help creators earn even more. I had to give it a shot, and this case study delves into my process. Note that I’m not affiliated with Gumroad; these are my thoughts and processes.

Scoping the Work

On a fresh Figma page, I started with a scoping section to clarify the project: what I’m designing, why it matters, what's in and out of scope, key requirements, and use cases. This clarity upfront is crucial—it defines the rules of the game and ensures anyone who might take a look at the work is on the same page. It also helps external reviewers understand the context without any guesswork.

Researching Best Practices

Given the scope excluded user profiling and interviews, I focused on desk research to maximize quality with minimal time investment. This approach can come handy for adapting textbook UX/UI practices to the fast-paced environment of agile startups. I researched relevant tipping solutions from companies like Galaxus, BuyMeaCoffee, Ko-Fi, Uber, and Deliveroo. Each had unique approaches to tipping, from toggles to visual cues, and fixed amounts to percentages.

Understanding Gumroad’s UI

Since this was my first time designing for Gumroad, I familiarized myself with their design system. I visited the live website and took screenshots of components that could fit the new feature. Reusing components helps with UI consistency and faster implementation.

For the tipping icon, I used Noun Project to find a suitable design, opting for speed over creating one from scratch. However, for an actual feature to be developed later by engineers, I’d design a custom icon.

First Iteration

The first iteration presented tipping as a new product item in the checkout—a simple and elegant solution requiring minimal development. The “configure” button opens a modal with tipping options: preset coffee amounts and a custom field, all using existing UI components. To speed up the design process, I used the html.to.design Chrome extension and Figma plugin by ‹div›RIOTS, despite the extra layer cleanup required.

I considered various use cases, such as customers adding products from multiple creators who activated tipping. Here, a coffee product appeared as a new line item for each creator.

I even got feedback from Gumroad’s CEO, Sahil: “I think it’s really solid. I like the business logic you incorporated. The one worry I have is that customers should notice that tipping has automatically been added - would they accidentally checkout without knowing?”

Second Iteration

Sahil had a point. So I made additional iterations:

1. Minimum changes: I altered the coffee image shape to differentiate it from other products and ensured coffee items were displayed above the “subtotal” section.

2. Differentiated approach: I introduced a toggle design to distinguish tipping from other products, with a clear invitation to opt-out. Customers could choose from preset amounts or enter a custom amount. For multiple creators, toggles stacked above the subtotal section.

Conclusion

This project was fun! And the feature itself has the potential to boost the income of countless creators. Using tech for good has always been a passion of mine, so this is cool.

I also love how this feature can be implemented efficiently, squeezing maximum value from lean resources. Plus, I find merging two established functions (checkout and tipping) into one seamless experience quite innovative and interesting.

Will this feature be built, in some shape or form? I believe so. Will it be a hit? Only time will tell. Testing with real users, especially if done super effectively would definitely help with the outcome. I’m a big fan of the testing approach described by Guillaume Boniface-Chang, Synthesia’s head of product. But I have a feeling that success or failure here won’t deter Gumroad’s relentless drive to empower creators ✌️.

I would love to know your thoughts about this article. For questions, comments or chat, please reach out!