Let me start by saying I hate accounting.

But I am excited to begin sharing with you about my budding love affair with the very thing.  It began last week, with a book by Leita Hart called Accounting Demystified (especially the first 4-5 chapters).

As a creative type, my brain just isn’t drawn to financial stuff. When the talk of debits and credits gets too deep, I just gloss over and think about DSLR’s and should I get the new Macbook Pro or wait for the next one?

But Leita does a fantastic job of beautifying all the gory details of accounting and speaking in terms you and I can understand.

Here is my summary. But don’t take my word for it, read her book!

Accounting is just financial story telling (hopefully non-fiction stories!)

• Accounting is a big database of transactions. That database is called a general ledger.
• The data in this database can be presented in many ways and can tell many different STORIES about the business.
• This notion of the data telling stories about the business really triggered some ideas for me regarding how we grow Blinksale. Hint: It is not about reports, spreadsheets, credits and debits—it’s about stories! All the statements pull together to tell a story about the business and each story is unique.
• The primary 3 stories that come out of the database are summaries of the financial data from 3 different perspectives: the balance sheet (the super summary) and two “drill down” perspectives, the income statement (sometimes called a P&L or profit and loss statement), and the cash flow statement.
• When combined, these stories tell the business owner a few key things: how flexible or liquid is the organization, how profitable is the organization, is it growing (or have growth potential), and how is the business financed?

The balance sheet:

• The balance sheet is the “master story” that sits above the other stories.
• It could be considered “my business summary”. It tells the story of the assets of the business, the liabilities of the business, and the equity (or lack thereof) that the business has developed over time.
• The formula for this story is assets = liabilities + equity.
• The items on the left MUST add up to the items on the right because of this basic formula.
• Assets are always shown on the left and liabilities and equity are always shown on the right. For example, if you have $100,000 in cash (an asset), and you owe someone $50,000 (a liability), that means you have $50,000 in equity. It is that simple!
• The balance sheet tells three critical stories: 1) who owns the business, 2) how lean and mean the organization is running, and 3) how “liquid” the organization is (hint: liquid = good).

The income statement:

• The income statement or P&L tells the story of profit (or loss!). It’s focus is on revenues, expenses, and the profit or loss that is generated from them.
• Revenues minus expenses = profit. Hint, this is really important!
• Some costs are fixed, like rent. Some are variable like dining and entertainment or advertising.
• The income statement tells the story of profitability.

The cash flow statement:

• The cash flow statement is like your bank statement and is focused on cash—specifically how much you started with each month and how much you ended with.
• This is not the same as the income statement. In most businesses, the profit or loss for the month won’t be the same as the ending cash for the month. Don’t get this confused with the income statement.
• One key story the cash flow statement tells is HOW the company is generating cash. For example, Blinksale generates cash via subscriptions (good), and through the occasional outside investment (not as good). Each impacts cash. The one that is the most valuable to us, because it means we are healthy and doing our jobs well is the part of the cash flow that comes from NET INCOME (via subscriptions). The part we want to keep reduced (or eliminated) is cash inflows via investment, because that means we either owe someone money or are giving away stock in our business.
• THE key question the cash flow statement answers is this: “Is the net income (as seen on the income statement) ever realized in cash?” For example, if Blinksale had $100k in revenue, and $50k in expenses, we SHOULD see an increase in cash of $50k. If we don’t, it may not mean bad news, but could mean that there are other factors impacting cash that could use our attention.

How are the three reports (stories!) related? How do they tie together?

• Remember, the balance sheet is at the top.
• The income statement is the DETAIL of how earnings (profits or losses) were generated (remember: Revenue minus expenses = profit)  Each month’s total profit or loss is added to what is called “RETAINED EARNINGS” on the balance sheet. So if you “drill down” on retained earnings, you would hit the income statement and see the detail of what happened.
• The cash flow statement shows you what happened to cash. It is the DETAIL of the item on the balance sheet called cash.

What does this all this mean for Blinksale and for you? Well, hopefully some of it will help you better understand some of the basics of the numbers that impact your business every day.

And after reading the book, and lying awake excited about all this financial storytelling stuff, I decided to ping the book’s author, Leita Hall and ask if we could meet to do some product brainstorming. Thankfully she obliged, and so late last week, in the midst of all the SXSW partying, we sat in a conference room in an Austin hotel and talked about financial storytelling for an afternoon.

Needless to say, we’re pretty excited about the idea of having some form of financial storytelling built into future versions Blinksale.

Have any thoughts on the matter? Let’s hear em!

“The Story of Blinkpay: Making something complicated really simple” by Jared Christensen

My introduction to Blinkpay came in the form of a meeting. Across the table was a gentleman from a local payments processing company. These are the folks who work with businesses to set up a merchant account and get them situated to accept credit card payments. They also handle the transactions for the merchant, running payments through all the necessary systems and then getting the money deposited into the merchant’s account. For what we wanted to do with Blinkpay, we needed a partner like this.

The conversation was pleasant and informative. I asked a few questions, and by the end of the meeting I had in my hands the intimidating stack of paperwork required to become a merchant.

It was my job to take this daunting process and make it feel achievable.

Getting the lay of the land

I began designing for Blinkpay by coming at it from 2 different directions. The first direction aimed to understand the existing paperwork, the application process and how the electronic payments system worked in general. This was practical work; Blinkpay would have to work within the payments system, so this direction sought to understand what was malleable and what was not.

The second direction came at Blinkpay from the users’ perspectives (both the Blinksale merchant AND his clients). No matter the constraints that would be discovered by exploring that first direction, Blinkpay had to align with the same design tenets that guide Blinksale: clarity, honesty, perceived simplicity and delight (to name a few).

I studied, reorganized and challenged the merchant application. I diagrammed my understanding of the payments industry’s processes. I incessantly posed questions to our chosen payments processor (JetPay), asking every stupid question I could think of to understand the entire scope of processing a credit card, and all the possible scenarios that could come out of that process.

At the same time, I worked out task flows, user interfaces and mockups describing the ideal Blinkpay implementation from the users’ point of view and shared them with JetPay. This communication allowed us to work out kinks, recognize constraints and keep forward momentum.

(Even though this writeup is going to make it seem like designing Blinkpay was a linear process, nothing could be further from the truth. Even the best-laid plans went through revision after revision, adapting and refining as new information came to light.)

The Merchant Application

The true start of the Blinkpay experience is the online application process, and I knew it could not be as complicated as the paper application. It had to ask for only the most absolutely essential information. It had to feel relatively easy, straightforward, honest, and simple; at the same time, I also wanted to provide enough information to educate applicants seeking to dig deeper into the nitty-gritty details of the agreement. It had to be able to be saved and re-opened as many times as the applicant needed to complete it, so there was no pressure to finish it all at once. And it had to put the applicant at ease—the exact opposite effect of its paper counterpart.

I began designing the application by translating the paperwork into wireframes, sending them to JetPay and getting feedback. There is a fair amount of intentional redundancy in the paper application, and the back-and-forth exchange helped JetPay to see the application in its new context and better identify which portions could be removed.

For the actual implementation of the application, the form takes the scattered information of the paper forms and organizes it into 6 (mostly) brief pages. Not only does this approach make each page contain less information and break the form into logical groupings, it also makes it feel like progress is being made more quickly by putting the easy parts up front. Heck, the first page is almost entirely pre-filled with information pulled from the account’s Company page.

Visually, the application simply builds off of Blinksale’s existing form design, using a soft & neutral color palette. The applicant’s progress is displayed at the top of each page so there is a sense of how far he as come and how much remains. Contact information is displayed in the sidebar of every page, reinforcing that feeling of safety and ease we want the user to have while in the application.

The result of this effort is a 100% electronic signup process. All supporting documents can be attached and uploaded, and the whole application is electronically signed.

Signing the application

A major sticking point in the application comes at the end, where applicants must typically sign and date in numerous places. Not only does all that signing feel bothersome on paper applications, but the online incarnation doesn’t really lend itself to that kind of approach

I looked at the top online signature services out there but didn’t feel like they were appropriate for our needs. Drawing your signature with your mouse? Please. I figured we had more than enough digital fingerprints already on the application that I could design something more appropriate. So we proposed an alternate solution:

No silly scribbling with a mouse. No multiple signatures. Simply type the randomized verification word into the textfield and click “Sign this form.” Signature complete.

We were able to implement this solution thanks to being backed by a very progressive bank, as well as the fact that a user has to be logged in to access the form. So, when the application is signed, we have the signer’s Blinksale ID (and, therefore, payment info, full name, email address, etc), login name, password, ISP and the date it was signed as proof of identity. For our particular case, this solution is acceptable.

Your Blinkpay service has been activated!

Activation is the last step in the on-boarding process, and turns on all of Blinkpay’s features for the account.

Once activated, the user’s probable first point of interaction with Blinkpay happens when sending an invoice. The “Send Invoice” dialogue receives a new credit card option under the payment options, right next to the pre-existing PayPal option:

Despite any global settings, payment options can be controlled per-invoice by toggling the payment checkboxes.

Estimating Fees

“How much is it going to cost me to let this invoice be paid by credit card?”

This is one of the questions I could imagine our customers asking as they looked at the Send Invoice dialogue’s new payment option.

Every Blinkpay account starts with a low baseline rate for transactions. However, there are several factors which can push the fees per transaction slightly up or down. For this reason, I knew we couldn’t predict the exact fees for every single transaction for every single merchant. By using the default baseline rates, however, we could at least get close.

So, next to the Credit Card option, the estimated fees for the transaction are displayed. This allows the merchant to see their invoice total and the estimated cost of enabling the credit card payment option—all on the same screen.

Paying the Invoice

A clear and encouraging path to payment is at the heart of Blinkpay. After all, how to pay the invoice is a decision left in the hands of the client. No one is forcing him to pay online instead of mailing a check. It has to be easier.

With the Credit Card (and/or Payal) option checked on the Send Invoice dialogue, the sent invoice arrives in the client’s inbox. At the top of the email is a “Pay this invoice…” link which leads to the invoice’s online payment page.

When this page loads, all of the payment options that the merchant has enabled for that invoice display at the top of the page as big icons. This clearly tells the merchant what his next move should be.

Choosing the Credit Card option prompts the client to confirm the amount he would like to pay. On behalf of the merchant, Blinksale pre-fills this field with the total amount due. After confirming the amount, the client continues to the payment screen, where he can enter his info and send the payment.

iframe

All credit card payment data entry is done inside of a customized iframe, hosted by JetPay. The benefits of this approach on the security side are great, but presented challenges on the presentation side.

The last place you want to introduce an element of uncertainty is on a payment page. The iframe implementation had to look like it was just a normal piece of the page, because—for all intents and purposes—it is. JetPay created a custom version of the iframe for Blinkpay which allowed us to style it to match up with the surrounding page design. Without viewing the source, you’d never know it was an iframe.

But styling was the easy part. On top of styling, our iframe needed to support error messaging and help blurbs.

The challenge for both of these features is that they could not alter the width or height of the iframe, lest scrollbars appear in strange places and introduce that element of uncertainty. The help blurb was pretty straightforward (we just popped open the content in a smaller window inside the iframe), but the error messages were a little tricker. In the end, I found a good solution in positioning the error messages over the existing form labels:

This approach both provided the necessary context for the errors and prevented the iframe from growing scrollbars.

Notifications

Upon a successful transaction, each party has to be notified. For the client, I designed a simple emailed receipt containing relevant payment information. For the merchant, a notification system pushes a note to the account dashboard.

In addition to notifying the merchant of payment, Blinksale is also able to determine if the invoice has been paid in full and Close the invoice if that is the case.

Conclusion

Step 1: Fill out application. Step 2: Get activated. Step 3: Get paid fast. That’s really what we’re going for.

Blinkpay contained a of of complexity, and it was a challenge to always be standing in a place where I could see of all the angles. I don’t think I always succeeded, but there are a few things I did which helped me stay sane:

Internalize. This sounds overly simple and difficult at the same time, but try to remember everything that you can as you progress through a feature, project or design—especially the big ones. If you care about the work, this comes naturally. Drawing on this backlog of accumulated knowledge as complexity builds can provide clarity as you look ahead. Become the expert.

Sketch it out. Use words or visual tools—whatever works for you. I use both. Writing out a problem often leads me right to an answer. Roughly visualizing ideas with Keynote, Photoshop or a pencil helps get terrible ideas out of the way quickly so the mind can move on to better things.

Listen to others. Even the most hot-shot designer in the world is not the vessel of all truth. Great ideas can come from anyone on the team, so pitch your ideas to them and let a discussion happen. In the end, it is not important who came up with the best idea, but finding the idea leads to a great solution.

Document patterns. Yes, any pattern. It saves so much time if you can look at a particular problem and reference an existing solution. Keep a PSD of UI elements, or a wiki of interactions or whatever you need to easily reference your past work and decisions.

It’s always challenging to design within an established ecosystem, and the world of electronic transactions is certainly rigid. There is little room for compromise or change.

The goal of Blinkpay, then, is to let Blinksale customers enjoy the benefits of online payments without having to deal with all the minutiae. And that’s what design is for—to help people accomplish their goals, and enjoy themselves along the way.

For every signup between now and the end of March, we will support to each of four incredible organizations: Invisible Children, World Vision, XXXchurch & The DNA Foundation.

Why these organizations?

These organizations are bold and are tackling issues that many are not. That kind of spirit is what we strive to emulate here at Blinksale and we hope to encourage our customers to do the same. Here’s more about the four groups that will receive a percentage every time a new customer signs-up for Blinkpay.

Invisible Children (www.invisiblechildren.com) uses film, creativity and social action to end the use of child soldiers in Joseph Kony’s rebel war and restore Northern Uganda to peace and prosperity.

World Vision (www.worldvision.org) is a Christian humanitarian organization dedicated to working with children, families and their communities worldwide to reach their full potential by tackling the causes of poverty and injustice.

XXXchurch (www.xxxchurch.com) is the leading non-profit bringing awareness, openness and accountability to those affected by pornography and the porn industry. Their “Porn Sunday” event is the first of its kind and has made it easier for stodgy churches to deal with a non-stodgy issue like porn.

The DNA Foundation (www.demiandashton.org) hopes to help abolish modern day slavery, deter perpetrators and free the many innocent and exploited victims. They are committed to forcing sex slavery out of the shadows and into the spotlight.

What does this have to do with invoicing? Nothing really. However, we care about these issues and we hope that the Blinkpay launch can have some bigger impact (besides the huge impact it will have on your invoicing of course).

Thanks for checking out Blinksale and Blinkpay.

We’re excited to continue making Blinksale the easiest way to do online invoicing and hope that accepting credit card payments inside Blinksale will make the whole process of getting paid even more seamless.

Early this morning, we moved Blinkpay out of beta testing, and it is now available for everyone. Hurray!

To get familiar with Blinkpay, log into your account and click the “Blinkpay” tab. The page has a lot of good information as well as a button for you to sign up.

If you are not a Blinksale customer, you can see the same Blinkpay information page on our website.

What is Blinkpay?

If you’ve been following along on the blog, you know the basics: Blinkpay is an add-on service for your Blinksale account that allows your clients to pay invoices with a credit card. Blinkpay adds a payment link to your invoices that, when clicked, brings your client to a payment page. They enter their payment details and make the payment. That’s it. You get paid, a notification appears on your dashboard, and–assuming the client pays in full–the invoice is marked as Closed. Boom. Done.

Watch this screencast to see it in action:

This 2 minute video provides a look at how easy it is to do online invoicing with Blinksale and the new Blinkpay add-on for credit card processing.

With most other online invoicing apps, you have to have an external gateway account (like authorize.net) and a merchant account (both typically bear additional fees).

With Blinkpay that is built right in. No additional accounts needed.

Turning on Blinkpay

Due to the intricacies of the credit card processing industry, Blinkpay is currently only available to U.S. customers. This means your address is in the United States, you are doing business in U.S. dollars and you are depositing into a U.S. bank. Naturally, we want to extend the service to all of our customers worldwide and will continue to work towards that goal.

There is no charge to apply. You do not need to have anything but a good financial history and a bank account. Blinkpay IS your merchant account. You can collect as much money as you want through it. No limits.

Once subscribed & activated, Blinkpay is $20 a month to accept Visa, MasterCard and Discover, and $5 extra to accept American Express. In addition, each transaction (payment) carries a small fee. See the Rates section on the Blinkpay page for more info. All in all, Blinkpay rates have been trimmed down to be some of the lowest in the industry.

We even estimate your fees for an invoice when you’re ready to send it so you can make informed decisions about what fees you want to take on:

To get Blinkpay turned on for your account, click the “Sign Up” button on your account’s Blinkpay tab. This will lead you the Blinkpay application, which is easily the most straightforward, clearest and simplest way to get set up as a credit card merchant. Since you are getting paid with credit cards, there is a certain amount of personal, business and financial information that is required–by law–to qualify, so be prepared to provide proof that you are a good, upstanding businessperson. :)

Once you complete & submit your application, there is a short approval process which typically takes just a few days. When Blinkpay is activated for your account, you’ll be notified via email and given access to all the features.

Features

The best thing about Blinkpay is its integration into Blinksale. Because we built this service from the ground up, we are able to do some pretty cool things:

• Easy payment controls. You can turn credit card payments on or off for your entire account, and your “Send Invoice” dialogue will always remember your saved preference. You may also override this account-wide setting on each individual “Send Invoice” dialogue. So, you could turn credit card payments on for all invoices, but then uncheck the option as you send an invoice to a particular client. He will not be allowed to pay the invoice with a credit card.
• Simple payment page. When a client receives a Blinkpay-enabled invoice, there will be a “Pay this invoice” link at the top of the invoice. Clicking that link will bring the client to a payment page where he can select his payment type (if applicable) and enter his payment information.
• Notifications. Whenever a client makes a payment, you’ll receive a notification on your dashboard. As Blinkpay grows, you’ll receive other types of notifications as well as the option to be notified via email.
• Smart actions. When a client successfully pays an invoice in full via Blinkpay, Blinksale will automatically receive payment for the invoice, close it, and put a notification on your dashboard. All that’s left is to send a Thank-you note.
• Automatic receipts. When a client makes a successful payment, they’ll be emailed a receipt for their payment. It’s one less thing you’ll have to worry about.
• Automatic deposits. Your transactions will be processed in a daily batch and deposited into your linked account. You don’t have to go looking for your money like with PayPal.

We’re just getting started

We built Blinkpay for you, so getting paid for your work could be a faster, more enjoyable experience. Credit cards are just the starting point. We plan on building more features and payment options onto Blinkpay as it grows.

Now get out there and get paid!