Tipper

WHAT: Companion app for Twitter introducing passive digital payments for consumers

ROLE: Owned Design process from market analysis and concept through the launch of iOS and web applications

FOCUS: nurturing consumer trust, trading addressable market size for consumer value proposition, altering consumer behavior in a mature market

White Space

Bitcoin and digital currencies in general enable a new class of  known as Micro Payments: transactions that amount to less than one USD (and as small as a fraction of one cent). This artificial floor for legacy payment systems is due to the need for an intermediary system of trust, which Bitcoin's decentralized system fundamentally eliminates.

In part due to my background in digital advertising, the disruptive use cases of Micro Payments enables a future where third parties (advertisers) needn't participate in the commercial monetization of nominally valuable web content brokered between publishers and consumers.

In the modern system, consumers pay with their attention, quality of experience and personal data when publishers embed disruptive advertising and tracking within free content. The content is "free" because it is advertiser-subsidized, but the consumer still "pays" in non-monetary costs. 

Assuming a first-world consumer can stomach a 1-cent cost per ad not shown (less cluttered, less data, less tracking), the economics are unquestionably favorable for publishers as well, who stand to make roughly 10x per user compared to standard advertising rates. The system designed to support this paradigm will look something like the following, with the user's wallet passively paying publishers in micro amounts of digital currency the same moment content is consumed.

It's worth pausing for a moment to re-state that never before has it been possible to transact in tiny amounts of capital in real time between trusted parties.

Bootstrapping

Several Design decisions were made to limit the potential audience size to favor the Value we could offer consumers.

Some examples are the platform (iOS), the credentials (Twitter), the payment system (Apple Pay) and the actual currency used (Bitcoin). If you slice your addressable audience pie with this many constraints, you’re going to end up with a much smaller pool, however, you are much more capable of making an excellent product for this small pool of users. 

“Better to make a few users love you than a lot ambivalent.” - Paul Graham

Twitter was the ideal platform due to the simple/open nature of the network (Accounts and Likes), but also because that's where the nerds like to hang out, and nerds LOVE Bitcoin. Getting users installed and configured to start sending Micropyaments along with their Twitter 'Likes' was a great way to test and iterate on a live payments platform.

System Design

The design process at a 10,000ft view.

Having decided to optimize the entire experience for a selective market, we need to visualize all the touch points between players, objects, and programs that make up the guts of our system. 

In a pared down version, we isolate the most important aspects of our system: user actions (likes) and tipper actions (tips).

 
 

Functional Design

We identified three MVP functions to focus on for our functional design:

  1. History - inbound and outbound "tip" history

  2. Balance - live value of currency held in systems

  3. Funding - set of actions to take when funding is needed

Sketching these out individually and intertwined, we played with various versions in low-fidelity and prototyped states to make and test assumptions.

Several iterations of wireframing, prototyping and testing led to the combined Balance and History feed with primary navigation to Prompts and Settings. Prompts (or Notifications) was included after user testing identified a need to prompt specific actions from the user, such as topping off your account with more funds. Here we see the high-fidelity mocks that were born from multiple testing cycles.

Wiring up a quick prototype, we see our planned microinteractions at play, such as how the pages scroll, how new pages enter view, and how icons change depending on view state. Still no code, and yet we're able to continue testing assumptions and iterating our design based on a very realistic experience.

 
 
 

New User Onboarding

The New User Experience is a crucial touchpoint in the user journey that can truly make or break the way a user feels about (and ultimately continues to use) your service. This product presented several challenges in that we were asking users to adopt a new technology and give us their money, neither of which are easy tasks!

1. Splash Page

The first thing a new user sees is our Splash page, complete with appropriate branding and intelligible product positioning. "Attach Bitcoin tips to Twitter Likes.” Doesn’t get much more simple than that! 

Across the bottom of all onboarding screens we’ve designed a large, persistent white bar, requiring as little effort and intelligence as possible to usher users through the education and permissions prompts.

 

1

2

 

2. Welcome/Education

We want to welcome you with our cute stick figure (and hope you don't suffer PTSD from Microsoft’s Clippy).

Working with very simple language, our goal is to communicate the kindergarten-level education to our users without scaring them off. "When you do A, we'll do B."

We included a snip about the actual value of the Bitcoin being sent for tips, since 0.005 BTC is a foreign metric for most of us. 10¢ was our goldilocks number given it isn't too much or too little. You can throw around dimes all day without much concern, and at the same time, those dimes add up to dollars!

3. Apple Pay

Getting users to actually put money into a system is an extremely difficult task. The question of where to place this request could be debated to no end, but we decided to do so upfront in hopes of converting early, while including an option to skip and return later. 

By using Apple Pay, we've once again sacrificed a portion of our addressable user pool while gaining a massively streamlined payments UX. Two taps and you're done. Entering payment credentials? Ain't nobody got time for that!

Notice the moniker for “Bits” below the “$” amount. This was a custom created font that allowed us to represent Bitcoin in an amount greater than 0 (while $5 of BTC is worth around 0.02 BTC).

 

3

4

 

4. Notifications

Notifications need pre-prompts! The Notification channel is perhaps the most valuable an app can have to a user (the digital equivalent of going steady) so custom prompts should speak directly to the value you are offering. In this case, we've framed it as a way to tell you about the money you’ve received. 

"These can be configured in Settings," is just another way of saying "trust us for now and change this later if you wish." 

5. Experience + Investment

The true moment of experience and investment comes at these last two steps, where we show users what Tip stories will look like in their feed and then inform them that our Tipper Bot is about to Like their Tweets and send them a few tips. The effect is threefold:

1. The user experiences a real-time example of how the system works, seeing Likes on Twitter result in Tips on Tipper.

2. The user’s account becomes cash positive (even if they didn’t purchase BTC yet), meaning they will now start sending tips with their Likes.

3. Tipper’s persona extends beyond the app where Tweets carry links back to Tip stories on our website, exposing stories to this user's friends and followers.

 

5

6

 

6. Greasing the Rails of Retention

By the time our new user sees their home screen for the first time they are greeted with active an dashboard of inbound tips and system notifications. Since their account is already carrying capital, the next Tweets they Like will generate outbound tips and bring more accounts into our system as recipients, whose tips will be waiting for them should they convert as well.

 

Bringing these assets into the prototyping stage, we put together an iOS demo for user testing and iterations before shipping polished specs off for development.

 
 
 

Web Presence

As mentioned previously, I also led the strategy and design for Tipper’s web presence. As a crucial component of the user journey, the web product serves three major use cases: 

  1. Landing page for user’s to find and download the app and/or learn more about the service (FAQs, T&C’s) -- this type of page typically accompanies a mobile app and there are many templated services to support quick and easy web hosting but we opted for a custom design for the elements described next.

  2. Live feed displaying the real-time transactions happening on the network via twitter stream (including user handles and transaction links to the blockchain) -- this effectively serves as the "pulse" of the service, giving visitors a glance at what's happening and promotes a perception of activity.

  3. Discovery mechanism for users who visit via links from twitter (unique transaction stories) -- this is our viral loop opportunity to convert newcomers who find us by way of Tweeted transaction stories.

Sketching for Desktop and Mobile

It was important to design with both desktop and mobile in mind, given our users are on either platform. Typically, I like jumping back and forth between these platforms when mocking up UI designs, allowing the constraints of mobile to inform a clean and limited design on desktop.

One useful additional element on desktop is the "text-to-phone" link, allowing users to get a direct download link on their phone instead of figuring out how to download a mobile app from their desktop. On mobile, we can just send users straight to the app store since they're already on the necessary device.