Blockstack.org Update

Work in progress update for Blockstack.org. We’ve been rethinking it specifically for new developers who are considering building on Blockstack. We did a couple rounds of user testing already with new-ish members of the community.

Goals:
We consider this a success if new engineers:

  1. View tutorials and/or view example projects and start working with code.
  2. Understand what blockstack is and why they should build on Blockstack vs. Firebase/Other dapp platforms
  3. Understand community is strong and engage in some way: Forum, events, open PR, etc.
  4. Perceive as: open source, community driven, and technically rigorous.
  5. Join mailing list.
  6. Motivated to build on Blockstack by funding opportunities.

Why did we pick those specific dapps to showcase? They are open source. This is a site for engineers, they want to see repos.

Feedback welcome. We haven’t started building this yet, but will soon. Many evangelists and community members have helped me on this. Thanks so much! :pray:

↓ Click on the screen below and you can view the entire page top to bottom

3 Likes

Looks great!
I was wondering about the hierarchy of the information.

On first sight… from the perspective of a first time visitor… the most relevant information is the “Why build on Blockstack” part.
(The head to head comparison with Firebase is great :muscle:.)
The tutorials and example apps would follow.

I guess I would not click into a tutorial, if I haven’t understood yet on a fundamental level what kind of benefits the platform provides…
the statement in the headline that it’s “easy” and that it is a dApp would be not enough yet…

… anyways… maybe it’s just me… or do you assume that users have already a basic knowledge about Blockstack when they get to this site?

3 Likes

I interviewed 5 new developers as part of the kickoff for this project. 5/5 mentioned that they learned about Blockstack in via channels (reddit, blog roll, personal recommendation, etc) and decided to learn more. They all said “By the time I’m on your website, I already know what the project is, why it is valuable, and I’m ready to start coding.”

4 Likes

Looks awesome! Very clean and layout is clear.

A staging link to the new site: https://blockstackorgv2.netlify.com/

We are working through some remaining design changes, content updates, and bugs.

The content pages are markdown, here is a full sitemap: https://github.com/blockstack/blockstack.org/tree/feature/new-landing-pages-next

We are also redesigning the tutorials which is a separate effort.

Would appreciate feedback on content, bugs, and anything critical that is missing and should delay launch. The best way to share feedback is reply in this thread, open an issue on github, or make a change and open a PR.

Almost done. Thanks! :pray:

Awesome work to the whole team! Hopefully my thoughts for non-critical improvements are helpful!

My feedback (as a newcomer) is that you could deliver some content in shorter statements and improve the design to make it more inviting to the eyes.

In the about us for example:
Blockstack is a new internet for decentralized apps. With the Blockstack Browser, you own your data. Blockchain technology gives us privacy, security and freedom from the old Web 2.0 giants. Build the revolution one block at a time! :rofl:

Here are some different color schemes that you might consider.

Also, the bottom banner is very big. I get lost down there!

Looking forward to being involved!

The site is looking great @jeffd. My only comment is that it wasn’t immediately obvious that the 3 blocks in the hero section are tutorials. The fact that the code sample came before the title makes it harder to understand.

1 Like

What’s this unicode box character supposed to be?

Interesting catch. I wonder if can indicate they are in some lightweight way to just be very explicit. Or we could test bigger design changes in next version. cc @aulneau.id

Is it just me or are the email updates not working?

I see a “get email updates” form field but then there’s no way to submit.

I see the same problem. Also, the email field should be type="email" instead of text so that it works properly on mobile.

Agree with this.

I like the content - much more developer focused! Great work @jeffd!

Looking great :scream_cat: But the fonts you use is very unusual for Blockstack. New guidelines?

I have to be honest: I find the background color to be extremely bright, and thus harsh on the eyes. That is my .0002 cents. I like the gray and white in the existing website. Could you consider mattefying (real word?) it a bit?

The other feedback is the font. The font is ok, but combined with the bright colors, it’s alot of processing of harsh material. The font would be cool applied to the current background that is live for blockstack, but it seems like too many things competing for my attention.

Again my .0002 cents. I’m not a front end developer, so you could be basing this on some new trend I have no picked up in web design that is actually cool, and many cultures encourage bright materials on websites. I’m a minimalist when it comes to design and colors in general. Bright colors stress me out, so I am definitely biased here.

5 Likes

Just a reminder about these two open issues:

Not sure if the idea is to direct questions and general inquiries to the forum, Slack or Telegram, or if a contact page might be added later, but wanted to bring this up again.

I agree with @larry’s point about reducing the number of users contacting us via DMs, personal emails, or other contact methods and being able to provide timely responses.

The current version is good, but I think there are a lot of low hanging fruit that can make it even better. I’m a bit late here, so here’s my feedback for future versions.

tl;dr: Design: more vertical spacing between sections, fewer clickable items, some centering issues, and a clear CTA. Content: Ditch the firebase comparison, reorganize so it tells more of a story, and make it clearer what possibilities building on Blockstack enables.

Feedback:

  • Links cannot be differentiated from regular text until you hover over them (and the underline appears). Would be nice to know at a glance what is clickable.

  • All tutorials — Documentation — Github looks off center. The unit containing all three is probably centered, but it looks off because “Documentation” isn’t in the center of the page.

  • The “Blockstack” menu at the top is purple but the rest of the site is blue and white. Those colors don’t go together. Minor nit :stuck_out_tongue_winking_eye:.

  • There are lots of items on screen at once. Your eyes should be drawn to one primary thing at a time, until you scroll. Can be resolved by adding more vertical spacing between elements and maybe stronger section headers.

  • Too many clickable elements. It creates a lot of cognitive load in terms of figuring out what you want to explore next. I count 12 clickable items in one view on the above screenshot. Ideally each section should have 1 clear message and CTA (call to action).

  • The comparison with Firebase is a bit unfair, and not necessarily applicable as our market is not really “developers who want to build on firebase”. Also, for what Firebase does we can’t truly compete effectively. I’d remove this section as it feels a bit unfocused.

  • Vertical spacing seems uneven here, and the Technology Community Blockstack lists seem horizontally off center.

  • A space is needed in between “Program,and”

  • There is no clear CTA (call to action) for the whole page. Having viewed this website, nothing jumps out at me as what to do next. A [[GET STARTED]] button could easily address this.