I am fascinated by Square. Have you heard of or used it yet? If not, here's the gist: Square is a payment platform started by Jack Dorsey that allows people like you and me (as well as small businesses) to accept credit card payments using our mobile devices.
Why am I all about it? Well, beyond it replacing Paypal for me (I'm not a paypal fan), you get the sense that this company really takes design seriously. Everything they do, from the small white square card reader, to the website, to the app...is executed in a uniform and intuitive way. So much so, that using Square sort of becomes an experience, instead of just "something you use to get the job done."
However, Square is really new and their website (once logged in as an active user), while very clean and efficient, could use some extra features to make using Square even better.
Objective: Improve the Squareup.com user experience by adding some extra tools and ui elements ranging from payment info-graphics to a client contact section, while keeping within the design aesthetic already set by Square. NOTE: To be clear, this is unofficial and I'm in no way connected to Square. I'm just doing this as an exercise in U.I.
Whenever you're dealing with money, or customers, it's great to have some visualization of the numbers. Currently, Squareup.com doesn't give you any sort of visualization of the data that you're "collecting". This is specifically true in regards to payments that you receive from your customers. This isn't a requirement though. In fact, most financial websites don't do this. However, one site that does this and does it well is mint.com.
Mint.com's user experience is very well done, and it's due mainly to all of the visualization that is made possible using the data Mint grabs from your various financial institutions. I figured, if Mint can do it, why not Square?
So after tooling around Squareup.com and going back and forth from that and my Mint.com account I decided that I could add something new to the Square "Payments" section. I knew that if I was running a small business and had payments coming in that I'd want a way to sort of get an overall picture of the money I'm making, along with some visualization of statistics like tips, who's paying with cards vs. cash, and how much overall profit I've made in the last week, month, or few months.
The key, however, is to keep with Square's style and not deviate too much from the already clean and simple design-sense the site has. So, using firebug, I took note of all the colors, font sizes, font-faces, and icons that Square uses in order to perfectly match the look. Hopefully, I can make a seamless addition that's actually useful to the site and to their layout, while maintaining aesthetic/functional continuity. If I can pull that off, I'll be successful in this little 'ol project. ;-)
After doodling a bit in my notebook, I decided I'd start this project by adding a sort of "dashboard" graph section on the payments page on Squareup.com. This would be situated between the top navigation and the list of payments you've received. It'd show you graphs depicting your incoming payments, tips, and card swipes vs. cash, for the last 7 days, 30 days, and forever.
After the graph addition in the Payments section, I figured I'd also try to add two more functions to the site:
A user contact list. After accepting a payment from a customer and sending a receipt to them using the Square app, the customer can elect to have their contact information added to your "Customer List". This action would upload that contact information to Squareup.com where you could view it in list form. This would give you a managable customer database...something you could use to contact customers as well as track metrics about who's buying your stuff.
Profit Sharing. I think it'd be cool to be able to tell Square to portion out some of your profits to a charity you elect, or to a separate bank account you provide. This would allow business owners to give back to their communities in a seamless way. This would work by having Square set a certain amount that you specify aside during each nightly deposit of your balance.
Ok, let's get to work.
First, I gathered and reviewed all the "materials" I'd need: Square's logo, their fonts, colors, padding/margin dimensions..etc. I went to Square's media section knowing they must have an .ai or .eps of their logo and possibly other promotional materials. That would let me save time on recreating things unnecessarily. I started by laying out a "stage"; a pixel by pixel replica/foundation made in Photoshop of what already exists. From there I just started building on top of that...
As you can see above, I separated the top navigation area from the bottom list area that displays the user's payments, and designed a graph/information display showing statistics on a fake user's payments (NiceGuy Comics). I decided on a sort of "transparency graph paper" look for the graph itself, to both match Square's "paper theme" but to also add something new to the mix. I think the effect works; you're supposed to feel like the graph is glowing, just as if you had it printed on transparency paper and shown on an old-school overhead projector.
The U.I. additions I made are as follows:
Below, you'll find two more variations, a pie graph detailing the ratio between profit made vs. tips received, and then a bar graph showing showing the user a cards swiped vs. cash used ratio of payments.
More to come...
In the following weeks, I'll be adding more work from this project. The next addition I want to add to Squareup.com is a customer contact list of customer information you capture during the payment process. Stay tuned, it's going to be fun!
Comments, suggestions, questions? Hit me up at joshuacharris [at] gmail.com.
