BitcoinDesign
Bitcoin UI Gallery
Lots of us take plenty of screenshots as we try out different bitcoin applications. We've also taken many of them for accessibility testing, design reviews, etc. They are a great reference when exploring design solutions. The idea of gathering them in a Bitcoin UI Gallery has come up various times over the past years, and Sanya even worked on a design during the Summer of Bitcoin project in 2024 (presentation recording). Mobbin and PageFlows have also become great references at times.
I also have folders and Figma files of screenshots that I reference. But I have so far stayed away from working on this idea, because the maintenance overhead could be quite big. Luckily, this has gotten a lot better with AI. I set up a basic site and used AI to:
- Analyze screenshots and describe them
- Rename files accordingly
- Gather titles and names in a well-organized JSON object
- Analyze and identify user flows tags and enrich the file
- Find relevant references to the Bitcoin Design Guide and add them in as well
That worked out great. What otherwise would have been a lot of tedious work is now a breeze. So that removes a big hurdle for me from acting on this idea.
You can check it out here, and the code here.
The site organizes screenshots by project. Within a project are user flows that bundle some of the screenshots into sequences with additional information. And each screenshot can have its own tags, links, and annotations.
I added screens of Muun, Phoenix, and OKX, since I had those easily available. I would very much rely on the community to provide more screens.
But before going further, what do you think of this? Please take a look and let me know.
Fun exploration, and cool use of AI to make the execution feasible.
I really like this Christoph and think it's worth further exploration
A few brainstorm-ey thoughts:
- might be interesting to have a bit of human editorial commentary (like "Particularly like how they treated the receive screen, XYZ is very intuitive etc etc"). should each screen have a comment thread?
- it's cool that it links out to the BDG, i wonder if links in the other direction would be interesting or useful? eg from the BDG can click to see what something looks like in real wallets
- landing page experience is a bit overwhelming right now, maybe user should first select a wallet to view of a particular screen type #mainscreen or similar
- it would be cool if it was easier to compare a particular screen across all wallets: how would i quickly see the receive screen for all wallets? right now when i pivot on a particular tag i get all instances of that tag for each wallet, but really i might just want the one/best canonical representation of that screen for each wallet to see how they all stack up. quite useful for some quick competitive recon to see how all other wallets do things.
- thinking about how to give this some visibility, should consider if/how people can take this to social media. i see it already supports deep-linking to a screen. wonder if people would link to screens like this?
- it's a lot of work to capture all the screenshots for each wallet (i did this back in the day for phoenix) i wonder if there are any tools available to make that easier?
- as helpful as AI has been to pull this together, there's still a maintainabiliy problem as apps get updated individual screens will change, all screens may change in one fell swoop. i wonder how to handle that & versioning in a sane way (both for maintenance and for usability of exploring different versions of apps)
Thank you for putting this idea together Christoph
Some ideas and thoughts:
- Having spoken to some builders when doing the Bitcoin Design Guide interviews, many of them said that researching what other wallets are doing was an essential part of the process and so this is an asset to them.
- Maintenance. I only wonder how you woul view maintaining such a batch of screenshots as the wallets would change (same comment as Mat). Perhaps once every 6 months?
- Zoom out: How can we show them that first there is the onboarding then recovery set up, then the user arrives at the homescreen. A slightly more zoomed out approach. Perhaps a super simple solution to that is adding a higher level label, so two layers of labelling to the screens. But visually the higher level label of whether its onboarding etc takes more visual hierarchy. Here in image below there are rows of all the screens for Muun, an add on would be adding a more bold heading to each of the rows here, so when you click on Muun and view all the screens one can see the logical sequence of the screens and also under which section of the user flow they are.
- Comparison: +1 on Mats suggestion to see screen comparisons
Thanks for your input. To your points about maintenance and content freshness, as usual, this only works if people like you and I and others in the community regularly chip in and take ownership. And I would not have any expectation for this to be super complete and have all apps and versions, always up-to-date etc. If enough people chip in, sure, that'd be great. But I don't think it has to have all those things in order to be useful. Good enough and done is better than a perfect dream.