Designing for the blockchain: launching an ethereum smart contract app

My experience as a Product Designer climbing the blockchain learning curve and designing PrimaBlock, an open-source app for investors on the ethereum smart contract network.

How did I end up designing a blockchain product?

Early this year, I joined the ranks of blockchain early adopters, primarily as an investor but also as a student of the technology. With the launching of this product, PrimaBlock, and the publishing of this post, I’m now a proud evangelist :) Like many, I had been hearing about “bitcoin” for a few years and I read a super interesting long-form article on Silk Road but I never dug deeper. My friend Henok Tekle of ~10 years has had tremendous success as a blockchain investor, first trading cryptocurrencies and later investing in ICO’s. He invited me to the party by including me in his ever-growing global group of investors who share intel and deal flow.

Only a few weeks after immersing myself in this still niche field, I reeled in one of my fellow American expats here in Stockholm, Tamir Sen. After our first few group deals, we noticed so many pain points in the workflow that could be relieved with a tailored product. We shot ideas back and forth at the gym a few times but never made plans to build anything. Tamir happens to be a rockstar backend developer, and one day he messaged me that he started developing a smart contract solution. Another investor, who also happens to be a brilliant developer, Mickaël Fourgeaud, offered to join our team. Suddenly, I found myself working non-stop to create this product.

What is the blockchain and how do we invest in it?

To be clear, I’m a newbie, but I want to give a super brief overview to readers who are newer than I am to this space.

The blockchain is a decentralized, transparent, distributed, pseudonymous ledger. This means that it records transactions and everything it records can’t be changed, reversed, controlled (by a central authority), or forged. The database is permanent and anyone can look up any transaction that was ever executed.

There are so many applications of this technology, including cryptocurrencies like bitcoin and ethereum. Many are being built as we speak- this is where the investment opportunities arise. Startups building blockchain applications will raise funds via an ICO (Initial Coin Offering) just like a traditional startup will raise funds from angel investors. However, the ICO receives payment in ethereum (ETH) instead of fiat ($, £, SEK). The ICO grants tokens instead of shares. The tokens are built on the ethereum protocol, which is why ICO investors invest with ethereum instead of bitcoin. Ethereum is much more programmable and includes the ability to create smart contracts, which is how my product, PrimaBlock, was built. ICO’s have in total raised $1.3B in 2017 so far. That’s not a typo! It’s a massive market but includes a lot of speculation.

I am an advocate of blockchain technology so I wanted to use their skills, knowledge and passion to facilitate its evolution. Here is how I designed my first product -

The problem: workflow pain points

Workflow without our product

The biggest pain points are that the pool creator/organizer must:

  • Create a spreadsheet to keep track of all contributions so that 1) she can divide the tokens and ensure that she sends the accurate amount to each contributor, and 2) match up contribution addresses with a white list if that pool requires preselected addresses,
  • Distribute tokens manually to each contributor. This is a painstaking process and can take several hours,
  • Refund ETH manually in the event that the deal fails

The solutions: optimizing the workflow

Tamir learned Solidity, the language on which the ethereum protocol is built, faster than I thought was humanly possible. He launched our backend on Github. We spent a few weekends in coffee shops where he ran tests and I sketched task flows. Our solution is an effort to provide the best UX within the constraints of the ethereum smart contract system.

Parts of creator solutions — easing the pain

Although we focused on pool creators for v1, we also improved the UX for investors. All of the features below are brand new solutions for investors in this space:

Investor dashboard — open and collect token states

Getting to know our users: how do they currently solve their problems?

All of my blockchain investor chatter happens on Telegram with ~150 people from around the world. I used this network to create research chat groups. My research goals:

  1. Explore our users’ current behavior without PrimaBlock to highlight pain points and delights in order to gather evidence about unmet needs for feature prioritization.
  2. Determine through evidence whether our users’ would pay for our product, even though we have always planned to release it for free. We did not want to launch something unwanted.

My screening criteria for creators was whether they have created a pool before and plan to create one again.

  • What steps did you take the last time you launched a pool before announcing it to the group?
  • After announcing it to the group, what steps did you take to prepare for submissions?
  • If you organized submissions for the last pool, how did you do so?
  • Were there any questions that many people asked you? What were they?
  • How do you distribute tokens to investors?
  • What was the most frustrating thing about the process?
  • What was the easiest thing about the process?

My screening criteria for investors was whether they have invested in a pool before and plan to invest in one again.

  • What steps did you take the last time you invested in a pool?
  • How did you organize any and all information about your investment?
  • What key values did you look for about the investment?
  • When how how did you receive your tokens?
  • What was the most frustrating thing about the process?
  • What was the easiest thing about the process?

I took notes all of the interesting or repeating answers in order to begin classifying the results to look for patterns, which resulted in creating user flow diagrams and task lists.

The second part of our research gathered evidence for whether users would pay. Even though PrimaBlock is free and open-source, we always want to invest our energy into something people really want. The best predictor of future behavior is past behavior, so I collaborated with pool creators to start requesting money for their services. The timing was perfect because deal flow was increasing and pool creators were getting burnt out.

Announcements to groups about supporting creators

It is hard to determine the % of investors who voluntarily contributed because it’s unknown how many saw the message. However, for the next 3 ICO’s, ~40% of investors who invested added the voluntary tax. In the mandatory contribution, 100% paid in order to be able to participate.

Improvements: iterating until launch

All users must “execute a transaction” with the ethereum network in order to take any action. For creators, actions include deploying (launching) a contract, setting or editing values and whitelists. For investors, actions include investing or withdrawing ether and claiming tokens. Users execute transactions on MyEtherWallet with data that we generate for them. For most of my design process, Tamir and I thought executing a transaction would look like below:

Early solution for executing a transaction

With this flow, users would execute a transaction with the network and our system would poll the backend every 30 seconds and eventually refresh to confirm the user’s action. I was concerned with this because users lose all sense of control, waiting 30, 60, or 90 seconds for the system to update. There is no handbook for creating blockchain products. Tamir laid the foundation but we had to test a ton of tasks to find the best possible solutions.

Our solution is to generate specific data for the user to execute a transaction in MyEtherWallet, at which point MyEtherWallet will respond with a Transaction ID. When a user pastes the ID into PrimaBlock, it will automatically update.

testing the transaction flow with a real user

The navigation is crucial because it gives the user context for where she is. Blockchain users don’t log-in like traditional products, but we need to serve up different views for creators and investors and give them the logged-in feel. Interestingly, users are never logged into PrimaBlock. Instead, they log into MyEtherWallet with their encrypted wallets. The data that we give to the user and the user gives back to us will sync in the backend so that we- and the blockchain- confirm identity.

  1. There aren’t any navigation elements that allow users to log in or quickly access a personalized view. A user would have to paste in a unique URL for each pool she invested in or created.
  2. I added a login button but we didn’t have the resources for v1 to create a ui or database to aggregate pools that were attached to each user. So, I tested to see if the login button could act as access for the creator’s view. 100% of investors who I tested it on were confused into thinking they had to login.
  3. As a solution to the confusion from the login button, I edited the text to display investor or creator view but 100% of users thought they had to click in order to access that view.
  4. As a final solution, I grabbed a traditional ui dashboard pattern which solved it completely.

More solutions: intent-driven onboarding

I focused on delivering value to creators during their onboarding process. Onboarding lets creators create a pool while educating them on the necessary key values and constraints that define it. Onboarding also shows the creator where she is throughout the whole process. Test out the flow:

What’s next? Plans for future versions

Tamir built the backend and I designed the product from start to finish in about two intense weeks. Anyone who has ever built a product can relate: there were some planned features that we had to scrap for v1 because of an unknown amount of development work. Other feature ideas that emerged from our research were always on the back burner for post-v1.

Ideas to improve PrimaBlock after v1:

  1. Personalization — even though users can’t login to PrimaBlock, we can still serve a more personal experience in which they can navigate through their current and prospective pools. We would accomplish this by letting anyone who claimed to own a wallet address view activity associated with that address, but they of course wouldn’t be able to execute a transaction without their MyEtherWallet encryption information.
v1 versus future workflow for navigating pools
  1. Improving key values — I created a key value priority list during research and v1 is missing some important ones. For future versions, I’d like to add pool close date and minimum total allocation. The pool close date helps creators and investors plan for action deadlines. The minimum total allocation is especially helpful for creators in helping them take action in the event that a pool isn’t trending towards meeting its threshold.
  2. Removing unnecessary components — v1 focuses on creators so I didn’t spend as much energy on prioritizing the investor experience. I learned from research that none of investors prioritized having seeing a contributor list for a pool they invested in. So, I’d like to remove the contributor list component on the investor-facing interface.
  3. Credibility — I’d like to add social profiles for creators (possibly with historical performance) in the much longer term. Right now, all identities are limited to a long, unreadable wallet address (i.e. 0x30308efe13b837694a8ced8aef9fda07ee892fa1280678eed77f22a3266c041c). The blockchain is pseudonymous, so users are used to this format, but personalizing it more can help users make decisions about which pools to invest in.
  4. Currency conversion — my first sketches including $ amounts in the main ui key values while have ETH amounts in the contributor list. I asked users how they analyzed deal metrics and their individual contributions. ~30% said they were growing comfortable with understanding crypto currency values without having to convert to a fiat currency. ~70% said that they always converted into fiat currency to gauge values. Built-in currency conversion contains a ton of potential work, so we will have to dig deeper.

That’s all for now. Check out some more ui before you go!

Thank you for reading my adventures in design and the blockchain. I am bullish on this emerging technology. It’s impossible to predict the reaches of its applications but I’m excited to see what happens. During the dotcom boom, could you have imagined a global taxi dispatcher? Or a digital birth control? There were “experts” in the 90s saying that the internet was a fad!

I would love your feedback on anything I’ve written or designed. I’m new to design and even newer to the blockchain. Post anything in the comments and I promise to reply. I have some portfolio highlights on my personal site 😎

Thanks again to Tamir and Mike. Visit PrimaBlock! 💻

Deuces ✌️