Tipper is a Micro-Payment platform enabling users to send and receive micro transactions over the Bitcoin protocol. 

Partnering with an EIR at Thiel Capital, I owned the design of the product from concept through launch including all aspects of iOS and web applications.

The Design process focused on nurturing consumer trust, trading addressable market size for consumer value prop, and altering consumer behavior in an entrenched market.  

A New Media Model

 
 

Today, consumers pay for web content 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 very favorable for publishers who stand to make roughly 10x per user (as compared to standard ad rates).

We wanted to design a client-agnostic system to support this paradigm, where a user's wallet could passively reward publishers in tiny bits of digital currency the same moment content is consumed.

 

Bootstrapping

 
 

Several decisions were made to limit the potential audience size in favor of streamlining the product. Some examples are the platform (iOS), the credentials (Twitter), the payment system (Apple Pay) and the actual currency used (Bitcoin).

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

Twitter was an ideal match for identities and actions due to the simple/open nature of the network (Accounts and Likes), and because that's where the nerds like to hang out (Bitcoin users).

 

System-Level Design

Mapping our systems at the highest level our product goals for each component.

 
 

Visualizing our data flow can help identify the MVP functions required for our product to deliver on its promise.

 
 

Functional Design

  • History - inbound and outbound "tip" history
  • Balance - live value of currency held in systems
  • Funding - set of actions to take when funding is needed
  • Prompt - alert user to required actions

MVP needs in hand, we set out to explore different solutions to deliver on our needs most effectively.

Here we see the high-fidelity mocks that were born from multiple sketch 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 core component of any product's design, but with Tipper being a Micro Payments system, we had many novel concepts to communicate.

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

 

Ship-Worthy Web Assets

The high-fidelity design phase is an opportunity to breath character into our mocks, like the backgrounds and layering that chunks our elements into intuitive sections. Once finalized, designs are spec'd and sliced for easy implementation on the development side.