Redesign marketing page

[markmhendrickson]

https://blockstack.org/wallet/

Ideas:

• Move to stackstoken.com/wallet with permanent redirect from old URL
• Apply visual design from stackstoken.com / design system
• Clean up UI generally
• Update description to indicate that the wallet empowers STX delivery and receipt, has read-only and hardware modes with support for Trezor and Ledger, and provides address overview information such as balance as well as transaction history
• Add feature highlight sections with screenshots

[markmhendrickson]

Some initial notes on the first designs by @aulneau:

• I like the second, horizontally symmetrical version best since it feels more balanced and can adapt to mobile more easily
• I also like how that version has no navigation but rather just a GitHub ear tab. That feels more efficient and priority-focused to me.
• I might suggest just auto-detecting the device (mac or windows) and providing the single "Download the Wallet" button up top but name it to be device-specific like "Download for Mac", and right below that button in the hero, show the Hash and a blurb about using it. That way you can get rid of the whole download section below.
• I'd remove the "Features" button in the hero, too, in favor of just letting the user scroll to that section. There's no enough information on this page to get lost.
• Do we want to use the term "Blockstack Network"? Perhaps @moxiegirl has the best idea of what terminology we've gelled around as a team. Perhaps it'd be best to avoid the mention of a blockchain or network at all and just say "Easily manage, send and receive STX tokens with the Stacks Wallet"
• Similar point for the features section – should we say "Stacks Blockchain" or "Blockstack activity", etc. It'd be very helpful to see actual content here since it appears half filler at the moment?

cc @jeffdomke @yknl @lizblockstack @moxiegirl Want to provide some async feedback here as well? We can also do a quick round-robin during the stand-up today.

[lizblockstack]

• Prefer that asymm version on the left, but understand if we go with the other because it looks better on mobile (To that point, why would anyone view this on mobile? they can't download the wallet on mobile anyway, right?)
• What does the Developer button in top right link to? Same with features?
• Is it possible to show the Check Allocation bullet on the left version as well?
• What do you think about adding a Mini Roadmap for the wallet? How do we expect users to use the wallet in the future? What are the capabilities that we will build out?
• This list comes from Coinbase Wallet:

• With Coinbase Wallet, you have the ability to:
• Manage ETH and all your ERC-20 tokens (very soon we’ll be supporting BTC, BCH and LTC).
• Receive airdrops and ICO tokens.
• Buy and store crypto collectibles — non-fungible tokens that are unique — and use them in games, or trade them on marketplaces.
• Send payments to anyone anywhere, without geographical borders or fees.
• Access leading decentralized exchanges and relayers to buy and sell tokens.
• Explore the full universe of third party dapps that enable everything from taking out a loan or lending to others on the blockchain to earning crypto by answering questions, performing services, or completing tasks.

Also, I like how Coinbase's footer is really simple: Join the community (1 CTA)

[markmhendrickson]

@aulneau Let's be sure to link to @moxiegirl's new documentation somewhere from this page: http://overwrought-fear.surge.sh/org/wallet-intro.html

[aulneau]

Do we want to use the term "Blockstack Network"? Perhaps @moxiegirl has the best idea of what terminology we've gelled around as a team. Perhaps it'd be best to avoid the mention of a blockchain or network at all and just say "Easily manage, send and receive STX tokens with the Stacks Wallet"

The current headline is reflective of what is currently on stackstoken.com: Token for the Blockstack Network

What do you think about adding a Mini Roadmap for the wallet? How do we expect users to use the wallet in the future? What are the capabilities that we will build out?

I think that's a great idea!

Is it possible to show the Check Allocation bullet on the left version as well?

sure!

What does the Developer button in top right link to? Same with features?

Just goes to github, I think labeling it as 'GitHub' vs an icon or developers makes most sense like Jeff suggested.

I might suggest just auto-detecting the device (mac or windows) and providing the single "Download the Wallet" button up top but name it to be device-specific like "Download for Mac", and right below that button in the hero, show the Hash and a blurb about using it. That way you can get rid of the whole download section below.

I like that! I think as Jeff mentioned, we probably can accommodate everything we want in a single section.

I'd remove the "Features" button in the hero, too, in favor of just letting the user scroll to that section. There's no enough information on this page to get lost.

Yeah agreed.

Similar point for the features section – should we say "Stacks Blockchain" or "Blockstack activity", etc. It'd be very helpful to see actual content here since it appears half filler at the moment?

I just put those sections in as filler, I think the real work is trying to define a roadmap and features we want to highlight.

[markmhendrickson]

@aulneau Want to take a stab at filling in the features for that section or have me or @moxiegirl draft it up? I'm happy to have any of us take it on.

[aulneau]

@markmhx it'd be great if you or @moxiegirl could! Thanks!

[markmhendrickson]

@moxiegirl is on it 💪🏻

[moxiegirl]

@markmhx @lizblockstack @aulneau the roadmap would be cool on this marketing page. Do we have an idea of the progression if not the actual dates for the roadmap? Also, should we include a pitch to developers who might want to build a Stacks wallet (we've got the link to GitHub).

[markmhendrickson]

I think we ought to focus on highlighting current wallet features in this section instead of forecasting future ones a la roadmap. The need we have here is to communicate clearly what the user will "get" before they download the app and invest time in using it.

I also don't see much of a business purpose here to pitching developers on building their own Stacks wallet. They'll be able to fork the repo should they please, but we don't have any particular need to motivate that behavior.

[moxiegirl]

@markmhx No roadmap. No pitch. Got it.

[moxiegirl]

@markmhx I took a look at what other wallets were doing. Then I created a page. It is in the folder.

https://paper.dropbox.com/doc/Wallet-Marketing-Page--ATjML2hH502xkHMIs378vrd~AQ-weJgA2kgn0LyTMQwE5tT9

The other wallets don't send a lot of time on long explanations...basically bullets with pictures. So, I kept it short.

[markmhendrickson]

@moxiegirl Great, I've responded in that Paper document with feedback. Please post the finalized feature copy here as a comment once we've reviewed versions and gotten them ready so @aulneau can integrate.

[markmhendrickson]

@aulneau The staged site looks generally good. Here are my QA notes, which I presume are best to handle in this issue instead of splitting out separate issues at this point:

Needed for launch

• [x] Download buttons don't work
• [x] On mobile devices, I would show the GitHub option but not in place of the download buttons. Instead, I would put guidance there for "Mobile devices are not yet supported. Visit this page on your Mac or Windows device to download" in a clear way. Currently, a mobile visitor will be confused how they can download.
• [x] We should link to @moxiegirl's documentation somewhere as a visible "Learn how to use the Stacks Wallet" kind of option

Nice-to-haves for launch

• [ ] Isn't it important to provide hashes to verify the downloads?
• [x] The left and right body padding seems quite minimal. Should we increase? (see screenshot)
• [x] Padding between two columns seems tight on narrower viewports. Should we increase? (see screenshot)
• [x] The "Alone can be used to check allocations..." feature seems awkwardly worded to me. Why not just "Check allocations, balances and transaction history"?
• [x] I suggest we use user agent detection to determine the CTA (e.g. Mac download, Windows download or view on GitHub) not the viewport width, as it currently stands. Mac and Window users may open the page up in a small viewport.
• [x] Also, I would add the GitHub option somewhere to wider viewports at least since that's desirable on desktop computers, not just mobile.
• [x] Do we not want to use the Blockstack gem next to "Stacks Wallet"? I feel that helps with branding and situating the user.
• [x] It feels as though we should have a footer to anchor the user's trust that this is a Blockstack product, beyond looking at the URL.

[aulneau]

Download buttons don't work

It was my intention that the download buttons go directly to the releases tab on the wallet github. The advantage of this is that we won't need to redeploy this site each time we make a release (like blockstack.org)

Additionally, I think we should just include the hashes there, along with the links to docs on how to verify them.

On mobile devices, I would show the GitHub option but not in place of the download buttons. Instead, I would put guidance there for "Mobile devices are not yet supported. Visit this page on your Mac or Windows device to download" in a clear way. Currently, a mobile visitor will be confused how they can download.

Yeah, I think that makes sense, I also think we should still get to github

We should link to @moxiegirl's documentation somewhere as a visible "Learn how to use the Stacks Wallet" kind of option

If we use the useragent to show one button, we can use the space to show the docs as a link/button.

Isn't it important to provide hashes to verify the downloads?

They should be in the github releases section, see above.

Everything else makes sense, will work on them :)

[moxiegirl]

It was my intention that the download buttons go directly to the releases tab on the wallet github. The advantage of this is that we won't need to redeploy this site each time we make a release (like blockstack.org)

Going to github is going to confuse people who are not computer savvy. Given this is going to investors who pretty much aren't savvy and have downloaded under the old experience. I think you might get more support questions.

Also, I'll need to rewrite installation for this change, so if you want to do this, I'll need a version with working downloads to test and get the description correct.

While personally, I like the rolling scroll it is hard to see. Most people are just going to click the button and not wait for the roll.

[aulneau]

Here is the updated version:

Going to github is going to confuse people who are not computer savvy. Given this is going to investors who pretty much aren't savvy and have downloaded under the old experience. I think you might get more support questions.

The process I have implemented is:

• user downloads via wallet.blockstack.org download button
  • this will be dynamic based off of their operating system
• user will be able to click See all versions and be directed to the releases page which will contain the hashes for the latest release
  • to address the issue of if the user downloads an older version, we can direct them to check their version in the application itself.
  • I also think the issue of 'updates' has not really been discussed. How do we want to alert users in app that there is a new version available? Do we want an auto update function?
• the documentation should link to the releases page and instruct the user to get the hash for their version of the app, and then verify it via the process already outlined.
• I don't think it needs to be a required step to verify the hash

[aulneau]

While personally, I like the rolling scroll it is hard to see. Most people are just going to click the button and not wait for the roll.

I don't know if most people will, but some will miss it for sure. We can rethink this page if we want to after the holidays. 👍