In 2015, Twitch began working on a long-term project with their Commerce and Broadcaster Success team. Having just completed a successful commerce product with TeeSpring, I was tasked with being the lead designer on one of Twitch’s (and my) biggest projects of the year.

Our goal for this product was to create a way for viewers of a stream to show their support with a monetary gift. I worked with the PM on the project to define a purchasable currency that could be sent to partnered broadcasters. Broadcasters already use services like PayPal to take real money donations from their loyal viewers, but these services all have a few caveats:

• Donations have a tax implication, which means broadcasters are often earning less than they expect and,
• Because of the ability for refunds, these services often have a risk of fraud in which the broadcaster either loses the money or - in extreme cases - gets their account locked.

After hearing complaints from partnered broadcasters about these issues, we got to work with some concepts that would help to solve these problems and help our partners earn more. As evidenced by several content creators on our platform, they have complained about PayPal shutting down their accounts with little way of recovery.

We landed on a concept in which people could buy a virtual good or currency that could be then sent to their favourite broadcasters. We worked with the Legal team to ensure that we would technically not be sending “donations” and indeed this would be the concept we’d work on.

Success meant 90% adoption by partnered broadcasters over 6 months. Achieve $1000 spent per day 6 months after release.

We knew for sure that we’d need the User to do the following:

• A User must have an inventory to Spend
• A User must be able to add currency to go in to their Inventory
• A User must be able to send currency easily when on a partnered broadcaster’s channel
• A User must be able to see what they’re sending before they send it.
• A User must be able to send a message with their currency

And for broadcasters:

• A Broadcaster must be able to set a minimum and maximum amount
• A Broadcaster must be able to opt in or out of the feature and agree to some legal documentation

This product began as a Donations service in its infancy. Unfortunately we were unable to allow users to send real money due to complicated issues that I will not go into here. But below are wireframes of the first concept of a donation system within Twitch:

As you can see, we originally intended for donations to be given via a channel widget that users could click and send real money to their favourite broadcasters.

But we knew we could make the experience better.

Stream-watchers rarely have their hand on the mouse after all. A large percentage of stream watchers will already be chatting in the channel chat. Sending donations is very much an impulsive action after all: seeing a great play or something amazing happen on stream is one of live streaming’s selling points.

We worked with Branding to come up with the name Bits for the concept. The name fit well as it was related to computer and gaming related nomenclature. We envisioned the object itself as being a geometric shape that grows with the amount you give.

I did a few explorations of how a chatting user could easily invoke a way to send Bits as they are chatting. The concept was simple: a user would already have their fingers on the keyboard, so let’s use the keyboard to invoke a tooltip once they had typed a key phrase (I chose “giveBits”) and a number.

We had several different tiers of 1, 100, 1000, 5000, and 10000. Initially the tooltip was designed to allow users to click one of the pre-designated tiers, but that was bringing back the issue of having to use a mouse to complete the action. So, instead we went for the full experience of having the user type out their desired number. It was better this way for a few reasons:

• Less need for the mouse, as mentioned.
• Avoids decision paralysis when given options.
• Allows for the number to be a “meme” if they so choose
• It allows users to copy-paste quickly if they wanted to send multiples of the same amount in the same message.

Prototypes were a very important part of this project. In order to fully understand how each of the pieces worked together, it was important to actually create a working concept.

A few issues we solved along the way:

• It had to be abundantly clear how many Bits were being sent to avoid sending by accident. Because of this we needed a persistent count in the tooltip.
• We also considered being able to cancel the send with a countdown timer and a cancel button. However, it was a much slower experience and so we ended up allowing cancellations on large amounts (5000+) and left the experience as-is for smaller amounts.
• We originally had the processing message at the top of the chat, however it was very disconnected to the experience so we kept it contained in the Bits tooltip.

Once we had landed on a concept, it was time to work on a way to allow users to purchase Bits to add to their inventory. We knew we’d be using Amazon as our payment portal, so the transaction would have to take place in a new window for now (though we did explore a version of the checkout flow that existed inline, we weren’t able to technically achieve it in time due to security concerns.

The flow was kept very similar to Twitch’s existing subscription flow, as it would be familiar. The only caveat was that the user had to connect their Twitch and Amazon accounts (to be used later for many other things like Twitch Prime).

After much iteration, we finally had our final Bits tooltip.

In the first 7 hours of the product’s launch, over 4.5 million (exact number redacted) Bits had been purchased with over 3.4 million Bits used. Overall, the project was a huge success and even now is continuing to grow and generate huge amounts of revenue for the company. I was proud to be a part of this project.