Author: Atlantic BT

Start up a business over a weekend.  That was the premise behind this weekend long event that was hosted in Durham, North Carolina.

Nancy Jin, a co-worker of mine, and I attended the Start Up Weekend.  Over the weekend, participants met the challenge created by the Start Up Weekend committee and outputted prototype Facebook applications, Mobile applications and websites that encapsulated an idea that was created and pitched by a participant.

Here is a quick summarization of Nancy Jin’s experience at Start Up Weekend:

Friday night, out of over 100 participants (evangelists and hackers – basically marketing specialists and developers), 54 people each had 60 seconds to pitch an idea. We then voted and picked which ones we wanted to work on. I landed a team of 2 other designers, two ruby developers, and three marketing specialists, with an idea of urban farming. We were then up till midnight figuring out what our plan was the next day.

8:30am – 12pm Saturday was spent surveying real people, defining problems, coming up with a solution and a base model for the business. Wireframing started at 2:00pm. By 4:00pm we had a logo and by 6:00pm we had a homepage. By 8:00pm we had a working site where people could log in and sign up, and by 11:00pm the rest of the pages were designed, functioning, and the homepage sliced out. Then I went and got some sleep.

The website was completed at 1:00pm the next day, and we had 5 minutes to pitch the idea against 17 other teams in front of everyone including a panel of judges.

We won.

Here’s the site: yardsprout.heroku.com

We addressed that local food is important for economic, environmental, and health reasons. Urban farming is important because we are utilizing fertile spaces that are otherwisewasted. People can grow their own gardens but for most people the toughest part is getting started. We wanted to first establish a business model where novices can seek master farmers to help them plant something,  to eventually have the company provide people with gardening kits, which is where yardsprout could team up with brands like Lowes and Home Depot.

Some other cool stuff I got to do was working with github, some ruby on rails (it was like what? I think where I’m sticking my HTML makes sense), and a lot of SASS (my first time).

Here is a quick summarization of my experience at Start Up Weekend:

Friday – I did not plan on making a pitch but one of the hosts came by everyone’s tables and urged us to make a pitch, so I motivated myself to bounce ideas off of random people around me.  I decided to pow wow with two random students from NCSU about business concepts.  First one that we came up with was struck down by our very own Nancy Jin who saved me the embarassment of pitching a product that pretty much existed in the wild.

I considered the 5-10 minute pow wow over a great idea and being shown the thriving product by my coworker next to me my first “failure” of the night.

I considered the pitch my second “failure” of the night.

“Pivoting” is when you change a fundamental part of the business model. It can be as simple as recognizing that your product was priced incorrectly. It can be more complex if you find the your target customer or users need to change or the feature set is wrong or you need to “repackage” a monolithic product into a family of products or you chose the wrong sales channel or your customer acquisition programs were ineffective.

(source: http://venturebeat.com/2010/04/14/business-plan-not-working-time-to-pivot/)

Therefore, I considered not winning my third “failure” of the night.

What I learned and did over the weekend:

• Learned how difficult it was to tell a team member they were holding back discussions and need to re-evaluate what they aimed to get out of the weekend.
• Learned that your product needs a solid customer acquisition strategy & financial forecast model.
• Came up with the following short-term customer acquisition strategies adopted by the Carpool team

• Deals along the way (think Groupon deals for long point to point trips)
• Concert and Sporting Events (which led to more focused growth strategies by my teammates)
• Other ideas by my teammates.

• Work with TicketMaster, StubHub & Political Campaign managers to push individuals to Carpool to events.
• A spinoff website called “Designated Driver Roulette”… basically utilizing the carpooling engine to determine who gets the job of DD when going out with a group of friends in a car.  Unfortunately, that got nixed.. but it would’ve been fun.
• Loved the idea pitched by the Mentor for our concept which was
  • Creating a white label Carpool tool for corporations to reduce carbon emissions by their employees for gov’t tax breaks and clean tech PR.
• Learned how to create a Features/Benefits vs. Ease of Use graph from our teammate who used to work for Accenture for 12 years.  This was a great way of showing competitor analysis in one graph.
• Created a survey to figure out customer validation.  I found out at 8:00 am on Sunday that it is important to have some sort of customer validation.  A bit late for me to generate survey results.  But, I managed to finagle ~100 responses via the following methods:
  • Facebook Survey
  • Tweeted SurveyMonkey link to individuals at the event
• Visited United Kingdom chat rooms to post the SurveyMonkey link.  It was approximately 2:00 pm in the UK when these individuals saw my link.  United Kingdom was a good target market for us because of their interest in cleantech.

This most recent study comes on the back of an earlier survey E&Y carried out between between August and October 2010 found that 76 per cent of UK businesses questioned believe urgent and decisive action is needed or the UK will fall behind other countries that are prioritising cleantech as a sector of national strategic importance.

(source: http://www.newenergyworldnetwork.com/alternative-energy-analysis/by-technology-kb/energy-efficiency-kb/confidence-in-uk-cleantech-policy-ebbs.html)

The survey I created was this:

It was definitely a memorable weekend and I plan on attending this event again next year.

Ah payment gateways.  The, uh, gateway…to making payments. Yeah.

Previously called PHPurchase, Cart66 (and its free sibling Cart66 Lite) are full-featured e-commerce plugins for selling products via WordPress. Cart66 comes out-of-the-box with several integrated gateways:  Authorize.net, PayPalPro, and PayPal Express. It also has a handy feature where you can add an Authorize.net-compatible gateway right in the payment options menu.

But, what if you need a customized payment gateway? Like, say TransFirst TransLink?

After purchasing/downloading Cart66 (I’m using the paid version 1.0.7), follow these “easy” steps —

1. Add additional option for your payment gateway to the option list in contentpluginscart66adminsettings.php
2. Make a copy of an existing gateway file (such as contentpluginscart66progatewaysCart66AuthorizeNet.php)
3. Update the properties of the gateway class to handle the payment in an appropriate manner specific to that gateway — remap fields, change the remote-request format, etc (see the following table)
4. Add shortcodes for the checkout form of your new gateway:
   • to the shortcode init function initShortcodes() in contentpluginscart66modelsCart66.php, register the checkout shortcode itself like checkout_xxxgatewayxxx
   • to the shortcode manager class contentpluginscart66modelsCart66ShortcodeManager.php, add the shortcode callback xxxgatewayxxxCheckout()
   • to the actual checkout page (via the WP dashboard) on your checkout page, add/replace the default gateway checkout shortcode with your new shortcode checkout_xxxgatewayxxx
   • also allow the new gateway type by adding your gateway class name to the $supportedGateways array in contentpluginscart66viewscheckout.php

Please note that in step 1, I chose to simply add the gateway to the Authorize.net section of the Cart66 options, instead of creating a whole new section (like PayPal vs. Auth.net), as the parameters ended up being very similar. This means you only need to add the gateway URL (http://epaysecure1.transfirst.com/elink/authpd.asp) to the select-list (in /content/plugins/cart66/admin/settings.php), and processing is handled by Cart66.

The meat of the change, obviously, comes in your custom gateway class. Download the sourcecode for the custom class (attached).

I’ve added some additional methods not present in the original gateway abstract to help with processing and validation:

Update: I’ve since found out about the built-in WordPress remote-request function wp_remote_post. I haven’t updated the source file, but any use of curl should be replaced with this function.

Update 2: Added the gateway URL per commenter request.

Progressive Loading is a technique whereby you automatically load content in a webpage after set intervals or triggers, such as when the user scrolls in the vertical direction.  With the advent of easier AJAX, and probably helped by some popular examples, progressive loading is gaining traction as another shiny bauble in the modern web development toolkit.

But why is it useful?  For a more definitive answer, I plan to nag my UX teammates to follow up with their perspective, but I can still tell you a couple things:

• + It keeps users on the same page, and so browsing may be perceived as “easier.”  It literally requires less effort from the viewer, as you just scroll instead of hunting for and clicking a “next page” link, or bypasses the unsightly flash of reloading of the entire page.
  ex) Google’s recent changes to their image search (props to James Costello for pointing out how awesome it feels)
• + less server intensive — while this may be a non-issue with our super deluxe hardware, you’re still only serving up “essential” content in the initial visit.  This can help reduce overall page load time, since you’re not trying to download and render a million images/comments/posts at the bottom of an article.  This is especially important for bandwidth-limited mobile browsing.
  ex) The Disqus commenting system, as used on the jQuery API documentation watch for the spinner at the bottom of the page as it loads comments when you scroll there really quickly

However, there are two potentially important caveats to consider:

• ‑ Progressively loaded content may not be indexed by crawlers and search engines.  Since it only appears after user interaction with the webpage, it probably won’t happen with the robots.  Although, this may depend on implementation — if you programmatically trigger the regular-old “next” or “more” link that’s been included for graceful degradation, a spider might also be able to follow that link to index the rest of the content.
• ‑ Similarly, progressively loaded content isn’t available to in-page searches (i.e. CTRL+F “Find Text”).  So, depending on the implementation (like a really long article with comments) there’d be no way for a reader to jump to content of interest without scanning the whole page first.

So where’s the beef?  Stay tuned for a quick intro on a really slick implementation of progressive loading using jQuery Waypoints (credit for the find goes to fellow dogbone castaway Chad Quigley).

Need a simple solution for a “members only” WordPress page?  “But password-protecting a single page is part of WP core!” you say — and you’re right, except if you want to display additional content not part of the protected post.  Read on for how to customize a post template to protect category loops and other page elements.

When creating content, you can hide it behind a simple password on the right sidebar under “Visibility” — choose “Password protected”, and enter your password. As long as you don’t need the precision, this avoids the complication of multiple user accounts and role/permission integration.

However, if you are using a custom template on a “category” page (i.e. you have an additional query loop for other content) like, say, a products page for a store, or member database then you’ll need to wrap the additional content in a password check.

Fortunately, Codex to the rescue — all you need is the simple function call post_password_required().  Wrap an if-else clause around the additional queries, and you’re done!

Example:

<?php get_header(); ?> <div> <div id=”content” role=”main”> <?php //initial loop for calling page if ( have_posts() ) while ( have_posts() ) : the_post(); … stuff … ?> <div id=”post-<?php the_ID(); ?>” <?php post_class(); ?>> <div> … </div><!– .entry-content –> </div><!– #post-## –> <?php endwhile;//—-    end post loop //only do the following if the calling page is allowed if(!post_password_required()): ?> <div> <?php query_posts( ‘post_type=abt_member’); // calls in all posts of the custom type ?> <?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?> <div <?php post_class(); ?>> … stuff … </div><!– #products –> <?php endwhile; ?> </div> <?php endif;    //—-    !post_password_required() ?> </div><!– #content –> <?php get_sidebar( ‘store’ ); ?> </div><!– #container –> <?php get_footer(); ?>

Strangely, WordPress doesn’t allow you to “log out” of password-protected pages, and it doesn’t seem like deleting cookies makes a difference. Of course, someone made a plugin that’ll take care of that — install the plugin, then add the following to your template:

do_action(‘posts_logout_link’, ‘TEXT ON THE LOGOUT LINK’);

Further reading – Digging into WordPress – password protect more than the content.

Online mapping services like Bing Maps and Google Maps are an outstanding addition to just about any website that has a physical tie to planet Earth.

The fact that both require no software purchase and have fairly complete API’s (that’s Application Programming Interface – it lets our programmers hook into all that mapping information easily), and offer compelling mobile experiences only help in their adoption. We’ve used them in the past with quality results.

We’re just about ready to launch a project that has some pretty heavy Bing Maps functionality built into the user interface.  The client’s Location Search is built almost entirely around it (with, of course, a non-map based alternative for users who can’t see the map and for browsers who can’t handle it).

It’s been an effort influenced by almost every group here at Atlantic BT with User Experience, Design, Marketing and most definitely Programming contributing to the outcome.

We spent considerable time working out how this map’s output could be interacted with by the site’s users:

• Does clicking on a map “pin” take the user to the location page?  Bing Maps has no default action for pin clicks, but the more popular Google Maps does.  Do our users even know that they’re looking at a “Bing” map, or is it just an interactive map to them?
• Does sliding the map around update the text results adjacent to it?
• How does the search radius change when the user rolls their mouse scroll wheel?
• And the most important question – how far can we safely deviate from what the users expect the map to do?  Where is that sweet spot between allowing exciting new features and not frustrating uses?

Our discussions brought up two really important points that we want to remember going forward:

• Highly interactive and open-ended page elements like embedded Bing and Google maps require extensive planning if you want them to be truly awesome and if you want them to feel like a natural part of your site.
• These services’ wide adoption rate means a wide range of user types with different skills and very different expectations.  What we make needs to be flexible and forgiving for many different types of users.

The smallest of features can negatively impact the user experience on a website if not designed properly. For example, I recently encountered a small issue in Gmail when I searched my email. The issue was very salient because I had to spend a few seconds thinking about how the feature worked…

After searching your Gmail, have you ever wanted to turn off the highlighting?

The power of search is one of the things that makes Gmail one of the best email solutions available.

Have you ever searched for an email (using a keyword) and noticed that the keywords you used were highlighted in the resulting email? This feature is very useful and mimics traditional search engine behavior, where keywords are bolded in a couple sentences from each result.

The highlighting can actually be controlled by using the two icons that appear in the top-right of the search results page:

Unfortunately, these icons are identical, so the user has no idea which one to click. The left highlighter icon will actually turn on highlighting (only if it’s off), and the right highlighter icon will turn off highlighting (only if it’s on). The design is very salient because it doesn’t match the user’s mental model, which is primarily developed from previous experience (with computers and in the real-world).

Here’s a design that should match a user’s mental model, because it’s very similar to an on/off button:

On:

Off:

Little Big Details

This may seem like a very small issue, but imagine how many people must have encountered it. Small details like this should not be overlooked. The blog Little Big Details does a great job at demonstrating how small features can make a big difference. One of my favorite posts was their demonstration that the position of the close button stays the same in Chrome, allowing users to effortlessly close more than one tab. Small details like that go unnoticed by the majority of users, which is actually a good thing. When users have a frustration-free experience, they can focus more on their goals (which is why they’re on the site in the first place!).