New contribute/join page in the Bitcoin Design Community

Design Lounge Communication and collaboration
1

I’d love to get some feedback on our new contribute page. Next to the home page, it is probably a primary entry point into the community for newcomers to find their way around and take first steps. This new version is much more guided, splitting involvement by milestones that people can follow if they’d like. Goal is to make it less overwhelming and signal that all kinds of involvement are great, and what those might look like. We also renamed it to “Join”, from “Contribute”, so people don’t feel pressure to step into something demanding. Those were our intentions, what do you make of the output? Here’s the link once more.

Thanks in advance.

1 Like
2

Overall impression

Both the site itself and the linked pages leave me with a very positive, professional impression! In terms of design activities, this is among the best open-source project sites I have seen so far. The content and graphic design appear very well-thought-out.

Whether I, as a new, interested, potential contributor, feel addressed to participate here, I can answer in the affirmative. There are projects and all kinds of activities that I can participate in, and I have the impression that I am welcomed by an active community and supported in my first steps.

In the following, I will address things that I noticed when having a closer look at the website. It may seem very extensive, as I work quite thoroughly, but it doesn’t change the positive overall impression. Besides, the intensive work with the site has also given me valuable learning effects in terms of design - thank you for that.

Content

The text appeals to me. It is clearly structured. The organization of the text into milestones leads the reader through a red thread from the first steps to the establishment of an economic existence in this industry. The descriptions are extensive. That seems honest to me; on the other hand, I feel slightly overwhelmed. The sentence “No pressure making it all the way to milestone 7.” has a relieving and motivating effect after all the extensive descriptions.

At first glance, I hardly notice any linguistic shortcomings.

I particularly like the detail (new to me) with the # behind the headings. When you click on it, the text scrolls up so that the heading is at the top of the screen. This helps me to read the text in one go.

You could change the following passages if you wanted to:

  • As the text is very long overall:
    • Indicate estimated reading time at the beginning.
    • Include a table of contents at the beginning.
  • Milestone 1:
    • Discord: since you linked an invitation, it would be clearer if you also linked the word “join”.
    • The graphics in the list only make sense to me for the first bullet point. It is good that the waving hand is repeated here in the thematically related first menu item in the welcome message on the Discord server - this creates a connection and helps with orientation and realization of the desired task. I must think about the other graphics before the bullet points. What does a carrot have to do with a current task? Overall, I would therefore prefer to omit the graphics.
    • The second half of the text (“Then go ahead…”) fits more into the second milestone in terms of content (“browse channels” is, in my opinion, an explorative activity).
    • Nostr: Despite some social media knowledge, I’ve never heard of this before, and the name seems difficult to pronounce. When I click on it, the page is called “nosta” (instead of Nostr) - that confuses me even more. To create more trust, a short explanation on your site about what Nostr is could help.
  • Milestone 2:
    • Could be subdivided with headings, especially if part of the first milestone is moved there, e.g.: “Learn about Bitcoin Design”, “Gain practical experience”.
    • “Review the Discord channels in the ‘Community projects’ and ‘Collaborations’ channels for even more projects”: Can this also be linked like the other Discord channels?
  • Milestones 4, 7 and following sections: Microsoft Word and LanguageTool (www.languagetool.org) note some minor editorial errors. I have summarized them in a Word document and would like to give them to you. What format would you like it in?
  • Milestone 5: “There might be a project that you are interested in working on that requires a heavy investment of time and energy, and whose outcome would be a great benefit to the community.” - Very long sentence that I had to read twice to understand. Perhaps it could be reworded in a more elegant and comprehensible way.
  • Milestone 7:
    • First paragraph, end “Congrats.” - here you could express more enthusiasm and empathy with an exclamation mark.
    • The Opensource.guide site seems to me to be a really valuable site for anyone who wants to get into OSS development. At last, someone is bringing it all together in one central place!
    • Link to the book “Working in Public…”: I wouldn’t just link to the German Amazon page here. Amazon has been criticized for various ethical reasons, and this can be a deterrent for people with ethical attitudes. For international, free access to knowledge and to give other retailers a chance, I suggest linking to the Wikipedia book search: Book sources - Wikipedia. Another option would be a (labelled) affiliate link to a bookseller’s international site.

Fonts

The font used (Inter) is easy and fluid to read.
The font remains the same on most of the linked pages of Bitcoin Design, which creates a familiarity. Only your linked page https://bitcoindesignfoundation.org/ uses the distinctive “Space Grotesk” font, which at first seems a little unfamiliar and bulky to me when navigating and reading. On the other hand, both fonts (Inter Sans and Space Grotesk) are sans fonts that can be paired in principle. I’m not quite sure whether one should think of something like that, or whether that’s thinking too far ahead.

Graphics

  • The graphics look professional throughout and speak a common graphic language.
  • Before the individual text sections: For me, the reference to the headline was not always immediately clear and only became apparent after reading the section.
  • In the footer, I don’t quite understand what the round sign with the Bitcoin symbol is supposed to be - probably a coin. At first, I thought it was a stamp, but that didn’t make sense to me.

Navigation

  • All links work - good!
  • Visited links are not marked separately, so that I sometimes wondered while browsing whether I had already visited the respective link.
  • At milestone 1 I had some hassle after clicking the Discord link, as Discord presented a login window to me. Well, I thought that for test purposes I’d rather use another account, so I registered, confirmed this and that, played captcha games and so on. This broke the task flow heavily. Luckily, your page opened the Discord thing in another browser tab, so I could return to the context.
  • The repetition of the menu entries (Guide, Join, …) from the header in the footer initially confused me. Perhaps they could be omitted. If you want to keep them, you should highlight the current page (Join) as in the header to achieve a consistent display with the menu bar in the header.
  • If you want, you can also add external links to your pages at Nostr and BitcoinTV in the footer.
  • Are the name “Twitter” and the icon with the blue bird still relevant after Twitter’s rebranding to X? X is occasionally already used for backlinks (Unicode U+1D54F).

Accessibility

  • Milestones 1 and 2: The graphics appear very small and are therefore difficult to recognize. The flash in milestone 2 (“leaving a :zap: reply”) is also barely distinguishable from the white background in terms of colour. Perhaps a different background should be chosen here. The voice output reads out here: Sign for heavy current - this does not fit into the context of a financial application. Is the symbol necessary for understanding?
  • The graphics at the beginning of each section have an empty alt tag. Is this intentional because they are intended as decorative images?
  • All the graphics on the page lack a tooltip. I don’t know whether this is intentional (because they are perhaps decorative?).
  • The search icon in the header can also be misunderstood as a page zoom icon and may have a different meaning in cultures other than Western ones. Due to its graphic design, it only displays its tooltip in rare cases (=when the mouse pointer is exactly on the thin line). The “Search” task is important, so I would rather add the text “Search” here.
  • Header, links, footer: The colour contrast of the orange font to the background is too low to meet the WCAG AA and AAA levels. Chrome’s built-in Lighthouse makes a few suggestions for darker colours, but perhaps you have a more suitable brand colour.
  • The navigation with the Tab key works very well for the header and the page content. In the footer, you can’t go directly from the Bitcoin thingy in the reading direction to the right to the external pages (Discord etc.), but first to “Edit this page” and “Licence”.
  • I think it’s good that the website is responsive. It is easy to read both on a desktop and on a smartphone.
  • I wondered whether the website should also be displayed with a dark background in the evening according to the system theme, such as GitHub. On the other hand, I find it easier to read with a light background.

Other findings

Discord

Firstly, I like the cute graphics and Christoph’s welcome message. They add to the warm, positive impression I mentioned above.

Bitcoin Design Foundation website

The font “Space Grotesk” only shows properly when JavaScript is enabled. Otherwise, one sees a fallback font.

Translated using DeepL.com

3

Thanks Sven! for the extensive reply and for taking your time to provide valuable feedback.

The feedback has been shared in the community and would be useful as we continue to iterate on the contribute page and the website as a whole.

One question? did you have time to take on the milestones, maybe drop by in the community so we could zap you (send some bitcoin over discord) and benefit from your design expertise.

5

Hi @Utidon,

thank you for your lines, and I am glad I could help.
The reviewed site also raised my interest, so I‘d like to drop by to one of your next meetings and say hello. When and where would that be?
I‘m interested in exchanging thoughts and experiences in human-centered design.

6

We’d be happy to have you join. We have quite a few different types of calls. Some are more project-specific, some are more topical. To give you a few options for upcoming ones:

Most calls are recorded and uploaded to the community YouTube channel, like this recent design review and project kick-off.

We also have a calendar with these calls, and Discord has a handy Events tab that lists them as well.

Hope to see you sometime.

7

Now let me also try to respond to your feedback (big thanks again). It’s so detailed, that I don’t think I should reply to everything. Overall, it sounds like the page works well, and that there’s mostly polish left, which is a great spot to be in. You have lots of valid points that I’d like to split into 4 separate groups (spelling & grammar, content, general site tweaks, Discord onboarding), and then implement them one by one.

I’ll just try to respond to some of the questions.

  • Nostr is a decentralized social-networking protocol that bitcoiners came up with and love. It’s not owned by anyone, run by the community, and has great bitcoin integration. It’s still very early in its life and has to prove its place in the world. But it’s also super fun and fresh compared to our social media corporate overlords. Primal is a great client if you’d like to try it.

  • The images are intentionally playful and decorative (therefore the “” alt texts). They break up the text and set a more casual tone. I think that when you’re in a functional part of an application, everything should have a purpose and communicate. But for an intro page like this one, we can take some creative freedoms (see the Starbucks expression scale).

  • For the Word document with editorial feedback, is it possible to share PDFs right here in the forum?

  • The community and foundation sites intentionally have a different look (per your comment on the fonts). They are related, but the foundation is its own entity (for a clearer governance structure).

  • The circular logo in the footer is the community seal/logo. It’s used on the home page and favicon and some other places, but I can see how it’s hard to recognize. I think it also needs a proper title tag.

  • For color contrast, we use the newer APCA model. I find the current recommendations in the WCAG standards woefully outdated. We also support the prefers-contrast CSS feature, so there is more contrast for people who enable that in their OS accessibility settings.

  • I think dark themes are great for applications, but not necessarily for visually expressive content pages. Makes it very hard to design graphics, when they have to look great both on light and dark backgrounds.

  • Discord onboarding can be a bit disorienting. Their tools for customizing it are also not super clear and keep changing. We’ll have to take another pass at it and see what we can do.

I hope I got the main questions :grinning:. I have a separate list of tweaks that I’ll address in different Github PRs, as I mentioned above.

At the bottom of your feedback it says translated using DeepL. Does that mean you write your posts in another language and have them auto-translated? If yes, is that a simple process, or do you find that you have a to still edit a lot?

Happy Wednesday :v: