in-app purchasing *

client: Twitch

role: lead product designer

duration: may 2017 - nov. 2017

First and foremost, we needed to decipher who are are main users of in-app purchasing. Simply put, our indirect users who are monetarily benefitting from in-app purchasing are our broadcasters. In terms of of our users who are directly interacting with in-app purchasing, these are our viewers.

With my designs, I wanted to prioritize our viewers' experience by making it predictable, consistent and delightful seeing as they are reinforcing their relationship with broadcasters with cheers.

I wanted to understand both parties as equally as possible. Utilizing our user research team and doing a little bit of observation on my own, I was able to dig up some information.

I was able to listen to the broadcasters' points of views through watching their streams, and hearing out their stories via recorded video interviews.

Many of them have mentioned that streaming on Bits has been a resource of income, but there is also a little bit of awkwardness in feeling like it is a "show". They wished to bridge this relationship in some manner.

From the viewers' point of view, I often would sit in as many streams as I could and actively cheer for our broadcasters both on desktop and mobile. It was truly cumbersome when I was away from a desktop and there was no accessible way for me to refill my "Bits" when I wanted to cheer for something that I thought (and other viewers) thought was "cheer worthy".

Standing in both a new user (as I am and was not a power user of Twitch) and existing user's shoes, helped me understand their challenges of being engaged with a stream

I looked at a number of Twitch's current competitors on the market. What was interesting was their own personal takes on "digital goods/currencies", and the different models behind each one.It was important to not only look at North American competitors, but also consider international video streaming markets as well. These are just a few major competitors I looked at, as a great sum of our streamers and viewers are geographically based in China, Taiwan and Korea. I also looked at Douyu, Nico Nico (ニコニコ), and FRESH!. I have obfuscated my findings here due to NDA.

Afterwards, I felt comfortable to go forward with my design process with these objectives in mind, working with my product manager.

Help streamers see how users are viewing their live broadcasts (ex. desktop or mobile).

Increase Bits purchasers and users.

Help new users learn what Bits is and how to use Bits for cheering.

Help existing and new users buy Bits and cheer on iOS and Android.

Provide a seamless purchasing experience for Bits users on web and native applications.

Throughout the design cycle, we have come to many instances where we had a difficult time keeping track of what our users would expect to see at certain points of time and conditions. We created and organized the mobile states to better streamline our design process and keep tallies of what has been completed or has not been addressed yet.

In order to layout the appropriate interfaces, we needed to create an ideal purchase flow from desire to buy Bits to using Bits to cheer

We needed to understand what happens from the point a user decides they want to purchase Bits. This not only included the Twitch interface, but also we had to consider what restrictions were applied by both Android and Apple devices. Mapping out the user flow for both new users and existing users helped us see where in the purchasing journey we may had more research to do

I am a firm believer that variety is the spice of life. I created several different proposals on how selecting a bundle of Bits may be visually seen by our users.

Out of the whole design process, creating high-fidelity mockups was in my opinion the most time consuming part of the whole cycle. It was important to keep the aesthetic in line with Twitch's branding and overall feel, but also keeping in mind that each element served a specific type of functionality as part of the bigger puzzle.

One aspect of cheering/using Bits I realized through creating my mock-ups and watching others interact with the application (both on mobile and desktop), was the fact that most users enjoyed customizing their cheers. In other words, once they set a cheer amount, they attach a special message that is usually directed towards the broadcaster. With this is mind, I wanted to add another feature to the cheering/Bits experience, by providing a button/tab for users to switch from cheering to buying to keyboard more easily. Many users found that tapping in and out of the gem was not intuitive, or they were confused how to begin a message along with their cheer in general.

After we established our benchmark "Happy Path", we put it into motion by integrating the flow into our high-fidelity mockups.

From this, we were able to identify at what points a user would interact with on their mobile device, and the types of prompts and information

that would be seen at each

step through "The Happy Path".

Using our "Happy Path", information architecture and user stories, we were able to develop how our error states may look and feel like.

Since using and buying Bits on mobile is a learned experience for both senior users and newer users, I wanted to utilize error states in a way that was informational, warm and welcoming without sounding too much like an up sell.

It is extremely important to make localization and accessibility considerations behind my designs. Certain words and quantities may be larger in terms of character length which may alter the visual design. More over, it was also important to consider those who may be visually impaired (ex. color blindness, legibility and so forth). I created several mocks in different languages (using Google Translate and my own language abilities in Japanese) and checked contrast with tools within Sketch to ensure all sorts of audiences are able to enjoy the in-app- purchasing experience.

For example, the user stories we had made the assumption that existing users will already be logged in.

"As a first time Bits purchaser, I can learn about bits and why I want to use them."

"As a user, it is easy for me to check my bits balance.”

"As a user, I know when my bits balance is updated with my newly purchased bits bundle.”

"As a user, I can buy bits in countries supported by the app store."

It was critical to frame our user stories in such so that we could identify a suitable solution to each story. Creating these statements from the user point of view unearthed us from our own biases and helped us discover some other surprises along the way.

Prototyping helped communicate the interactions within my static UIs. Incorporating higher fidelity interactions and animations helped stakeholders and testers understand what happens when they interact with specific elements to guide them through the prompts.

After our mocks were sent off to development, we were able to test our almost finalized designs with some of our users. Below are some positive and constructive feedback:

"However, if I use the keyboard to add text after the bits, after send the keyboard doesn't retract. I can only see two lines in chat and I can easily miss my cheer."

"I tested native Bits purchasing on iOS and purchase went smooth with apple pay. Also, I was able to cheer bits on channels without any issue."

As someone who is not a power user of Twitch, there was a lot for me to learn about all the ins and outs of the product. In-App Purchasing was my largest project that I took the reigns on at Twitch.

Due to engineering and time constraints and overall narrowing down the scope of IAP, we did not include the keyboard tab as part of the IAP/cheering experience. I had a prediction that eliminating the keyboard tab might be confusing for our users. As it stood prior to introducing a "Buy Bits" button, there was a cause of concern on how to bring the keyboard back up to customize a message along with their cheer.

Overall, I am really happy with the outcome and launch of the IAP experience. In the future, I'd love to engage more with our users and spend more time gathering feedback to see how we can improve the experience even further.