chipper

Chipper: financial transactions over Twitter

Problem

Periscope and Meerkat have brought live streaming to the masses. Mukbang stars in Korea and karaoke stars in China are already making a living via financial transactions over live streaming services (such as Afreeca), but Periscope and Meerkat don't have this feature... yet.

Solution

Chipper, a web app that connects your Twitter account to your Venmo account and allows you to make financial transactions (up to $20) over Twitter. Directly support people and causes you care about!

Timeline: In progress

Team: Andy Jiang, developer; me, UX/UI designer

Current status: Beta version launched. (http://www.gochipper.com/)

 

 

Before and After

 

Initial design

Proposed design

 

 

Background

The idea for Chipper came from "mukbangs", which are live eating broadcasts (usually using AfreecaTV) that originated in Korea. Popular "broadcast jockeys"...

  • stream themselves eating enormous quantities of food in one sitting
  • respond in real-time to their viewers who type to them in the chat window
  • receive donations from their viewers in the form of virtual balloons.

A screen capture of AfreecaTV's chat room and a transfer of virtual balloons from a viewer.

More about this trend here... Top 8 Mukbang Online Streamers on Afreeca TV

And here...

 

 

 

 

 

 

 

And here...

Note that before Periscope and Meerkat we had Twitch.tv, but Twitch is focused on live-streams of online gaming. Once Periscope and Meerkat were released, I was intrigued by the idea of adding in the Afreeca functionality (financial transactions between viewers and broadcaster) to at least one of the two services.

 

 

Research

I looked at various live stream sites to get ideas for Chipper.

Periscope's homepage, 4.24.2015

Periscope's homepage, 4.24.2015

Twitter.com, 4.24.2015

Twitter.com, 4.24.2015

Meerkat's homepage, 4.24.2015

Meerkat's homepage, 4.24.2015

YouNow.com, 4.24.2015

YouNow.com, 4.24.2015

afreeca's homepage, 4.24.2015

afreeca's homepage, 4.24.2015

Livestream.com, 5.07.2015

Livestream.com, 5.07.2015

I found:

  • 3/6 of the live streaming websites I looked at have a video on the landing page
  • Color schemes vary
  • CTAs (download the app, log-in/sign-up) are easy to find and understand on 5/6
  • 5/6 lead with a simple statement of what the service does, followed by more info below the fold.
  • Afreeca's website design (or lack thereof...?) sticks out like a sore thumb compared to the other 4. I wonder why Korean websites are always so crazy (daum.net, naver.com, Gmarket...)
 

 

Sketches, ideation, storyboard (pictures coming soon)

I teamed up with Andy Jiang to build Chipper, and he quickly pulled together a working prototype using the Venmo API. We decided to build for Meerkat first, because Periscope's comments section is within Periscope's platform, while Meerkat relies on tweets for viewers to chat with live streamers.

I sketched out various design ideas, some of which were influenced by what I saw in my research of various websites. Thinking about different use cases for this app, I hypothesized that

  • a typical viewer may be interested in using Chipper to make donations to causes / support Meerkatters they like
  • a typical Meerkatter may be interested in using Chipper to receive donations / make money (or become a mukbang star?)
  • a business/brand would be interested in Chipper because it creates another avenue for revenue, comes with built-in social proof since everything is over Twitter, and makes it easy for viewers to respond in-the-moment with a donation / payment.
 

 

Design iteration and user testing

Redesign v1 + testing

Version 1. I designed this using Sketch to bring the call-to-action to the top, include an example tweet, and have a footer.

Testing Version 1 of the design on various colleagues, mentors and designers gathered a lot of useful and encouraging feedback, such as:

  • Make the call-to-action even stronger by rearranging the space at the top. Consider having the simplest overview of the process at the top, with more information available by clicking on each step, or further down the page. Add animation or gifs (not all of them going at once) to further visualize the information and add some delight for the user.
  • Use examples of Tweets to show the process of how it works to explain what to do. Embed some actual tweets where a transaction works, and point out the requirements.
  • Really cool idea! I would lay the points out horizontally with a nice big icon above each one. Icons make a huge difference.
  • The idea is simple. You are describing a process and the user doesn't need this. You need to explain how it works...and the process will be done by him when using the app.
  • I actually really like the text list! Could you add small GIF's of screens under each item?
  • Very cool. Why just Venmo? Could be a way to acknowledge 'free' stuff or pay a friend. What's the overhead / fee? Conceptually good.
 

Redesign v2 & v2.1, + testing

Version 2. I designed this with Meerkat's style in mind and added a little motion graphic to add visual interest.

The Rules of Chipper

Testing Version 2: This was designed with the Meerkat brand in mind; I had the Chipper character (let's call him Chip) face Meerkat and animated him tossing a coin at Meerkat, aka "chipping" in. I received positive responses towards Chip but ultimately returned to the original coin gif.

 

 

Final design