I lead the design of Twitch’s Bits system, a way to send a gift to your favourite Twitch broadcasters.
MY ROLE & KEY SKILLS
Interaction design explorations and UI/UX design with usable prototypes to test interactions.
Provided vision of the Bit concept to assist a brand/motion designer to create a full suite of animated Bits
Hands-on front-end development in HAML and SASS, checking in code with internal GitHub
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.
Original Donations Panel concept
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.
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.
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.
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.
There's obviously more to this story.
A lot of process went behind the creation of this project that I am unable to display in such a public manner. But if you'd like to hear more, get in touch.
