Nerdburn - Web application & graphic user interface design blog by Shawn Adrian

Most People Want to Pay Monthly for Web Design

2009-10-31T15:41:00-07:00

As a freelance web designer, I'm always thinking of ways to smooth out the natural ups and downs of project based income. One of the ideas I've been toying with for a while is offering to build websites for a monthly cost, rather than an up front cost to the client. My research about this produced some interesting and positive feedback that has me re-thinking my business plan for 2010.

Self Financing

In essence, by stretching out the payment for a service I'm already providing up front, I would be self financing my customers at 0 percent interest. I chose not to have interest because I think people are leery of bankers and the whole credit based banking system right now, in light of the recession and many financial institutions collapsing.

Here's how it would work: For a project that would cost $6000 to create, a customer would pay me $250 per month for 24 months, and I would perform the work up front. This means that the only deposit I would receive on the work would be the first two $250 payments, not much in light of the value of the work, so I'd be taking a risk. Would it be worth it?

Pick-Fu To The Rescue

If you have a burning question and $5 or $10 to spare, Pick-Fu is the answer. I posted a simple question:

"As a business owner, which payment option would you prefer when purchasing a new web site for your business?"

Option A) Pay $250 monthly (24 month term)
Option B) Pay $6000 once

And within a number of hours I received an amazing amount of feedback.

Most Customers Want to Pay Monthly

While this one A/B test is not conclusive, I think the overwhelming majority to one side reflects a greater truth: Most customers would rather pay monthly for web design. In fact, out of 100 people polled, 82 of them chose to pay monthly. When you think about it, it does kind of make sense. If you compare this to other purchases customers make for their business - cars, office space, telephone service, internet service and shipping accounts, you begin to see a pattern in the way businesses operate. There is a definite pull toward managing income and expenses on a monthly basis, and stretching out fixed costs over time.

Reasons for Monthly Payments

Some of the comments on my Pick-Fu question relay why customers may want to pay monthly instead of all at once.

It keeps working capital in the business for unexpected expenses
It ensures the attention of the web designer over a longer period of time
Bank accounts pay interest on balance, so outlaying the payments over time would accrue more interest

In contrast, the only reasons that people would choose to pay all at once would be to avoid the potential hassle of a monthly bill, and to "get it out of the way". I think these comments reflect a small minority of potential customers.

If you're a freelancer, you've probably already imagined yourself receiving a fixed monthly payment from somewhere, but haven't figured out yet where it could come from. By splitting contracts up over a term, you're basically ensuring yourself a steady income during the slow months, and enabling more month-to-month communication between you and your clients, which is always helpful for gaining future projects.

Finishing Up

Do you have any experience splitting projects up into monthly payments? If so, comment and share them below. Also, if you're interested in checking out the details of my Pick-Fu question, feel free to check it out.

Freelance Designers - How to Level Income With Ongoing Contracts

2009-10-02T12:57:00-07:00

As a freelance web designer, one of the trickiest skills to master is maintaining a steady flow of cash. In years past, friends used to chide me about my "feast or famine" way of life. I've learned a few things since then about keeping things steady, and have written about this subject before, but today I want to talk about just one way - Ongoing Contracts.

Many companies (especially those who manage their own web applications) need design work not just to get a project launched, but on an ongoing basis as users offer feedback and suggestions. Their options are to (a) hire someone in house, (b) hire an agency, or (c) hire a freelancer. Because of the costs associated with options (a) and (b), you can easily present yourself as the better business decision.

Simply offer your services for a fixed number of hours per week, in exchange for a discounted rate, to be paid monthly. By offering a fixed number of hours and a special rate in exchange for a long term contract, you can gain a number of benefits.

Benefits of Ongoing Contracts

A fixed, expected payment each month
A project that allows you to really dig into the details of how your design decisions affect real users
Credibility as a result of long term association with a project

Additionally, the client gains a valuable asset to their project, in that you'll continually be adding to it over time, and you'll be fresh with inspiration from the regular freelance work you'll still be doing.

How It's Working For Me

In 2008, I spent the year working 24 hours a week on Viviti, a popular WYSIWYG content management, which I actually use to author this blog you're reading. During that time I was the only interface designer on the project. We took the project from an idea, to an application, through a beta phase, and into a paid product. Viviti gained my interface design work and still uses it, while I gained steady cashflow and a great experience.

After freelancing for almost a year now through 2009, I've been just been retained by my good friend Tyler Kiley, for 8 hours a week of ongoing interface design work on InQuickER, his web app to get people into US hospital emergency rooms without waiting in line. It's already generated a ton of buzz and some controversy on Hacker News and netted him calls from reporters at Forbes, LA Times, Fast Company, the Atlanta Journal Constitution and other lesser known publications in his home state of Georgia.

My duties will include:

Analyzing the site for UI weaknesses
Designing new pages and interface elements
Designing the back-end administration and reporting system
HTML / CSS
Some Ruby tinkering (to my delight)

Since I'm only offering a limited number of hours each week, the contract is affordable for the client, and effective for me (for things like paying my rent on time). Also, it still gives me plenty of time to keep my existing and new freelance clients happy, so business is good.

How To Land an Ongoing Contract

Landing an ongoing contract is easier than it sounds. Chances are that one of your clients already has a need for ongoing work, but doesn't think you're available for it, or thinks you'll be too expensive.

Here are a couple of things you can try:

Approach a few existing clients with the idea, make an offer
Make sure it's an affordable offer for the client, and doesn't take too much time away from your regular business
Be clear in your marketing that you're available to be retained for fixed amounts monthly

Before you know it, you'll have offers for ongoing work in addition to the stream of one-off projects you already get. Not sure how to get a stream of one-off projects either? I wrote another post a while back on this topic, you may find it interesting as well.

Don't agree? Have something you want to add to this article? Leave a comment!

My Lucky 7 List of Design People to Follow on Twitter

2009-09-26T13:39:00-07:00

Lately in the morning when I wake up, I've been checking Twitteriffic on my iPhone and reading everyone's updates. In the midst of a slew of personal anecdotes and random updates, there are a few people who consistently post interesting content that inspires me to get out of bed and get some work done.

Without further introduction, this is my "Lucky 7":

David Kaneda (@DavidKaneda)

By far the most consistent poster of useful information and links on my list, David makes the list at #1.

WDL (@webdesignledger)

They generally post links to design resources - photoshop tutorials, icon downloads, that kind of thing. Sometimes some very useful stuff shows up here.

David Airey (@DavidAirey)

Author of logodesignlove.com and davidairey.com, David constantly tweets about items worth reading for the inquisitive designer.

Max Stanworth (@designshard)

Not sure how I ended up following Max, but he's managed to last through a few purgings of my followers list by constantly posting useful and interesting design related goodies.

Smashing Magazine (@smashingmag)

Well known and loved, Smashing Magazines twitter feed is a blast of design related goodness, just like their web site. If you're not following Smashing Magazine, you probably should be!

Blair Enns (@blairenns)

Author and blogger, Blair Enns often posts interesting articles to read, and links to his talks and other industry news.

Joe Phillips (@jophillips)

A great designer and clever blogger. He always seems to find interesting things to tweet about.

Who's your Lucky 7?

Show appreciation for the people on your list who consistently post useful information. Put them in the comments below and maybe we'll get a great list of Twitter resources going. Thanks for reading!

Stop Complaining and Start Educating Potential Clients

2009-09-13T13:00:00-07:00

Lately I've been reading a lot of blog posts, rants, and articles demonizing the effects of crowdsourcing, cheap labor, spec work, and other such evils in the world; frankly, it's starting to get on my nerves a little bit. While I'm not promoting any of these practices, I'd like to shed a little light on the scenario to hopefully ease some of your minds if you're fretting about this nonsense.

There are tiers of service and quality in every marketplace, including our own. This isn't necessarily a bad thing. It's one of the foundational principles of a capitalist economy. If you have the ability to provide a better product or service, you're free to offer it if and when you choose.

You The Consumer

Say you wake up in the morning and want a fresh cup of coffee. You have choices, and those choices come in tiers:

Make it yourself at home in your drip coffee maker (roughly $0.30 a cup)
Make it yourself at home using organic coffee beans in a french press (roughly $0.50 a cup)
Head to Tim Hortons or Robbins Donuts (roughly $1.50 a cup)
Head to Starbucks (roughly $3.00 a cup)
Head to a local coffee shop who roasts their own beans (price varies, but usually $3.50 or more a cup)

As a free citizen in a capitalist marketplace, you have the ability spend your money at whichever tier of the market you choose.

You The Service Provider

Now, say you're a web designer who's just set up shop in a new town. You also have the ability to price yourself however you choose.

If you price yourself at the bottom tier, you'll be working day and night making next to nothing, but doing what you love to do anyway. Your clients will be people who don't see the value in a locally roasted cup of coffee, but you may be fine with that.

If you price yourself at the upper end, you'll attract clients willing to spend more, provided you actually provide upper end value in your product or service.

Pricing yourself in the middle will net you a variety of clients, who desire a variety of service levels.

Your Price Should Match Your Service

Generally, people expect to receive more quality for more money and less quality for less money. Don't you? We, as potential customers, have been educated to expect this for years and so we now we expect it. The client spending on the bottom tier (crowdsourcing or hiring their nephew) is likely not expecting top quality service. The client spending in the upper tier is expecting top quality service. If the client expects top quality service for bottom tiered pricing, they've been poorly educated somewhere along the lines and it's your job to re-educate them.

Education is The Solution

Educating potential clients is really just marketing. I find it interesting that so many graphic or web designers fail to grasp this very basic business concept. If you're going to be in business for yourself, you must educate potential clients about why they may want to choose you instead of someone else.

You must educate potential clients about the quality of your work, the experience you have, the results you produce. If you do this, free thinking clients who can afford your price will naturally choose your service.

If on the other hand you have no experience, offer poor quality, and produce poor results, you'll be forced to price yourself at the lower tier or starve until you learn a thing or two.

So, Stop Complaining and Start Educating

Complaining just makes you look like a child. It's time to start taking action - educate clients about why your service is worth the money you're asking for it. If clients want to brew their coffee at home, let them, it's no skin off your back, after all, that's not what you're selling is it?

5 Ways I Use Google Docs as a Freelance Web Designer

2009-04-26T19:46:00-07:00

I never intended to become an advocate for Google Docs, and I'll probably write web apps to accommodate my needs some day, but lately I've found myself using Google Docs every day, without ever intending to depend on it. As a freelance web designer, it's an excellent tool I use to operate my day to day business.

1 - Writing Blog Posts

I'm usually working on a number of blog articles at any given time, and with 3 different computers around my home and office, I used to get a little confused about what I wrote on which machine. I'd often end up with multiple versions of the same article on different machines.

Now, if I want to write a new article that I'm unlikely to finish in one sitting, I'll create a new document in Google and get to work.

2 - Sharing Quotes With Agencies or Other Designers

About 90% of my work comes from design agencies or other designers, all of whom maintain contact with their customers directly, so there's no need for me to produce my nice looking PDF quotes for them as they're going to put the number on their own letterhead anyway. I used to stroke my ego and deliver one anyway, waiting for the compliments from my peers on my lovely used of grid systems and typography on such a bland document, but nowadays I've settled into a more efficient routine with Google spreadsheets.

Whenever I'm asked by an agency or designer for a quote, I just create a new Google spreadsheet, get all the numbers and line items in there with a total, and then share it via email. They're free to modify it so that I can see the changes, and also to copy and paste the data into their own format. This allows the quoting process to be more collaborative and not so one sided.

3 - Maintaining an Ongoing List of Projects

Ok, I'll admit, I'm current writing a web app to replace this useful task, but a simple spreadsheet nails it pretty well in the meantime. Whenever I create a quote, I'll add that project and it's expected value to a Google spreadsheet that maintains an ongoing history of projects month by month.

This allows me to see a total of potential income for each month, compare it to previous months, and also to see after every month what percentage of potential jobs and payments actually came into fruition. This is helpful in determining how much I need to sell on a month to month basis to maintain a regular income.

4 - Personal Budgeting

This is closely related to the last item. I keep a list of my recurring bills in a Google spreadsheet, with totals that need to be paid from each account. For example, I use my Mastercard to pay for things like hosting, telephones, internet, and other automated payments, so my spreadsheet lets me know a minimum balance I need to maintain. I use my bank account to pay my rent, gas, food and other bills and my spreadsheet gives me an idea of how much I need to live on.

As an added note, I also use Wesabe to maintain a historical record of my spending on everything by tag. So I can add stuff like lattes, or movies to my Google spreadsheet to get an idea of what I'm likely to be spending the next month!

5 - Miscellaneous Spreadsheets

I've touched on this in some of the last items, but basically whenever I want to add anything and keep track of it, I create a new Google spreadsheet. It's become invaluable to me! For example, this month I've been planning to launch a creative shared space for tech freelancers in my city (Nanaimo), and I've kept a list of potential expenses, who wants to be involved, how much everyone will pay, and how much is left over.

Wrapping Up

So, there you have it. This is how I use Google docs to run much of my freelance business. Let me know if you have any other clever ideas by commenting below.

Ballpark Proves There's Room for Another Invoicing App

2009-04-11T10:32:00-07:00

Today I learned an interesting lesson I thought I'd write about. I signed up for Ballpark, the terrific new app from Metalab Designs in Victoria, right in my backyard, and was duly impressed. I, like many of you I'm sure, have thought about creating a new invoicing app but didn't for whatever reason. I figured, the market is too saturated - and with competitors like Freshbooks, Blinksale, Invoice Machine, and others, who's got room to make any money there?

Room For a New View

For many of us, cyberspace feels a lot smaller than it actually is I think. Every morning I roll over groggily to the sound of my iPhone's alarm, check my email, and then check my Twitter feed; I marvel at the new apps, designs, and blog posts that enter the world fresh that day. Then once I'm up I chat with the long time friends and co-workers I have on my IM lists, and the internet is a comfortable, familiar place. I have my own view of it.

The problem with this view is that it's a bit small. The internet is bigger than the little room I've carved into it. There are more viewers out there, more target markets, more people joining every day, and it's not slowing down any time soon.

Somehow I've had it in my mind that I can't build another invoicing app, because someone's already done it. I can't blog about that, someone's already said it. While I'm all for original content, fresh ideas, and innovation online, here's a valuable lesson for all of us out there with a killer app idea: Just because somebody has already done it, doesn't mean there's not room for you to do it again with your own unique flavor.

Ballpark isn't that different than Blinksale. It has it's own flavor and some additional features: Estimates and client interaction. Suddenly it's new, suddenly there's room in the market for another invoicing app. Not everyone is going to flock over there from Blinksale, and not everyone using Freshbooks is going to feel a little less fresh - there's room in the market for more, and that's the beautiful nature of the ever evolving internet we call home.

Just Do It

So, what's stopping you from bootstrapping your next web idea? My excuse it that I'm always busy with client work. I keep hoping some day I'll have a month of "free time" laying around waiting for me to rock out the next killer app. Looking back over the years, I've had the time, I just didn't take advantage of it. Sure, I designed a bunch of great client work, and I have a fantastic network of clients who constantly refer more work to me, but I'm sure they'll understand if I squeeze a bit of time in now and again for one of my own ideas. Heck, I bet some of them would even want in on the action.

Just do it - make the time, get your app out there, even if somebody's already done it. Metalab Design just proved it's possible, as have hundreds of other little agencies all over the world, probably in areas I've never heard of. What's happening in your back yard that could be happening in your basement?

Art vs. Design, Passion vs. Cash

2009-03-20T10:04:00-07:00

Over the last 3 months I've been struggling in my mind with the balance between doing what I love, and making a living as a responsible adult.

The 9 to 5 Dilemma

Back in January of 08 I joined up with the Viviti team as the only UI designer on board - it was fresh, exciting, and I told myself I'd give a year of my life to the project, 3 days a week. It's now 3 months over my 1 year deadline and I've only just put in my two weeks notice. Why did it take me an extra 3 months to get up the nerve?

There are things about a 9 to 5 that can be addicting - a regular paycheck, a fun group of guys to work with, a lack of real pressure, and the confidence that other people higher up than you are looking out for your well being. Basically, the need for comfort and stability is a huge draw.

This is a problem for me. I'm a designer because I'm passionate about design. I create because I am creative by nature. This is my passion, my life. When my passion is replaced with my desire for security and comfort, I'm letting go of a major part of what it means for me to be human.

It Goes for Freelancing Too

I'd love to say this is only a problem in the 9 to 5 world, but in my freelance life I can see it too.

I started around 15 years ago with teenage ideals - art for fun, rock'n roll, anti-establishment. I'd spend all night designing band posters, artwork for me, cruising for inspiration and being wow'd by the glorious, seemingly endless, vastness of the internet.

Fast forward all these years to now. I may still shave my head into a mohawk, cruise for inspiration and ride a skateboard - but the real evidence is where the majority of my time has gone; I've given the lions share of years to online banking and interface and web design for business, while half-sewn t-shirts lay in my closet, unused silk screens litter my house, unpainted canvas's beckon from the corner, and unexpressed creativity bubbles to the surface in my every day interactions.

I guess being an adult means I have bills to pay. I guess it means I want that car, bike, boat or house. I guess we all want our Starbuck's or Pete's a few times a week eh?

Finding a Balance

This isn't meant to be a complaint letter - I love my life, I'm happy with what I've achieved and who I am - but there's definitely room for growth.

Think about where you're spending the majority of your time. Think about what your passions are. Why did you get into this work? If your time spent isn't lining up with your passions, it may be time to make a change. I don't necessarily mean doing anything as drastic as quitting your job - but make the time to create what you love, for the sake of being creative.

In Closing

There's a fine balance between living and loving, and in this next chapter of my life I intend to get closer to it. What do you think?

How to Parse Google Maps Returned Address Data: A Simple jQuery Plugin

2009-02-19T12:42:00-08:00

Google maps makes it very easy to add a map to any page - but it's not so easy to extract meaningful address data from what Google returns. The goal of this article is to help you do three things.

Article Goals

Send a string to Google Maps
Parse the response Google returns
Do something useful with the parsed response data

I've created a simple jQuery plugin called jquery.parseaddress.js that will help us along. I'll go through and explain what it's doing further below.

What You'll Need

A Google Maps API key - Get one here
The latest version of jQuery - Download it
The parseaddress jQuery plugin - Download Demo Bundle

Example Usage

Here's an example HTML page using the parseaddress plugin. Feel free to use this with your own experimenting.

<html>
<head>
<title>Google Maps Address Parser - jQuery Plugin</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="parseaddress.jquery.js"></script>
<script src="http://maps.google.com/maps?file=api&v=2.x&key=ABQIAAAA9Hrr6tkKuGxfRHuyIpietBQ7Xg9Ta2yeHpAqGBGjsEdHdZsJLRTluI9qA-Kn-VHt_6Rh6NRVWIR6Ew" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){

   $("#submit").click(function(){
      
      // use parseaddress plugin on an element, send response to callback function
      $("#addressinput").parseaddress(callback);
   
   });

   // function to execute on callback to do somethng with the returned address data
   var callback = function(cleanaddress) {
      console.log(cleanaddress['street']);
      console.log(cleanaddress['city']);
      console.log(cleanaddress['state']);
      console.log(cleanaddress['country']);
      console.log(cleanaddress['zip']);
      console.log(cleanaddress['lat']);
      console.log(cleanaddress['lon']);
   }
   
});
</script>
</head>

<body>
   
<form>
  <label>Address:</label>
  <input type="text" name="address" id="addressinput" />
</form>   
   
</body>
</html>

How It Works

The following bit of jQuery basically says, whenever the browser is ready, execute the following code. This makes sure that your javascript only gets executed after your page has fully loaded.

$(document).ready(function(){

});

Next we call the actual jQuery parseaddress plugin function on an element in the document.

$("#addressinput").parseaddress(callback);

This uses jQuery to find the element with the css ID of addressinput and then calls the parseaddress function on it. Notice we're also sending the variable named callback to the parseaddress function. This is important, as this is the function that gets passed in to handle what we do with the data Google Maps returns.

Next we need to create the callback variable, which is actually a function. You can put whatever you want inside this function - I just chose to output the contents of the returned address to the javascript console.

   var callback = function(cleanaddress) {
      console.log(cleanaddress['street']);
      console.log(cleanaddress['city']);
      console.log(cleanaddress['state']);
      console.log(cleanaddress['country']);
      console.log(cleanaddress['zip']);
      console.log(cleanaddress['lat']);
      console.log(cleanaddress['lon']);
   }

Last but not least, we need a form on the html page to collect the address string from that we want to send to Google Maps. Here it is:

<form>
  <label>Address:</label>
  <input type="text" name="address" id="addressinput" />
</form>   
   
<a href="#" id="submit">click me</a>

This form has only one field, an input with the id of addressinput. If you remember, we attached the parseaddress() function to that element in our javascript. The link below is the function that we wrapped around it so we can activate it.

And that's it! Please let me know if you have any thoughts or questions.

Chubby CMS Framework, Mark Boulton & Other Friday News

2009-02-06T14:36:00-08:00

My eyes feel grimy, I have a coffee buzz, and my feet keep tapping to the unrelenting drum beat in my head as this week comes to a close. My task list feels monumental even though I've been steadily chipping at it all week (I'm imagining it looks a bit like the post-nuclear version of the Washington Monument in Fallout 3 - check it out if you haven't yet).

Ah, but victory is sweet, and Gavin and I are close to releasing the first version of Chubby, our CMS Framework - one of the first of it's kind. Chubby is a PHP5 framework created specifically for creating customized CMS's, removing the need to hack and slash at Wordpress, Joomla, or whichever giant you've been slaying this week. It weighs in at around 150kb so far.

Almost as exciting is the release of A Practical Guide to Designing for the Web, by Mark Boulton. I bought the PDF for $22 CAD, which I'll be honest, feels a bit steep for a PDF only book, especially since it fell apart when I tried to open it on my PC (half the fonts are missing), but thankfully the folks at Apple have saved me once again and it works fine on my Macbook. I'm dying for a hard copy of the book though, as what I've read so far has been really juicy. I've given it to my fiance to read so she doesn't need to go to design school.

In other news, I read a great article on stopdesign about Google's new Gmail buttons. After attempting to make stretchy html buttons of my own for a number of years and only achieving the horizontal variety, with irritating floats or positioning, Douglas' approach seems so simple I'm kicking myself with inspired awe.

I finally got my beta account at graphicriver.net, the new product from our friends at Envato, so I'm excited to upload some goodies for the masses. Additionally, I'm eagerly awaiting the unveiling and beta access to Gist - it's something to do with email that makes me really curious.

And that's it folks, keep checking back for some upcoming great content. I'm still working on my aforementioned interview with David Kaneda, the creator of Outpost (an iPhone app for Basecamp users), and some new tutorials as well.

The 5 W's in Web Application Design: 10 Useful Questions to Answer

2009-01-28T10:44:00-08:00

A subject I enjoyed in high school was English. Unfortunately in my 11th year, my English class was directly after lunch break and I enjoyed being outside with my friends more than I did being in school. During one of those times that I actually attended the class there was an interesting discussion about journalism and an assignment to write a news story. We were instructed to answer the 5 W's in our story: Who, What, Where, When, & Why.

The other day I was reading a great book, Designing for the Social Web, by Joshua Porter and he kindly reminded me of the 5 W's as they relate to web application design. Now, I'm a little attention deficit when it comes to books (I generally read 4 or 5 at a time) so I'm also reading Blink by Malcom Gladwell, which introduces a concept called "thin-slicing", basically: making snap decisions based on information presented by our subconscious mind.

We're all familiar with the 5 W's: Who, What, Where, When & Why. Malcom Gladwell seems to believe people are making snap decisions everyday - to use products, services, and yes, even software. Are we giving our potential customers the information they need to make split second decisions about using our web apps?

Here's a list of useful questions to answer that will help web site visitors make better decisions.

Who

1) Who is this for? - Communicate right up front who your target market is and try not to be too broad. A visitor should know right away if you are talking to them or someone else.

2) Who is using it? - Are there any well known examples of your target user? The guys at 37signals did a great job of this by having video testimonials of well known designers and companies using Basecamp. People tend to follow other people: give them some good examples of people to follow and they will.

3) Who created it? - Don't hide behind an obscure corporation. Tell potential users of your web app exactly who you are. If you're creating the application for a corporation, try convincing them to let you present a page with the key team members on it. People relate better to other people.

What

4) What is this? - Is it a web site? A mobile app? An iPhone app? Come right out and say what it is. Too often we get caught up talking in marketing jargon. Words like tool, system, solution. Rather than saying, "A solution to your email marketing needs", say something like, "We deliver opt-in emails to 2,000,000 customers." See the difference? One presents an idea of what it is, the other communicates exactly what it is.

5) What does this do? - Does it send millions of emails? Does it catalog contacts in your address book? Does it send invoices? Say it clearly.

When

7) When is the best time to use it? - Give examples of situations where your application will come in handy. What were the use case scenarios you thought up during development? Let potential customers know when your app will help them out.

Why

8) Why use this at all? - This question can be answered in a number of ways, but it's important that your "why" is different than your competitors. You'll want to grab a slightly different angle.

9) Why is it better than other similar apps? - Or, worded differently, why would somebody choose your app over one of your competitors? Outline the similarities and differences so people can make educated decisions.

How

10) How do i use this? - It always helps to have a step by step description of using your product or service. Many popular web apps now are creating screencast videos of performing certain actions on their apps. This is a great idea, but make sure to outline the steps in text as well.

A Couple of Examples

Here are two examples of web sites that do a good job of explaining the 5 W's (and an H) in their interface and marketing on their web application.

Twitter

Here's a screenshot of Twitter's home page, with the answers circled in pink:

Basecamp

Here's a screenshot of the Basecamp home page, with the answers circled in pink:

Wrapping Up

Do you have any more examples of web sites that use the 5 W's (and an H) in web application design? Link them below in the comments!

Tactful Error Messages in Web Application Design

2009-01-22T12:00:00-08:00

In my previous article, I touched on the idea that users of web applications perceive error messages as direct communication from the developer or proprietors of the site in use, and that these messages are an extension of an ongoing brand conversation that exists. I also briefly mentioned the need to use tact when conversing with the opposite sex.

To continue on with this idea of relationships, conversation, and error messages, I want to draw a similarity between using tact in "real life" conversations, and how it can be used effectively in virtual conversations with customers through better error messages.

What is tact and how does it relate to web application design?

At it's essence, using tact is a form of manipulation; it's kind manipulation, but manipulation all the same. Communicating tactfully is the art of saying something with the intention of motivating somebody to respond in a certain way, or perform a certain task.

The dictionary defines tact in this way:

NOUN
1. A keen sense of what to say or do to avoid giving offense; Skill in dealing with difficult or delicate situations.

The military uses tactics (a closely related word), to accomplish it's missions.

You can probably see where I'm going with this. Since an error message is a communication with the intention of convincing someone to perform an action, it makes sense that error messages should be written with tact.

Do you want your users to use your software in the way it's intended to work? Communicate tactfully.

How to write Tactful Error Messages

Now, I'll be honest, I'm not an expert on tact or etiquette, and I'm no Jakob Nielsen. I'm just sharing what makes sense to me, it might not make sense to you. In my opinion, a tactful error message should include these 3 key steps:

Communicate the problem
Communicate how to fix it
Communicate why to fix it, give incentive

Password Example

A poor example:

A tactful error message:

404 Example

A poor example:

A tactful error message:

Password Length Example

A poor example:

A tactful error message:

Communicate The Problem

Try telling the user what's wrong without using any technical jargon. It takes a few more words, but it will give your visitors more comfort if they understand why they received an error in the first place. Words like invalid, fail, error & exception create negativity. It's important to communicate what happened in a non-accusatory, positive, descriptive manner.

Communicate How to Fix It

It's amazing how many error messages I come across that say what's wrong (in the bluntest way possible) but give no indication how to fix it, just a red arrow or text near a field on a form. Give a detailed description of how to correct the problem.

Communicate Why To Fix It, Give Incentive

This is the piece that is most often left out, but contains the most tact. Why do we require certain information from users of our applications? How does it benefit them to jump through the hoops we set in place? It's important to communicate why.

If you require them to have a password with both numbers and letters, tell them it's because it will make it more difficult for hackers to get their personal information. If you need them to re-enter their username or password on log in, tell them it's because what they entered didn't match your records and that they'll be able to log in if they correct it.

Moving Forward

This is really just the tip of the iceberg when it comes to talking about extending brand conversations through communications in web applications, but it should spark some thought the next time you're writing error messages. Do you agree with me? Do you disagree? Add a comment and keep the conversation going.

Error Messages in Web Applications and Customers Perceptions

2009-01-14T10:39:00-08:00

The other day over sushi I was having a conversation with a few guys and we found ourselves chuckling over a peculiarity we found with the women in our lives. It seems that when talking to our significant others, a bit of tact is necessary to get our way, even though we're essentially saying the same thing, tact or no tact.

For example, I could say to my girlfriend, "Honey, get in the car now so we can leave" and she might do it, but grudgingly. However, if I said, "Honey, I'm going to start the car now, so why don't you grab your purse and we can leave?" She'd likely head off to get her purse without a moments hesitation (provided she was ready to go).

In both cases, I mentioned that we should get in the car - one with tact, one without. Now, let's think about error messages in web application design for a minute (which is easier to understand than women, coincidentally).

Hello World

It seems the first thing anyone learns in any programming language is how to print "Hello World" to the screen. Now, let's not read into this too deeply, but I figure there's an innate need in us, as human beings, to hold conversation.

As developers get more deeply into an application, we build messages into it that tell us what's going on. Just like displaying "Hello World" to the screen, we're enabling our program to talk back to us. Our perception as developers is that our program is talking to us. We create conversations between ourselves and our applications.

So, Who's Talk to Our Customers?

Interestingly enough, customers, most of whom have never written a line of code in their lives, don't always carry the same perception with them. Rather than assuming the application is conversing with them, they're more likely to interpret any communication from the application as coming directly from the organization who operates the application.

Suddenly, the application we've created, with all its' functons, lines of code, quirks and bugs, has morphed into a living representative of the company we built it for, or, for ourselves as we launch our own apps. The application has become capable of having conversations with customers on our behalf, and they assume these communications come directly from our own mouths.

Conversations in Branding

This idea of conversations may feel a bit new to web application design, but it's old hat to the advertising and branding community. There's been plenty of chatter about creating authentic conversations between brands and consumers for years. So, what kind of conversations are the apps you're building having with the customers who use them? Are they short and to the point? Are they borderline rude? Or do they interact like the human beings they represent?

My next article is going to offer a few tips and tricks for writing what I like to call Tactful Error Messages in web application design.

Some Further Reading

Lately I've been reading through the web version of 37Signals Getting Real, which, hardly related to the content of this article, is a great read. Also, Designing for the Social Web is a great book I've been reading lately, as well as Blink. Stay tuned for my next article on tactful error messages. Thanks for reading.

Productivity & Inspiration to Kickoff 2009

2009-01-09T10:31:00-08:00

While weather in Vancouver flips flops between winter and spring and the stock markets continue to flip flop daily, we've just flipped over to 2009, and I'm a week late in welcoming you all to the new year. So, without further commentary...

I stumbled across a beautiful re-brand by Moving Brands of Norton & Sons, a bespoke tailor on Savile Row yesterday. I mean literally stumbled the old fashion way, by clicking from one site to the other. It's truly inspiring so check it out. Speaking of StumbleUpon, apparently this site has been blocked because I "stumbled" my own blog entries a few times? Would I write this stuff if I didn't think it was interesting?

In other news, I recently bought Outpost (an iPhone app for Basecamp) for $12.99, thinking the price was a bit steep for the app store, but when I fired it up I realized how worth the money it is. Maybe it's the combination of Apple's iPhone GUI with Basecamp functionality, but in my opinion, Outpost is almost easier to use than Basecamp itself. To celebrate, I've confirmed an upcoming interview with developer David Kaneda from Morfunk, so check back here for that soon. Have you tried Outpost yet? If not, get on it.

A Few Tips From Uncle Shawn

Now, since it's a New Year, I've been working on getting my finances in order, something all of you freelancers should be doing (or have done already).

Keep track of your invoices this year, I use Blinksale and it's quite simple.
Don't be afraid to pay for services that will keep you organized like Basecamp, Blinksale, Freshbooks, or whatever is your fancy this year. Just work them into your business expenses.
For my personal spending, I like to use Wesabe to categorize / tag my transactions, it's a miracle worker.

It's 2009 & You're Still Flipping Pancakes?

Yea, me too. When doing project after project and getting paid for each, I call this flipping pancakes. It's just one after the other, and if I stop flipping I'll go under. I have a few ideas this year that I'm going to launch, so look out ;)

Why not come up with your own idea to create residual income this year? Subscription based web services are a great place to start. Think of a gap in your own productivity toolset and fill it. Chances are someone else will want to use it too, maybe they'll even be willing to pay for it.

Here's to a fantastic 2009 for everyone.

4 Great UI Designs for E-Commerce Web Sites

2008-11-28T09:50:00-08:00

E-commerce is one of those areas where great design really adds to the user experience. Whether it's injecting some extra excitement into the shopping sensation, or presenting a lot of information in an easy to digest manner, we have our work cut out for us as designers while creating UI for e-commerce.

I've noticed a few great designs over the last few months, both aesthetically and functionally so I thought I'd throw a bunch of screencaps at you for inspiration.

ShoeGuru

The Canadian shoe retailer ShoeGuru has a slick, minimalist design to house their inventory of Gola shoes, while using Pay Pal for everything from the cart to the checkout. It seems to be working though!

Etsy

As designer's, most of us familiar with and love Esty. Some of us have products there, or aspire to sell products there (ha, I'm still working on my T-shirt designs). Considering how many products are on Etsy, it's practically an e-commerce mega-site, but definitely doesn't feel that way.

TokyoCube

Selling some fantastic Japanese toys, art, and clothes, TokyoCube is a fun company, with a fantastically fun online shopping experience. There is a lot of great detail in these designs, and I think the subject matter just makes it even more technocute.

FontShop

A retailer of fabulous typefaces, FontShop could have gone with a boring site like many in the genre, but instead their design can stand alone, while featuring the products they sell. Pretty impressive in my opinion. I didn't get a screencap of it, but they also have a nice "Add To Cart" effect when you add a font to your basket.

Get Designing!

Now that you've had a few minutes to gander at some other design projects, it's time to take that inspiration and get back to work... I know I should anyway. But first, let everyone know what your favorite e-commerce sites are, from a graphical design (how it looks) and usability (how it works) standpoint below. Leave a comment, and have a great Friday!

3G Nanaimo, Outpost for Basecamp, and My iPhone

2008-11-26T10:44:00-08:00

I rolled over this morning at 7:15 AM to the sound of the alarm on my iPhone, lazily reached around for a minute to shut it off, and then groggily checked my email as I always do. To my delight, in the upper left corner, next to three glorious bars of service, was a brand spanking new 3G icon in place of that depressing little E. Hear that people from Vancouver Island? 3G has finally reached Nanaimo.

Thank you Rogers Wireless, we can (almost) be friends again.

In other news, I was on the bus today thinking about how much I'd love to use Outpost to check my Basecamp during the 20 minute ride to Viviti, so I checked out outpostapp.com and found it amusing that the site seems to virtually explode all over iPhones version of Safari. Well, at least they're working on the app instead of the web site, ha.

Speaking of the iPhone, I found a funny quote by someone named Phil on pleasefixtheiphone.com the other day:

"Lack of MMS support. People laugh at my iPhone because its the only phone since 2002 that can't send or receive picture messages. Why am I ashamed to have the most advanced mobile hardware in the world?"

A wonderful company called FullSIX in NY made that site, and in my opinion it's pretty cool.

My biggest qualm with my iPhone is that I can't seem to figure out how to edit the in-memory dictionary to stop capitalizing the word "nerdburn" every time I write it. Does anyone else know how to do this?

Average Web Designer Incomes: How To Set Your Freelance Hourly Rate

2008-10-22T11:13:00-07:00

Like many freelancers, when I decided to go full time freelance back in March of 2007, I was unsure what to charge. After polling my freelance friends and other designers and doing a little googling, I discovered the amazing rates calculator on Freelance Switch and personally determined that I should charge $35 an hour, based on the costs in my area and my desired standard of living.

About six months later I was accepting a couple of new jobs a week and felt busier than a kid with attention deficit on Ritulin and energy drinks, so I decided to raise my rate to $45 an hour to (hopefully) slow things down a little bit.

Anyway, all of this preamble is just to say that choosing your rate is a personal thing, so there is no right or wrong rate, but you should consider a few things when coming up with one that is right for you.

A Few Things to Consider

Here are a few things to consider when choosing to set your freelance rate.

Your rate should be higher than what your friend is being paid per hour at a local agency.

Why? Because you need to cover your costs. Consider in your rate things such as rent, telephones, internet, and other costs that agencies calculate over and above the wage they pay their designers.

Collis Ta'eed, founder of Freelance Switch and (I think) designer of the Freelance Rates Calculator put it this way:

"The best thing to do is sum up all your costs and divide by the number of hours you think you can bill a year." - Collis Ta'eed

I mostly agree with this, but take into consideration that if you live in an area with relatively low living costs, you may price yourself too low and get more work than you can handle, like I did.

Your rate should fit with your moral values.

What I mean is, if you feel like you're gouging your clients, you'll come off as apologetic and unprofessional in your communications. Choose a rate that you believe is fair based on your costs and desired standard of living.

Your rate should in most cases be relative to the industry you work in.

For example, in a study performed by the U.S. Bureau of Labor Statistics in 2007, the average income for a graphic designer by industry was:

Specialized design services: $48,790
Newspaper, book, and other publishing: $39,390
Advertising: $46,990
Printing: $38,880

Also, here's a breakdown from Simply Hired, who allowed me to generate a nice graph on their web site today:

Basically, these figures indicate that as graphic designers and web professionals, our rates can vary anywhere from $45,000 to $75,000 per year, so ideally you'll want to choose something that fits into this range.

In Closing

What to charge is ultimately a personal decision, but you can make it easier on yourself by considering some of the factors I've mentioned above. If this article has helped you or if you disagree, please comment below. Also, I'd appreciate if you would digg or stumble it, as that will help to share it with others.

Freelancers: Two Methods for Making Sales the Easy Way

2008-09-20T05:19:07-07:00

Growing up in a family of entrepreneurs I was constantly told, "You can have the best product in the world, but if nobody knows about it you're still going to be broke." The point is, if you're going to succeed in this (or any) business, you need to be in the business of selling.

So, what are you selling?

As a professional who provides a service, I often realize that I'm not actually in the business of selling web design, I'm actually selling... myself. That's right, if you don't like me, you're likely not going to hire me because there are thousands of eager geeks lining up for the job.

As a teenager, I did a web site for a local tailor shop, got a free suit out of the deal and set out to make my millions selling door to door. I recall a hilarious encounter with one would-be client, the owner of a large hotel in a small city who actually said to me scornfully, "You're a web designer? So what. You throw a stone nowadays and you hit a web designer. You guys are in here every week. Why should I listen to you?"

And this is where the line is drawn between selling the easy way, and selling the hard way.

The Hard Way

Cold calls, leads, follow-ups, fake smiles and suits; we've all been the victim of the poor sap in a suit, slinging a product to make a living or the crafty salesman trying to swindle us into buying something we don't need. The hard way of selling is being just another stranger selling a product.

Don't sell products, sell yourself

No sales pitch required. The nice thing about selling yourself, is that you can be yourself. Here are a few methods I use that have a sure-fire success rate:

1) The Shop & Talk Method

This is my favorite way to sell. Simply go shopping... walk from store to store, check out products, and linger in the stores you enjoy the most. Eventually you'll encounter a salesperson or even the owner of the business, and that's where the magic begins.

(you) "Wow, I love the design on this T shirt, who makes it?"
(salesperson) "Oh, they're a company out of Canada I think. Pretty sweet eh?"
(you) "Yea, I've always thought it would be fun to design T shirts. I make web sites right now."

At this point the person you're talking to will either express interest or ignore you. If they express interest, tell them a little more about how much you love your job, and if they need a web site, they'll ask you for help. It's as simple as that. No sales pitch.

2) The No Bullshit Email Method

When I don't feel like leaving the house, I use this method, which is lazier, but still effective. Simply do a Google search for a topic, like "web design vancouver", or "chrome plating los angeles", and start cruising the web sites. When you encounter one that needs some work, email them with a no bullshit, no salespitch personal message.

If it's an agency:

"Hey, I'm a freelance designer in the area, check out my portfolio if you could use a bit of help. Cheers."

Believe me, if they're looking for help, they'll click the link to your site in your signature. If not, you don't want to be cold calling them anyway.

If it's a business directly:

"Hey, What would it cost to chrome plate the frame on my motorbike? I have a 98 Ninja. Also, I'm a web designer, I'd love to help out with your site if you're interested. Send a note back either way. Cheers."

Or, if you don't want to ask about a product:

"Hey, I just noticed ____ and ____ about your web site. I'm a web designer and I'd love to help work on it. Let me know if you're interested. Cheers."

Again, if they're interested, you haven't invaded their business in any way, you didn't subject them to reading (or immediately deleting) a long boring sales pitch, so they'll likely get back to you. If they're not interested, they simply won't return your email.

To Sum it Up

In order to sell your services, you need to first sell yourself. You sell yourself by being yourself, shopping where you enjoy, emailing businesses you'd shop at, and by not caring whether you close a sale or not. You're here to live your life, you love your job and you're damn good at it. Don't worry about making a sales pitch, just offer to help wherever you can.

If you liked this article, or if you disagree completely, please comment below! Also, I would be forever (ok, so not forever, but briefly) in your debt if you would Digg This as well.

Some Web Design Inspiration

2008-09-18T05:54:41-07:00

I found a great blog site today on CSS Mania (a nice resource for inspiration) by author Jason Bradbury and thought I'd share it.

Jason Bradbury

I love how you can change the color of some of the items, and how the background changes on reload. The PNG transparencies up top work beautifully, though I haven't tested it in any browsers other than Firefox 2 on my iMac.

Nice eh? Also, here are a couple more links for inspiration today:

Have you been wowed by any great sites lately, or galleries of interesting work? Feel free to comment them below!

Stop Kicking & Ride The (Not Quite) Dead Advertising Horse

2008-09-10T14:36:38-07:00

Maybe it's the books and blogs I read, or maybe it's the rise in popularity of the disaffected emo rocker in mainstream media, but it seems lately that everyone is declaring the death of advertising. Advertising is dead, the consumer reigns supreme, we get what we want and ignore advertising completely.

If you look at big spenders in advertising over the last years, companies like GM and Coca-Cola who's advertising budgets have increased but sales have dropped dramatically, you may be inclined to believe the naysayers.

A Lack of Credibility

In their latest book, The Fall of Advertising & The Rise of PR, Al & Laura Ries present a couple of very interesting points about traditional mass media advertising:

It lacks credibility - We know that ads are ads, and we view them with a grain of salt. Am I going to get exactly what is advertised? Will this product change my life? Probably not.
Its pretty but not persuasive - It's no secret that designers are out to be creative and win awards, and it's also no secret that ads that make us laugh don't necessarily persuade us to buy the products they tout. Budweiser spends more each year and has hilarious advertising, but sales have been giving way to Coors Light annually.

One Word Equity

In the Financial Times, Saatchi warns of the death of advertising, saying he believes it has been extinguished by a change in consumer culture and commerce. He believes, similar to Ries' theory from the 70's that brands need to occupy a single position in the consumers mind, and that their position can be summed up by one word. What is a unique word to describe each brand? Out of only 750,000 English words to choose from, there may be tough competition for major brands to capture their ideal position, and it's advertising's role to put this word in our minds.

Maybe I haven't read enough yet, but I'm unclear on how advertising, a medium that fundamentally lacks credibility, is meant to instill knowledge of and belief in this "one word equity" for each brand in our minds as consumers.

No Shortage of Sales

One would think that if advertising as it is were dying, we'd see a significant decrease in consumer spending, credit card debt, travel and generally unnecessary expenditures, but in his latest book author and fellow blogger Rob Walker shares that exactly the opposite is happening. Consumers are spending more, credit card debt is at an all time high, and products are flying off the shelves at record speed.

The Butterfly Effect

So if advertising is dead but products are selling every day by great new brands, what is going on?

As the ugly worm morphs into a butterfly late in it's life, I'm inclined to believe that advertising is changing, and not dying at all. Sure, consumers have more direct influence over new products, we're empowered by YouTube and blogging, but we still want to buy things, and we differentiate products from one another largely by their brand names.

Al & Laura offer the theory that public relations (PR) is the only credible way to build a brand, whereas advertising should be used to remind us of what we already know about the unique position in our minds that existing brands hold. Rob touches on something similar in his book, Buying In: The Secret Dialogue Between What We Buy and Who We Are, when he talks about the salience of a brand: our awareness of it.

Public relations tools such as local news, newspapers, word of mouth, and magazines tend to deliver stories that people want to read, and more importantly, that people tend to believe. It makes sense then that PR is a more credible way to communicate a message than advertising, and that advertising is meant to re-inforce that message once it's been communicated.

What This Means for Web Professionals

This idea of public relations as the main vehicle for brand building gets me really excited as a web professional. We blog (public relations), we use Google Adwords (advertising), and we design businesses on the web through web applications. It's our job every day to design interactions with customers that can potentially form the backbone of direct customer and public relations. We can put words into people's minds about new products and ideas; and for those of us who are freelancers we can potentially do it all for much less money than traditional advertising firms, and with more credibility in the public relations world.

Moving On

I'm sure I've only scratched the surface of this topic, so please share your ideas and opinions by writing commments, and don't forget to digg this if you found it interesting.

Silverback Helps Usability Testing

2008-08-22T11:50:42-07:00

So today I downloaded Silverback because I noticed it's finally available, and wow am I impressed! Great work guys. This is going to be perfect for my upcoming usability testing on Viviti.

I love the gorilla theme and the beautiful vector gorilla illustration, which I'm assuming was designed by Paul Annett over at Clearleft, but please somebody comment and correct me if I'm wrong.

If you have an Apple, and need to record somebody using a web application for any reason, download the free trial of Silverback today and get on it! The retail version will cost $50, but in my opinion it's worth it. What do you think of Silverback?