Design challenges
Looking for a way to improve your bitcoin design chops? We put together a series of design challenges that you can independently work on and should not take longer than 4-6 hours. Each task focuses on a user experience that is unique to bitcoin.
Challenge 1: First use
Alice paid for Bob’s lunch. Bob wants to pay Alice back in bitcoin, but she has never used bitcoin before. Alice has now installed a Bitcoin wallet application and wants to set it up and share a bitcoin address with Bob. Create a low-fidelity interaction flow that guides Alice through wallet setup and receiving the bitcoin from Bob.
Challenge 2: Lightning tip jar
This challenge is based on a bounty by the Human Rights Foundation. Here’s the task:
Integrates BOLT 12 functionality to a wallet so that any user can simply generate a QR code from their wallet that can be shared with the world as a receive address or lightning tip jar. The QR can be pinned to a Twitter profile, printed out and displayed in a store, for example. Senders scanning the QR should be able to pay X amount and that amount should arrive in the user’s self-custodial wallet. The QR code should not reveal the public key or IP address of the user.
Challenge 3: Bitcoin ATM
A student recently received €200 in cash as a birthday gift from a family member. The student downloaded a wallet on their mobile device and now wishes to use the funds to purchase bitcoin quickly and securely using an ATM. Create a low-fidelity interaction flow for the wallet and ATM that guides the user through the bitcoin purchase.
Challenge 4: Gift card
Bob has been gifted a $100 bitcoin gift card for his birthday and wants to redeem it in a bitcoin mobile wallet. Create a low-fidelity interaction flow that helps Bob redeem his gift card.
Challenge 5: Allowance
Bob Jr wants to receive his weekly allowance in bitcoin. Design a low-fidelity app with flows that lets him share a request for allowance with his parents, who may or may not have a bitcoin wallet.
Challenge 6: Private purchase
Bob wants to buy an engagement ring to surprise Alice. He has to pay on-chain because it’s a large expense. Alice recently sent him sats, so she has a view into the sats in Bob’s wallet. Design a low-fidelity flow Bob might follow to spend his sats using PayJoin. In contrast to a naïve transaction, thanks to PayJoin, even if Alice sees the resulting transaction on-chain she won’t be able to discern whether it is a small transfer, output consolidation, or the large purchase that would spoil the surprise.
Get started with these design-oriented notes. For more details, check out the bitcoin design call, FigJam File with in-call notes, mention this challenge in slack or email d at ngould dot dev for help.
Tips
It is completely up to you to decide how you want to go about each challenge. If you’d like a few starting points, we gathered some tips for you:
- Clearly articulate the user goals and tasks that must be supported in the UI, as well as how you would guide users through the process to help them achieve their objectives.
- Include wireframes that show how users would progress from the start to achieving their goals. What are alternate approaches and solutions?
- What requirements and assumptions do you have in mind for your design? What are the design tradeoffs you’re making, and why?
- Communicate the design and thought process. The methodology and workflow is as important as the finished product.
- Bring in your own personal touch. Find a way to make your challenge unique. If you’d like, share your challenge with the community, we’re always curious to see new approaches.
General resources
The Bitcoin Design Guide is a free and open resource aimed at helping product designers and developers build better, more user-focused bitcoin applications. You will find many useful design tips and best practices in the guide.
The Bitcoin UI Kit is a file for the Figma design tool that includes a full design system (colors, typographics, icons, UI components, etc). You can use this as a starting point for your wireframes and mock-ups.
Thanks to Yackni for posting his challenge and kicking off what lead to this page.
Now let’s look at how to contribute to the guide.