Don't buy umbrellas, test your product

In 1999, the U.K. Passport Agency implemented a new Siemens computer system, which failed to issue passwords on time for a half million British citizens. The Agency ended up spending £12.6m to try and fix the mess, including £16,000 for umbrellas for the long lines of people outside the building waiting for a passport.

Quality assurance (QA) is easy to forget or underestimate when a project is low priority or quickly approaching a deadline, but missing this step will almost inevitably cost more in the long run. Had the Agency spent more time testing the new system, and not pushed it live so quickly, millions could have been saved. Though you may never have to buy umbrellas to solve problems caused by inadequate testing, you’ll likely incur serious costs if QA is underestimated.

At Brighten we’ve found that, depending on the project type, it is wise to devote up to a quarter of total project time on QA. Although this may seem like a sizable chunk of time, it keeps us from spending that time in the future, and allows us to deliver quality initially.

Over the next few weeks I’ll be writing about some of the key parts of QA for the web. I’ll share some of the techniques that we’ve found to be useful in our QA process, and some ways we’ve made our QA process more efficient. At this point I’m planning to cover these topics:

• Our recommended QA process
• Choosing who should do the testing
• How to test:
  • Functionality
  • Layout and design
  • User experience.

Do you have any other questions about the QA process that you’d like answered? What kind of experiences have you had with QA (or the lack of it)? Let us know in the comments below.

References

• Photo of umbrella from // solidether on Flickr
• BBC News: Holidaymakers may foot bill for passport chaos

If I borrow for inspiration, am I a bad artist?

Creativity—its a mysterious thing. As a graphic designer and amateur photographer, I’ve spent a significant part of my life struggling with how sporadic creative inspiration can be. I’ve had to admit that I can’t control it at will. Maybe this is old news, but for me, it was a surprising realization. Most of us in the creative arts have at some point stared at a blank sheet or screen wondering why nothing was spilling out of our imaginations. Aren’t we supposed to be the professionals? Why is it such an incredible feat to come up with something original? Now, either I’ve expertly deluded myself into thinking I have any creative talent at all (possible), or I’m misunderstanding a key aspect of the creative process.

In my estimation, the number of truly, ultimately creative individuals in all of history can probably be counted on both hands. Their talent was so great that we would expect one of these geniuses to be able to birth a masterpiece while locked in a white-walled room sans outside influence. This ability to seemingly bring “something from nothing” is proof of at least one thing differentiating the masters from those of us lower on the creative continuum—appreciation and reverence for inspiration.

When I’m faced with a blank slate (a new website, brochure or book cover), my creative process often goes something like this:

1. Stare at the screen for 20-30 minutes, hoping the design will magically appear
2. Give up
3. Visit a few websites showing the latest trends and examples
4. Meld the best elements from the examples to create a “new” piece that fits the client’s requirements

I can tell you from experience, this process is definitely not unique in the creative arts industry. Is it stealing? Some might think so. Yet even the most talented artists will readily admit being influenced by others in their realm of work. So where do we draw the line? When does looking for inspiration become shameless copying?

Some quick research into the classical works shows us that even the most revered composers were guilty of borrowing for inspiration. A passage in Handel’s Messiah, for example, was strongly influenced by Fuga a Quattro Voci, a piece written years prior by Arcangelo Corelli. Many of Bach’s chorals were harmonizations of existing Lutheran hymns. Interestingly, we give Bach most of the credit for these hymns, not because we think he was the original composer, but because of how exquisitely he pieced together the alto, tenor, and bass parts. We stand in awe of masters like Handel and Bach not because they never borrowed from existing pieces or from their contemporaries, but because of the perfection with which they fit together each element in their compositions.

And this is precisely my point. Great artists don’t necessarily borrow less often. Their skill lies in the beautiful perfection they’re able to create with the elements they have, whether original or taken from others. What results is something that often appears new and different—something great—even if it isn’t purely unique. The reality is (as Solomon wrote in Ecclesiastes 1:9), “...It has all been done before. Nothing under the sun is truly new.” With this realization, my focus has begun to change. When I’m working on a design project, instead of worrying that what I’m creating may be similar to what someone else has already done, I try to focus on taking the best elements and combining them in the most beautiful and effective way.

So don’t be afraid of looking for a little inspiration outside of your blank canvas or screen. Its ok! You’re not committing a crime by appreciating and borrowing a little from another’s work (as long as you’re not violating copyrights or trademarks, of course). Just make sure you take the next step and add your own touch. To be a great artist requires more than just combining pieces from everyone else’s ideas. Like a master composer, you have to figure out how to combine the elements together into something greater than the sum of the parts. Something that seems new and different. Something inspired.

Cure flat forehead phenomenon in 10 minutes

If you get stuck on a problem in your HTML, JavaScript, CSS, or other code, stop banging your head on it and ask for help. With the wildly popular website Stack Overflow, it’s faster than ever to get the answer you need. Gone are the days when you have to slog through page upon page of mailing list archives to find, finally, that the problem remained unresolved.

The genius of Stack Overflow is that it rewards those who give great answers. Programmers race to answer a question faster and better, receiving “reputation points” when you accept their answer.

Many questions are answered within minutes of being posted, and some get their first response within a matter of seconds. In some cases, however, a question will go unanswered for a long time. Here’s how to get answered quickly:

1. Use the search box at the top of any page on the site to see if the question has already been asked.
2. Log in. OpenID is supported, so you can use your Gmail or Yahoo! account to log in.
3. Carefully write the title. Remember, people are racing to find questions that they think they can answer, so make it specific and concise.
4. Describe exactly what you have tried, and include code snippets. The person attempting your question should be able to use the code you provide to reproduce the problem on their own computer.
5. Format your code snippets. Indent the code four spaces, and it will appear in a gray box with syntax highlighting. Use the preview pane below the question box to check if your question is easy to read.
6. Describe the symptoms. Never, ever say “it’s broken” or “it doesn’t work.” Instead, describe precisely what you expect to happen and what is happening instead. Include all error messages and any other clues.
7. Help them help you. If an answer isn’t helpful, add a comment describing why. People are likely to revise their answer to make it more helpful if they think they can.
8. Ignore jerks. Resist the urge to comment on rude comments or answers. If an argument starts, people are more likely to join the argument, rather than answer your question.
9. Mark your favorite answer. The person who wrote it will then get a reward of 15 points, and you’ll get 2 points. Otherwise you’ll get a low “accept rate,” which reduces the chance that anyone will answer your future questions.

Measuring your marketing in 3 simple steps

A lot of time and money is spent to drive online traffic these days – Google AdWords, SEO, billboards, radio sponsorship, magazine ads, not to mention the social space. It’s great to have time and money to invest in marketing, but what kind of a return are you or your clients getting? This post will walk you through a quick way to determine which marketing methods are getting you results online.

For an example, let’s use CashCurve, a dead-simple web app for cash forecasting that we recently launched. At this point we’re just looking to find a few subscribers to try it out and give us some feedback. So we posted updates about CashCurve on our personal Facebook pages, blogged it, e-mailed folks, posted it on LinkedIn, and asked for feedback on Hacker News.

In just a few minutes in Google Analytics we can figure out what method of marketing was most effective. Here’s how.

1. Segment visits by traffic source

The natural place to start is by looking at our top traffic sources. Where is our traffic coming from? In Google Analytics, simply click on “Traffic Sources” and then “All Traffic Sources”.

Clearly Hacker News (news.ycombinator.com) has brought in the most visits for CashCurve. Number of visits tells us nothing about the quality of traffic though.

2. Segment visits by conversion

Now, in addition to segmenting by traffic source, you add segmenting by conversion. Most commonly this will be people completing an action on your website, like signing up for an account, submitting a contact form or completing a purchase.

This can be done with “Goals” in Google Analytics, but custom segments provide much greater flexibility. All you need to know is the URL someone would visit only if they completed the outcome. On CashCurve, this would be someone who visits the sign up form and then visits the Dashboard. Here’s how to set up your custom segment:

1. Above your traffic graph, beside “Advanced Segments” click on “All Visits”
2. Click “Create a new advanced segment”
3. Under “Dimensions” click “Content”
4. Drag “Page” to the “dimension or metric” area on the right
5. Now enter the exact URL for the outcome you’ve chosen (e.g. /dashboard)
6. If the URL for the outcome you’ve chosen has a part of it that is variable (e.g. /dashboard?123) then change “Matches Exactly” to the appropriate condition.
7. You can add additional refinements to this segment with “or” and “and” statements.
8. Enter a name for your segment below and click “Create and Apply to Report”

Beside “Advanced Segments” above the graph you should now see the name of your segment. Click the name to display Advanced Segments again, check “All Visits” and click “Apply”.

3. Dig for insights

We can begin to uncover our best marketing channels by answering the following questions using our report.

1. Which traffic source generated the highest number of conversions?
2. Which traffic source generated the highest conversion rate (%)?
3. Which traffic source generated the highest degree of engagement (low bounce rate, high pages/visit and average time on site)?

For CashCurve, we can see that the only marketing channel we pursued that generated results was Hacker News. The other top 3 traffic sources are likely related to Hacker News as well. One interesting twist is that Twitter’s conversion rate was over 5%. The sample is too small for clear conclusions, but it does mean providing easy ways to tweet headlines in the future could be very beneficial.

Which marketing channel has been most effective for you? And the bigger question, why?

FreshBooks, Ruby on Rails, and OAuth

In our experience working with OAuth, Ruby on Rails, and the Freshbooks API, we’ve found the documentation to be sadly lacking. In this post I’ll explain how we’ve managed to get these three to play nicely with each other. We’re running Ruby on Rails 3 with the ruby-freshbooks and oauth gems installed.

Getting Setup

1. We registered to be a FreshBooks OAuth application. It can take up to 5 days for them to approve your application, so you’ll want to do this step right away. To apply, login to FreshBooks, click on “My Account” then “FreshBooks API”. If you don’t already have a FreshBooks account, you’ll need to create one. Once registered, you will have the two key pieces of information needed to continue:
   • Consumer Key: Your FreshBooks system name (the portion of your account domain before freshbooks.com)
   • OAuth Secret: Found under “My Account” then “FreshBooks API”.
2. We added three fields to our users table in our database. You’ll need to be able to store each users FreshBooks URL, and if you don’t want them to have to log in to FreshBooks repeatedly, a place to store their access token and secret. (See the Token Expiry section in the Freshbooks OAuth Docs ).
3. We installed both gems (ruby-freshbooks 0.3.0 and oauth 0.3.6). UPDATE: We’ve found that different versions of these gems don’t work well with our code.
4. We installed our basic library code in the lib folder. We relied heavily here on the examples found in Paul Gallagher’s Twitter OAuth sample.

The Code

In a new Freshbooks controller we created three key actions:

Getting a Request Token
This action gets a request token from Freshbooks and stores it in the session for later. It then redirects the user to the FreshBooks authentication screen. They log in, and FreshBooks returns them (along with a verifier) to our callback method.

def request_token
  fb = FreshbooksOauth.new(current_user.fb_url)
  @request_token = fb.get_request_token(fb_callback_url)
  session[:fb_request_token] = @request_token.token 
  session[:fb_request_token_secret] = @request_token.secret
  redirect_to @request_token.authorize_url    
end

Callback
In the callback action, we get an access token and secret using the data we’ve gathered so far. We save those in the database so the user doesn’t have to repeatedly go through this process when they want to access Freshbooks data through our app. Then we redirect them to the show method where they can view the data.

def callback
  fb = FreshbooksOauth.new(current_user.fb_url)
  @access_token = fb.exchange_request_for_access_token(
          session[:fb_request_token], 
          session[:fb_request_token_secret], 
          params[:oauth_verifier])
  current_user.update_attributes(:fb_token=>@access_token.token.to_s, 
          :fb_secret=>@access_token.secret.to_s)
  redirect_to fb_show_path
end

Showing FreshBooks Data
The show action is what we send users to by default when they try to import FreshBooks data. If they have not been authenticated previously (i.e. we don’t have an access token or secret for them), or if there’s an authentication error we redirect them to the _request_token_ method to authenticate with FreshBooks. Otherwise we use the Ruby-FreshBooks gem to make a simple request to FreshBooks.

def show
  if((current_user.fb_token.blank? || current_user.fb_secret.blank?) 
      && session[:fb_error].blank?) 
    session[:fb_error] = true
    redirect_to fb_request_token_path 
    return
  end

  client = FreshBooks::Client.new(current_user.fb_url+'.freshbooks.com', 
          'YOUR FRESHBOOKS SUBDOMAIN HERE (i.e. clockwork)',
          'OAUTH SECRET HERE', 
          current_user.fb_token, 
          current_user.fb_secret)
  @invoices = client.invoice.list :status => 'unpaid'

  #If returns error
  if(@invoices['error'])
    #If first error, get new request token and try again
    if session[:fb_error].blank?
       session[:fb_error] = true
       redirect_to fb_request_token_path
    else
      session[:fb_error] = nil
      redirect_to freshbooks_path, 
              :notice => 'There was an authentication error'
    end
  end
end

We hope that this is helpful to you. Does the code work for you? Any suggestions for improvement? Let us know in the comments section below.

Downloads

FreshBooks Controller
FreshBooks OAuth Library

References

Ruby FreshBooks Gem
OAuth Gem
Rails Twitter OAuth Sample

Easily test websites on the iPhone / iPad Simulator

Read this article if:

• Your client wants the website to work on the iPhone or iPad but you don’t own one yet.
• You’ve been testing on an iPhone but would like to speed things up by using a keyboard and mouse.

iPhone Simulator can simulate both the iPhone and the iPad, and comes with Mobile Safari. In this article, I’ll show you how to install it.

Before you start, make sure that you are running Mac OS X version 10.6 (a.k.a. Snow Leopard) – click the Apple icon on the menu bar, then click “About this Mac.” Unfortunately, I’m not aware of a way to run iPhone Simulator on 10.5 (Leopard).

1. Register as an Apple Developer (if you haven’t already)
2. Follow links to “iPhone SDK.” If you are already logged in, this link will take you there.
3. Click a link similar to “Xcode 3.2.3 and iPhone SDK 4” to download the SDK. It is a large file, so have your newspaper or knitting at the ready.
4. Once the download is complete, expand and install it.

Unfortunately, the iPhone Simulator is difficult to find. Here’s how to add it to your Applications folder:

1. Open Finder
2. Press Command+Shift+G and enter “/Developer/Platforms/iPhoneSimulator.platform/Developer/Applications/” in the blank. This will take you directly to the folder containing “iPhone Simulator.app”
3. Control+click on “iPhone Simulator.app” and click “Make Alias”
4. Single-click on the alias and press the Return key. Type “iPhone Simulator” to rename the alias and press Return.
5. Drag the alias and drop it on the Applications folder in your dock.

Now you can easily run iPhone Simulator from your Applications folder. For a great article describing how to use it, see Using iPhone Simulator from the iPhone Development Guide.

Please comment if these instructions don’t work for you.

Tip: take it offline

It seems like each day there’s more “urgent” demanding my attention at work. Finding quiet time to think, read and write has been a challenge. Perhaps you can relate.

So this past week I started blocking off 8-9 each morning as thinking time. But I’m so used to jumping from one thing to another that it’s hard to focus. Instead of writing a full draft of what I’m working on, I’ll get distracted hunting for examples online or looking up words in the thesaurus.

Sometimes a simpler interface makes all the difference — in this case, a move from keyboard to paper and pen. And to help me stay on track, I set a timer for 10 minutes of “no computer” time. By then I’m in the zone and well on my way.

Tip: ending the year right

“Bad customers will drain you of passion. Really bad customers will drain you of both passion and profits. Unfortunately, most bad customers will degenerate into really bad customers if you don’t do something about it.” -Dharmesh Shah

There is no doubt that having the wrong clients can quickly sink a company and put all its clients in a bad position. Here is an exercise to help you know which clients are winners and which may be bleeding you as you launch into the new year. (I recommend doing this in a spreadsheet.)

1. Make a list of your engagements over the past year
2. Beside each engagement enter:
   1. Revenue generated
   2. Total profit (total profit = revenue – ((billable + non-billable hours) * cost per hour))
   3. Profit margin
   4. On a scale of 1-10, how much you enjoyed it
   5. Whether this client has been a one-time buyer, repeat buyer, or better yet, an advocate (refers work to you)
3. Now sort the customers by each of the columns

You may be surprised at what you discover. Often I find I favor clients based on how much revenue they produce and how much I enjoy working with them. But profit margin is critical, as well as the amount of repeat work they bring or refer. If you’d like some help measuring your profit and profit margin, stay tuned.

Just be consistent

Have you ever been to the grocery store, went to aisle 7 where the baking powder always is, but couldn’t find it? Anywhere? That can be very irritating. If the store never had baking powder or at least gave me some indication of where it had moved (if it moved), the irritation would lessen significantly.

It turns out the baking powder had been moved to the other end of the isle, but the big “Baking Powder” hadn’t been moved with it. More commonly, the store is just plain out of something, but I have no way of knowing that so I waste my time searching.

Consistency puts customers in control of their experience. Do I want a quick, cheap meal? I go to Taco Bell. Do I want something nice? I go to the Acropolis. When customers are in control they at ease.

Back to the grocery store: I don’t expect you to carry endless varieties of specialty breads (which I enjoy). I don’t expect you to have everything you carry in all the time (although it would be nice). But would you at least keep things in the same place so I can know when something is out of stock?

I’m left asking myself, are we providing consistency to our customers?

Getting to launch

Are we there yet?

How do you make time for a project that doesn’t pay and doesn’t have a client asking when it will be finished when you have lots of paying client projects? Right now we’re in the process of bootstrapping our first web application, and let me tell you, it isn’t easy to make time and retain momentum.

In the past we’ve worked on (and never launched) two other web applications. We launch client projects on time every month though. So what gives? Here are a few of the lessons from our unshipped web applications:

1. When there is no “client”, it’s easy to want to add “just this one more thing” before shipping. Or even more likely, a whole laundry list of additional features that seem “essential” to the product being successful. A list that never ends.
2. When there is no “client”, there is no deadline and no one bugging you wanting to know “are we there yet?”.

So in short, the equation looks something like this:

Infinitely flexible scope + infinitely flexible timeline = a product that never ships

So what is the solution? We haven’t launched yet, so I can’t claim to be an expert, but here are a few things that are helping us get there.

Decide what’s in (and what’s out)

Follow your standard procedure for locking in scope like you would on any other client project. For us, that meant producing a detailed estimate of exactly what we would do before launch. The important part of this exercise is that it forced us to say what we wouldn’t do before launch.

Decide when you’ll launch

In our case, we’ve been using this product internally since February, so most of the work towards launch relates to polishing and preparing the application to work for multiple subscribers (it’s a subscription web application). Choose a date you’d like to have it ready for public launch or at least for a private, invite-only beta.

Next, figure out how many hours you can realistically work on the application between now and the launch date.

Face reality

Here’s where it’s critical to apply discipline. Compare the hours you have before launch to the hours you expect it will take to complete the scope you’ve outlined. If you’re good at estimating time required and half as excited about launching as we are, there’s a good chance your “hours to launch” estimate will greatly exceed your “available hours before launch”. Consider it a blessing! As Mike McDerment of Freshbooks says, you can’t take a feature away once you give it to your customers. Better to take anything that isn’t absolutely essential out now.

We went through this process twice and each time cut the scope about in half.

How we’re doing

We now have about 25% of our estimated scope time left, but we’ve passed our target private beta launch date by a couple of weeks. That means that we had a lot less time available (or made a lot less time available) than we expected. The next step is to begin setting aside time proactively each week just like we do for client projects. I’ll keep you posted!

Shipping is a feature. A really important feature. Your product must have it. – Joel Spolsky