Friday, November 14, 2014

Handy iBlocs for iRise Studio

One rapid prototyping tool we use at the company I work for is iRise Studio. I'm going to spare you the lecture of when the right time to use a prototyping tool such as iRise Studio is. Instead, I'm only sharing out some of the re-usable iBlocs that I've created to enhance the prototyping experience in that tool.

If you are trying to use the ibloc and need some assistance, just let me know. 

Export To CSV

Download from Google Drive On occasion, you may want to export a data table to a CSV file. Ok, so I haven't actually run across this occasion yet, but I'm sure one of you have. Anyway, this iBloc should allow you to do that.




Download from Google Drive Let's say you have a data table on your screen that needs to be a bit mixed up. Sure, you can do it manually... BORING!!! Let's use an ibloc! This ibloc allows you to assign a table that will be in a random order when rendered in a browser.



Text Input Hint

Download from Google Drive
This ibloc allows the UXer the ability to mock up a field that has hint text prior to the user clicking it, then upon clicking the hint text goes away and the color changes to some other color (most of the time its going to go from light grey hint text to black text). This is handy for mocking up search fields, but can be used for any form fields really.

This one is quite useful. If you don't download any of the others on this screen, I hope you at least give this one a chance.



That's enough to get you going for now. Hope you enjoy. Maybe I'll add more as time goes on and the need arises. Good luck!

I definitely recommend checking out iRise when you have a moment. They are legit!

50/50 Traffic Routing Methodology for Google Site AB Testing

The purpose of this article is to document one method for AB Testing in a a Google Site.

One of the joys of working in a large organization is having to UX within the organization's parameters or constraints. In my case, we have several teams making use of Google Sites. The usages very from sharing team calendars, install schedules, processes and procedures, to displaying link farms and quick information. The UX team that I'm a part of is one that serves the business internally AND the outward facing public UI's. 

Providing UX research methods to internal teams using Google Sites can be challenging. Even more challenging is figuring out how to conduct specifically an AB test on a frequently used page that lives on an Internal Google site.

Ok, so before we get going too far... What is AB Testing? Wikipedia describes AB testing as "jargon for a randomized experiment with two variants, A and B, which are the control and treatment in the controlled experiment"... Yikes! That was a bit "science-y". Basically, an AB test is where you have an original page design and a new or several new page designs that you want to put in competition with each other to see which out-performs the rest. Seems basic enough.

The Problem

As I began going down this rabbit hole, I discovered something great... Google Analytics has a method for AB testing built into it called Content Experiments where you have the capability to have Google automatically equally serve out your page variations. This is fantastic! 

Nope. Not fantastic. The problem I ran into is that in order to set up a google experiment, you must place a block of JavaScript into the head of the originating web page (the "A" page). In our organizational setup, we don't really have that option. Google Site pages don't really give access to the "<head>" tag. Now what? Maybe I can use the "Google Website Optimizer"? Nope... It's been decommissioned. DANG!

50/50 Traffic Routing for Google Site AB Testing

50/50 Traffic Routing for AB Testing is not an exact science. It's more of a hit-and-miss-hope-for-the-best kind of effort. One of the challenges in split testing is trying to be as objective as possible. What we want is to throw the same number of users at one design as we do the other designs, and then after a period of time, compare the numbers. Specifically, drop rates and time on page. 

Getting an even spread of traffic going to the different variations is the challenge. The solution used in this method is to serve up a variation based on the date. There are 365 days in a year. In the case of comparing two pages, I look at these 365 days as "odd days" and "even days". Understanding these characteristics, the solution will be to base the traffic flow on the day of the year and if it's an odd day or an even day. When users access the page on odd days, they will be directed to one page and when users access on even days, they are directed to the other.

Step 1: Get to know the ecosystem
To get started, it's good to understand the ecosystem that you are about to "pimp". In our case, the google sites are configured so that login is required in order to access any of the Google Site pages. The sites are accessible outside of the organizational network (i.e. from my home computer), but again... an authorized person must be logged in, meaning that I can't really make use of an outside testing company's slick plugin. I'll also likely need to gain permission to the Google Site in question so that I will have authority to create new "variations" that will be tested.

Step 2: Get Google Analytics Running
Make sure Google Analytics is capturing information for the Google Site that you will be working with. Instructions for setting up Google Analytics with a Google Site.

Step 3: Get your Links
Now it's time to set up some links. Make a copy (or multiple copies) of the original page in question. By "the page in question" I mean page on your Google Site that you plan to test new variations of (a.k.a. the "A" page).

Creating these new pages will result in some google site page links being established. We'll be needing those. At this point, you should go into the sharing options for each new page and get the hyperlink to the page. Also it's a good idea to make sure that the page has all the same authorities that the original page has. Paste each link into a notepad. Stay organized here. It's ok to take notes in the notepad as it will only be used temporarily.

Step 4: Let Google Analytics run for a while
If you are planning on running the AB test on a page that hasn't really been in existence... Well, good luck with that. Typically quantitative tests, such as split tests are really valuable when considering raw numerical statistics. The more users using a page, the better the result. If you are thinking that you are going to have a large number of people, maybe it'd be best to allow Analytics to run just on the "A" page for a few weeks or months to validate that theory. If you find that there is a great deal of traffic, then check the drop rates... If the drop rate in Analytics is low, then AB testing may not need to be done. Your in good shape already! If it's a high drop rate, then continue on.
Post an html redirect page somewhere online. 

Step 5: Get your redirect set up
At the heart of the 50/50 Traffic Routing method is a simple "Redirect" page. In other words, we'll need to have a custom HTML page placed somewhere that can serve it out as an actual webpage. 

In our case, I worked with our intranet team to have them place my html page in the intranet (which is only available to internal employees at our company). Here's the html code that I used. This html page can be made easily using notepad. Open a blank notepad, type all the text in the screenshot, and then save it as "someName.html" or maybe just replace "someName" with something that makes sense for you.

As you can see, I've replaced the links captured in step 3 above with placeholders on the example. Basically, you'll just replace everything within the quotes with your urls.

Once the redirect has been built, place it in the process flow so that it is something like this where the start page has a link to the redirect. The redirect will use the logic within it to determine which page will be served up to the user.

ALERT! Since I originally posted this, I discovered that people who wanted to access this section of the site from home were unable to... There was too high of security on the intranet page. I ended up setting up my redirect to be served out publicly from my Google Drive. Here's what I followed: Host Webpages with Drive

Step 6: Change the page layouts on the copies to be the new designs.

Step 7: Give it some time!
Wait a month or two. Compare statistics to see which out performed the other. Share your thoughts below!


I hope you found this tutorial and introduction to the 50/50 Traffic Routing solution to be valuable and helpful. If you've got alternatives, I'd love to hear them. Just leave a note below!



Tuesday, November 11, 2014

Streamlining checkout by allowing single click purchasing

This article explores the idea of simplifying the ordinary checkout process down to a single click.

Here's what I'm talking about. Image you shop at a store online frequently. Let's pretend that you are a piano tuner by trade and that you find yourself purchasing new piano tuning tools, or consumable supplies each week. 

Your process might look like this from the perspective of the business...

  1. User locates the product that they want to buy.
  2. User adds each item to a shopping cart.
  3. User proceeds to checkout.
  4. User enter Address Information
  5. User enter Billing information
  6. User reviews their order
  7. User confirms the order by clicking "Place Order".
  8. Company fulfills the order

However, your process might look like this from you...

  1. You locate one of the products that you want.
  2. You add it to your cart.

    (Step 1 and 2 need repeated about 20 different times because the piano supply company is not up-to-date yet with shopping list functionality)
  3. After your grueling ordeal, you click to go to checkout.
  4. You enter your address
  5. You enter your billing
  6. You quickly check to make sure your order is right.
  7. You click the confirm button to submit your order.

  8. You forget if you used your business card, or your personal card. You have to go to your email to check to see if a confirmation receipt was sent that sums up that information.
  9. The email doesn't seem to have a tracking number, so you call the company to find out about how long the shipment will take.
  10. You check your mail box. You check your door step. (about 8-10 times).
  11. Finally 3-4 of the 20 items arrives on your door step. 
  12. You check your mail box. You check your door step. (2 more times).
  13. ugghhhh!!!! ok finally done.

    (Then, 2 weeks later, you have to go through it all again. What a pain!)

Ok, so this example was a bit extreme. That was the point. Not all checkout processes are this horrible. Not all companies are this un-empathetic towards their customers either. There are two points to the above example.

  1. Users see the process differently than the business.
  2. The process can ALWAYS benefit from being shorter.

Single Click Purchasing should be a no-brainer

Part of streamlining, or simplifying any process requires that we first understand the existing process. So often we see that websites come up with a checkout flow that fits into "industry standard" by splitting the process up into separate individual pages. Yes, it's likely because it is a save, time proven method.

Occasionally you see the site that has combined all the steps in the common checkout process into one giant super form. YUCK... and Yikes!

Here's my question. Why should a user have to enter their shipping and billing info every single time they shop with you.  Yes, there are going to be people who purchase using different billing info each purchase, but for many if not most of your users, it's likely going to be the case where that information stays static.

Here are some companies that have embraced the idea of storing the billing and shipping information, and then only making the user do what is the bar minimum. In essence, they've simplified the process down to having a list of products in a cart. This stands as the "review" step in the typical process. Then, to confirm after review, the user simply clicks the pre-configured "express buy everything on this list" button.

Companies that are offering single-click purchasing:
  • Amazon has "1-Click"
  • Apple has "Express Checkout"
  • Barnes and Noble has "Buy Now"
  • Facebook has "Buy Now with facebook"
  • eBay has "Bid with 1 click"
  • Home Shopping Network has "Express Buy"
  • QVC has "Speed Buy One-Step Verification"

Here are some companies that are offering single-click purchasing that is being run from a service provider...
  • Petco has "VISA Checkout ("
  • 1-800 flowers has "Google Wallet" and "VISA Checkout ("
  • Beyond the Rack has "MasterPass", "VISA Checkout (", and "Checkout with PayPal"
For the established company, we recommend that you devise a means to come up with your own technique that is inline with some of these larger innovative companies, while still carrying your own touch (i.e. phrasing, or button name).

If however you are just starting out, don't miss out on offering your customers a quick, convenient way to get their product without having to go through all the mess of regular check each and every time they need to buy products. Sure, first time makes sense, but then after that, your 3-4 step process becomes annoying.