Twitch Bits

Send a gift to your favourite Twitch broadcasters

Intro

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.

What Problem are we Solving?

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.

What does success look like?

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

Requirements

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:

Original donations setup included a min and max amount and a thank you message.
Original donations setup included a min and max amount and a thank you message.
We also wanted to expose the API endpoint, for the more technical users.
We also wanted to expose the API endpoint, for the more technical users.
The original entry experience for viewers was a channel widget.
The original entry experience for viewers was a channel widget.

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.

Bits and Cheers

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 designed the first image of a Bit
I designed the first image of a Bit
The Tooltip

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.

Sketching out how to include Bits within the existing chat UI
Sketching out how to include Bits within the existing chat UI
A version of the tooltip that acted more as a calculator where users clicked buttons to add to the total to give.
A version of the tooltip that acted more as a calculator where users clicked buttons to add to the total to give.
Cont.
Cont.
Sketches for an intro animation?
Sketches for an intro animation?
Sketch of a concept where typing a keyword would invoke the tooltip and show an inline amount.
Sketch of a concept where typing a keyword would invoke the tooltip and show an inline amount.
Bits in the emote selector.
Bits in the emote selector.
Sketch of what would become the final Bits concept.
Sketch of what would become the final Bits concept.

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.
Some mocked up concepts based on the sketches.
Some mocked up concepts based on the sketches.
The "calculator" widget.
The "calculator" widget.
Inline concept.
Inline concept.
The start of the final concept.
The start of the final concept.
Prototypes

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.

First donation widget prototype.
First donation widget prototype.

Donation Widget Prototype

Click the gift box icon in the input box.

GO TO PROTOTYPE →
Rich-text input fields are hard.
Rich-text input fields are hard.

Inline Bit Object Prototype

Start tpying "giveBits" and then a space.

GO TO PROTOTYPE →
Adding on to rich-text input, creating more of a "block" so its noticable in chat.
Adding on to rich-text input, creating more of a "block" so its noticable in chat.

Inline Bit Object Prototype

Start tpying "giveBits" and then a space.

GO TO PROTOTYPE →
The start of a fully-fledged Bits tooltip
The start of a fully-fledged Bits tooltip

Bits Tooltip Prototype

Click the triangle icon or start typing "giveBits"

GO TO PROTOTYPE →

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.
An early tooltip concept with animated error state.
An early tooltip concept with animated error state.
A flowchart of the ideal Bits experience.
A flowchart of the ideal Bits experience.
Purchasing Flow

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).

Final Concept

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

Iteration on how clarity can be displayed in the tooltip.
Iteration on how clarity can be displayed in the tooltip.
Note all the edge cases that needed to be taken into account!
Note all the edge cases that needed to be taken into account!
All the Bits!
All the Bits!
Animating the tooltip.
Animating the tooltip.
All the Bits!
All the Bits!
The final experience, with colored shadows.
The final experience, with colored shadows.
Success

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.

Posted Jun 27 2016
© 2019 Elsie Ng. All rights reserved. RSS