AIAIO: Our Blog

A major component of Transactional Intelligence is knowing what your user is expecting before they do.  At Alexander Interactive we know quite a bit about what users typically expect when it comes to a digital workflow, but a new area of exploration for us has been users’ expectations in an Omnichannel world.

Omnichannel introduces a lot of new complexity to the world of digital because, as the name implies, covers multiple devices, locations and needs – all of which link back to the ultimate expectation: a purchase.  But in order to better understand and serve a user in an Omnichannel world, we need to think of these experiences as extensions of the digital world.  And they are not just an extension of their buying experience, but also a part of a user’s larger shopping experience.

First, it’s important to state that Omnichannel assumes that a brand has both a physical and digital presence that allows for direct-to-consumer sale of products in a retail model: either of products manufactured by the brand or resold by the brand.  For the purposes of this discussion, I’m not diving into the use of multichannel devices to help operate back-office systems or coordinate with buyers or distributors.  I’m also not going to break down the multi-channel aspects of pure digital businesses that have no physical store to contend with.  The goal here is to understand users’ motivations and options and how it connects with a physical retailer’s digital presence.

While I code on a mac at home, I can’t live without my giant dual screens and solid state drive at work so I’m on a windows 7 box. Most of the time it’s fine, does everything I need, and I’m happy. I became full of rage for the first time last week trying to properly get virtualenv to play nice with powershell. (If you code on windows and are in the terminal a lot, switch to powershell, its great and comes with windows 7. There is a download for Windows XP)

I’m not going to recap how to set up virtualenv for your project as there is a great walk through on that here. The issue on windows is around when you want to activate your project. Powershell has a restricted execution policy turned on by default. The manual way around this is to run powershell as an administrator, and run this:

Set-ExecutionPolicy Unrestricted

Works, but that’s an extra click. You can also change this value permanently in the registry at the key listed below, but that didn’t seem to stick when opening powershell through launchy

HKLM\Software\Microsoft\PowerShell\1\ShellIds\Microsoft.PowerShell

Enter my hacked up solution.

Create a shortcut for powershell with these parameters:

Target: %SystemRoot%\syswow64\WindowsPowerShell\v1.0\powershell.exe -ExecutionPolicy Unrestricted
Start In: %HOMEDRIVE%%HOMEPATH%

Then, if your workspace and projects are set up relatively the same, you can create a powershell script (or a cmd script if not using powershell), named workon.ps1 that looks something like this:

$ENV:PYTHONPATH=""
cd C:\Users\tbroder\workspace\$args\
.\myenv\Scripts\activate

I threw this in my C:\Python26\Scripts folder. It assumes your project lives in a workspace folder, that your project name is a single word, and that all of your virtualenvs are called myenv. Example of using it below:

Windows PowerShell
Copyright (C) 2009 Microsoft Corporation. All rights reserved.

PS C:\Users\tbroder> workon gsb
(myenv) PS C:\Users\tbroder\workspace\gsb>

Our tradition of Hamster Time lives on at Ai.  Last Friday’s theme took a more physically active twist.

In honor of the Crossfit Regionals and a Ragnar Relay that took place last weekend (and our fond memories of American Gladiators and Battle Dome), we decided to host Ai’s first ever Hamster Time Relay.

With teams of three or four, Ai’s finest took on the following challenges:

Challenges

1. Ride scooter from corner of office, into Wilbur*, around the table, out of Wilbur, to the front door entrance
2. Take Developer book off of front desk and balance on head as you walk to Piglet*
3. Solve word jumble puzzle on Piglet whiteboard
4. Balance an egg on a spoon and walk from Piglet, around the spaceship couches, as you step over obstacles on the ground
5. Place egg and spoon in bowl on file cabinet by the printer and pick up a cut-out mustache and put on the blindfold
6. Pin the mustache on Ron Swanson
7. At the pool table, shoot the eight ball into any pocket
8. Go to Boat Drinks* and write Alexander Interactive on the whiteboard
9. Limbo out of Boat Drinks under a pool cue
10. Pick up a blown up balloon from the café table and keep tapping it in the air until you travel back to cross the finish line

Highlights

• David Ow, Director of Project Management, did try to become another obstacle by positioning himself on the ground as another thing to step over while balancing the egg on the spoon.
• The toughest part of the whole thing was the word jumble (the words ended up being: Mayor Jack, Canopy and Schmelkin).
• Terran, a Back-End Developer at Canopy Commerce blew the competition away by solving the word jumble in record time.

Results

The team that completed all activities the fastest won.  Times were not revealed until the last team was finished.

Six teams competed, but there was one clear winner – Team Canopy, comprised of Terran, April (Producer), and Jesse (Visual Designer) took home the 2012 Ai Hamster Relay title with a time of three minutes and 15 seconds (3:15).  Almost four minutes separated first place and sixth place.

Video, including interviews with the winning team, to come.

* Our conference rooms are named as follows – (Wilbur, Piglet, Burt Reynolds, Charles Bronson, Boat Drinks, Lamb Chop) – because why shouldn’t they be?

April means a lot of things both good, start of major league baseball, and not-so-much, rain showers and tax deadlines. But for us at Ai it also means supporting of March of Dimes, March for Babies.

Each year Team Levine, Chief Experience Officer and cofounder Josh Levine, his wife Paulina and their two (adorable!) children, raise astronomical numbers towards preventing premature births and finding solutions to the problems that threaten our babies. This year is no different, and Ai is there to join the fight.

This past Friday’s Hamster Time was March for Babies themed including strawberry milk baby bottle contests and a variety of baby foods. For any contest winners (and even those activities which there was no clear winner), Josh donated $50 to the March of Dimes, raising $350 for the cause.

The fight doesn’t stop there- many Ai-ers will attend the Team Levine Annual Fundraiser, Thursday, April 26^th at 6pm at Traffic bar & Restaurant, 986 2^nd Ave. This weekend Ai will take the campaign to the streets as we proudly stroll beside Josh and his family at the walk on Sunday, April 29^th at Lincoln Center.

For more information about the cause, fundraiser or walk, or to make a donation check out the Team Levine website:  http://www.goteamlevine.com/.

At Ai, we have sites that use various versions of Django, so there is a need to switch packages. On my mac I use virtualenv to handle this, but I’ve never quite gotten it to play nice with windows, and just switching Django versions has sufficed so far.

1. Download junction (think symbolic links for windows). Put the executable somewhere in your path. I put it in my Python scripts folder (C:\Python26\Scripts)
2. Plan out your directory structure: Make sure you don’t have any stock django eggs or folders in your site-packages folder
3. Create a django_veresions folder in site-packages (C:\Python26\Lib\site-packages\django_versions)
4. In this folder I put my different django installs

    C:\Python26\Lib\site-packages\django_versions\1.1\django
    C:\Python26\Lib\site-packages\django_versions\1.3\django
    C:\Python26\Lib\site-packages\django_versions\1.4\django
   

5. I also put a txt file inside the django folder to easily see what version is there (this will be helpful later to double check)

   C:\Python26\Lib\site-packages\django_versions\1.4\django\1.4.txt

6. Create a file called djangoversion.cmd and drop it in C:\Python26\Scripts

   junction -d C:\Python26\Lib\site-packages\django
   junction C:\Python26\Lib\site-packages\django C:\Python26\Lib\site-packages\django_versions\%1\django

7. The first line removes any links that may have been there. The second line creates a new link to the version you’ll pass in.
8. Now, to switch versions, just run this from the command line:

   djangoversion 1.4

   PS C:\Users\tbroder> djangoversion 1.4
   
   C:\Users\tbroder>junction -d C:\Python26\Lib\site-packages\django
   
   Junction v1.06 - Windows junction creator and reparse point viewer
   Copyright (C) 2000-2010 Mark Russinovich
   Sysinternals - www.sysinternals.com
   
   Deleted C:\Python26\Lib\site-packages\django.
   
   C:\Users\tbroder>junction C:\Python26\Lib\site-packages\django C:\Python26\Lib\site-packages\django_versions\1.4\django
   
   
   Junction v1.06 - Windows junction creator and reparse point viewer
   Copyright (C) 2000-2010 Mark Russinovich
   Sysinternals - www.sysinternals.com
   
   Created: C:\Python26\Lib\site-packages\django
   Targetted at: C:\Python26\Lib\site-packages\django_versions\1.4\django
   PS C:\Users\tbroder>
   

9. Switch as needed

The Ai 2012 Paleo Challenge came to an end on Friday, February 10^th.

The final challenge results:

The second, third, and fourth place finishes were separated by three points each. It was a close challenge, but in the end I took the title, not because I cheated less than others but because the project manager in me didn’t let me forget to post my meals information and photos throughout the day, where others got penalized for not doing it.

Five weeks later, when our schedules finally aligned, the team enjoyed a celebratory non-Paleo cheat meal at Righteous Urban Barbeque (a.k.a. RUB).

We ended the meal with a toast to sticking together and committing to another six weeks of Paleo. We will start cooking once a week for each other this coming Monday, but this time there is no challenge, just a community of coworkers helping each other stay on track and enjoy the benefits of clean eating.

Ai has been busy settling into our new space—pool table, comfy serpent-shaped couches, and lots of much needed conference space. As we prepared for the big move, our IT Director tried to donate a few of our old Pentium 4 Dells. Surprisingly, we found that many NYC non-profits won’t accept such donations unless it’s 20 computers or more. Thankfully, I found them a home at Urban Pathways.

Urban Pathways provides homeless New Yorkers with the services and assistance they need to become stable and move into permanent housing. (For our regular readers, disregard the déja-vu. You read about UP a few months ago during our Thanksgiving Food Drive.) Now, instead of ending up trash, the computers are being utilized by Urban Pathways’ clients living in scatter site housing – private apartments leased by UP then subleased to clients. With the new computers clients find jobs, get an education, and re-enter society.

As many of us upgrade our iPads with every new version, we want to remind everyone that having a personal computer and internet access is not as universal as it may seem—even in New York. Ai is happy to have played a tiny part in bringing New Yorkers online, and we encourage everyone else to do the same.

For more information about life without the internet, check out the recent Huffington Post article, Without Internet, Urban Poor Fear Being Left Behind In Digital Age.

Dell has a partnership with Goodwill industries to reuse or recycle older machines.  PCs can be dropped off at any Goodwill store. For more information, click here.

For other ways to donate, check out the list here.

Happy Donating!

The 2011 holiday season showed us that shoppers are going online for purchases now more than ever.  Small brick-and-mortar retailers would prefer to drive customers offline and into their stores, and here are some thoughts on how a clean, user-friendly website can do just that.  These are quick, cost-effective fixes that small retailers can use that will ensure to drive more customers to their location, with a focus on transactional intelligence.

Think mobile

Customers are on the move.  Depending on your target audience, it’s likely that most shoppers have a smartphone with a mobile web browser.  At a minimum, small businesses should view their website on the most common smartphones, including iPhone and Android, to be certain that all key information is visible and easy to navigate.  If your phone number and address are at the bottom of the screen, move it to the top.  It could take a lot of smudging and swiping and to get down to the most critical information to drive your customer to your store.

Those small businesses with a little more to invest must consider launching a mobile-optimized web experience that caters to the smaller screen size. Prioritize the most important information that a customer needs to know about your business—your phone number and address, this week’s promotions, special “in store only” sales—and make this information very easy to find.

Focus on the user

Some of the best enterprise websites are successful because they build user-centered solutions based on a very deep understanding of the customer.  Small businesses can benefit from the same type of user-centered approach by emulating a number of the techniques used by bigger sites.  Make a list of your most common customer types and the scenarios they are likely to run into—the busy working mom with limited time to browse your products, spouses reviewing together a large purchase, a child letting a parent know the latest and greatest toy they want—and build an experience around these customer personas and scenarios.  Every decision you make about adding a feature or design element to the site should be prioritized to solve the most pressing needs of your customers.

Store locator

The most commonly visited section on a small brick-and-mortar business website is the store locator.  Customers want to know your store locations, your hours, and your phone number.  Don’t bury this information behind multiple screens.  Place your phone number and physical store address prominently on your homepage and at the top of every page of your site.

But don’t stop there.  The best executed store locator pages have calls-to-action or coupons that further encourage customers to come into the store.  Along with your phone number and address include a special web coupon or your hottest products of the week.  Use the opportunity to turn the often dry locator page into a stronger selling tool.  Rewarding customers with a coupon for printing the store locator page or showing a floor salesperson the site on their mobile phone will let give you valuable feedback on the efficacy of your store-driving campaign.

Watch your analytics

Understanding what your customers are doing on your website, the successful areas that drive customers to the store, and those that are barriers, is paramount to running an effective business.  Google Analytics is a free tool that includes  a number of reports on the activity of your site visitors.  Where are most visitors coming from?  What’s the first and last page they visit on your site?  How many clicks does it take for them to find your brick-and-mortar store information?

UPDATED: May 3, 2013:

Finally! I pushed the plugin to our GitHub account so it has a permanent, source-controlled home.  The latest and greatest Galleria Facebook Plugin can always be found here:

Galleria Facebook Plugin on GitHub

In this release:

• Published initial version to GitHub
• Fixed &limit= to &photos.limit= in querystring arguments (thanks @RoelDekker)

(Note: I’m going to soon remove the old versions that were uploaded as a zip to this post to prevent people from downloading the older, out of date versions.)

UPDATED: April 29, 2013:

• Worked around new Facebook security restriction by using long form graph API
• Upgraded plugin for Galleria 1.2.9
• Latest plugin: Galleria Facebook Plugin 2013-04-29

UPDATED: 12-12-12:

• Fixed Facebook api change to use graph.facebook.com
• Fixed & bug in photo request url pattern
• Latest plugin: Galleria Facebook Plugin 2012-12-12

UPDATED: August 29, 2012:

• Now supports Galleria 1.2.8
• Fixed bug that caused missing thumbnails on Galleria versions 1.2.7+
• Restructured portions of the plugin to be based on latest Flickr plugin in Galleria 1.2.8
• Updated post below to include 1.2.8 documented way of loading themes (slightly different than the documented approach in 1.2.6)
• Latest plugin: galleria.facebook.zip

Facebook provides an easy way for individuals to display photos from their profile using Facebook’s Photo Badge.  You download a small snippet of HTML, embed it in your website or blog, and et voilà.

However, there are a few drawbacks to the tool, most notably:

• The Facebook Photo Badge does not allow much customization. If you’d like control over how your photos are displayed on your website, you will need another solution.
• Photo Badges are currently limited to photos from an individual’s profile and do not support company Pages. If you want to display Facebook Page albums and photos on your site, read on.

Galleria

Galleria is a popular, open source photo gallery whose “aim is to simplify the process of creating professional image galleries for the web and mobile devices.”  Best of all, it’s free and comes with an attractive theme for displaying your photo albums.  You can purchase additional themes, though I’ve found the basic, free theme to be attractive and sufficient for most purposes.

Out of the box, Galleria does not currently support loading Facebook albums, but does have excellent support for Flickr and Picassa.  I adapted their Flickr plugin to work with Facebook.  You can see an example of the Galleria Facebook Plugin in action on The Gaga Center site.

Galleria Facebook Plugin How-To

Instructions on how to display a Facebook photo album on your website using Galleria.

1. You will first need to find the identifier for the Facebook album that you want to display. I haven’t yet found an easy way to do this other than looking in the URL when you’re viewing the album at Facebook. Navigate to the album in question, and copy down the album id that I’ve highlighted in red below (for your own album, of course):

http://www.facebook.com/media/set/?set=a.291489504249941.68160.249094895156069&type=3

2. Download and install Galleria:

http://galleria.io/download/

3. Download and install my Galleria Facebook Plugin:

Get a copy of the plugin: Galleria Facebook Plugin

The Galleria library has a directory called plugins/.  Unzip galleria.facebook.zip and place the facebook/ folder directly in the plugins/ directory so the file layout looks like this:

galleria/
  galleria/plugins
    galleria/plugins/facebook

4. Load jQuery, Galleria, the basic theme, and the Galleria Facebook Plugin in your HTML page (this assumes you’ve put the basic Galleria files in a js/ directory):

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script src="js/galleria/galleria-1.2.8.min.js"></script>
<script src="js/galleria/plugins/facebook/galleria.facebook.js"></script>

5. Add the following snippet of HTML to your page, setting your album_id (gathered in step 1), height, and width:

<script>
Galleria.loadTheme('js/galleria/themes/classic/galleria.classic.min.js');
Galleria.run('#galleria', {
 facebook: 'album:291489504249941',
 width: 745,
 height: 550,
 lightbox: true});
</script>
<div id="galleria"></div>

6. You can explore more Galleria display options and fun tweaks in the Galleria Documentation.

An Example!

See the Facebook Galleria Plugin in action on The Gaga Center website.

Finally, do consider purchasing additional themes as the developer generously donates this photo gallery to the world and I’m sure would appreciate it! (we have no connection to them) The gallery has great support for mobile and tablet, including native swipe gestures.

Last week Practical Ecommerce featured Ai’s Schwinn site as one of the top ten most innovative e-commerce websites.

As the article says, “Schwinn’s site uses its home page to promote content marketing, which is the idea of offering shoppers more than just products, but also entertaining and engaging content.”

Ai congratulates its partner, Schwinn, for this recognition. The full article is available here on Practical Ecommerce’s site.