Informational graphic. Click for larger image.I'm in the process of finalizing my work for Xipwire, which I've mentioned in a
previous post covering the logo design phase of the project. Xipwire is a startup service that allows its users to text funds to each other. So you go out to lunch with a friend, you wind up owing him $13 but neither of you have change - no problem, if you're both signed up on this service. You text him the $13, it comes directly out of your (very secure) bank account, and the next time your friend logs in, it's desposited into his account. Very simple, very safe, and very efficient - and that's what I needed to convey in this graphic.
The client created a rough version of the chart as a way to get his thoughts together, and to guide me as I recreated and refined it:
He'd used a combination of clip art and found graphics to work this out, and it certainly got the basic information and ideas in place. I started from scratch, using Freehand (they'll have to kill me to stop me from using that program) and strictly adhering to the same color scheme and gradient effects I'd created for the basic website structure. I'm hardcore when it comes to that, and I really feel that when most people who aren't designers work on these kinds of charts and graphs for themselves, the strong tendency to use a variety of colors is what makes them look unprofessional and non-cohesive. Using one font in one color/size/style is always going to look better than varying each sentence and element.
Don't even get me started on the
overuse of
bold and
italic!It was fairly straightforward, though as I told my client, there are always infinite ways to go when representing a human form. Here is the first pass on Violet and Dash, the two avatars he wanted to represent the Xipwire process:
Dig that soul patch on Dash, eh? My client liked the fun, cartoony look, but feared it might be a little too lighthearted, so he asked me to represent the characters in a more (but not totally) realistic style. I took another pass and came up with the current version, which he liked even more, and approved with no changes:
The two characters are almost perfect mirror images of each other, to keep the feel of the chart more iconic and less like a cartoony illustration. I did shrink Violet's nose and chin (women universally have smaller noses than men, right?), darkened her upper lip and gave her a bottom one, thinned out her eyebrows, and added the cliché female adornments of long hair, earrings and eyelashes. A part of me always struggles with these kinds of elements, but in the world of icons, there's no room for subtlety. I really hope I never have to redesign those bathroom door icons, because I know the idea of the skirt-wearing woman icon would drive me batty.
What else? Besides the text, boxes and lines, there are three main icons. The wallets, which needed to convey security (I used a lock - not quite groundbreaking) and also had to show that multiple credit and debit cards can be linked to Xipwire for a single user:
And the bank/credit card icons, which had to indicate Visa and MasterCard logos without getting too close for comfort (or lawsuits). I visited seventeen banks and financial institutions for research on the bank icon. Not really. I just made it up.
If a real bank ever looked like that, it would be pretty freaky, wouldn't it?
And, I needed to render a laptop icon. If I were just drawing a laptop on its own, I'd almost definitely have showed it from a more interesting 3/4 view, but because of the symmetry in this chart, I kept the angle dead-on straight. I toyed with the idea of adding keys, but you can't really add all the keys on a laptop in an icon only 70 or so pixels wide, and it would bother me if Ionly showed a dozen or so keys. I had a hard enough time using only 12 buttons on the cell phone. So I made a keyless keyboard - maybe it's a future Apple innovation. It seems to work, though:
And that was it. It's approved and going on the page of the site that explains the process, hopefully making the service ultra-clear to potential users, persuading them to sign up. That's called "conversion", and it worked on me. I signed up - now I just need to wait for Xipwire to get to its Beta stage so I can start texting money to people. That'll be fun. I can't wait until I owe someone $13.
