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.