Growing Venture Solutions - GVS - ubercart

Drupalcamp Atlanta and best practices for event websites in Drupal

Greg — Thu, 02 Sep 2010 00:58:11 +0000

Drupalcamp Atlanta recently launched their new site for the 2010 Camp. I reviewed some of their features and found it to be a solid site. As the GVS team increases our focus on selling events with Drupal, I wanted to hear more about the backend of the site. So, I got in touch with Brent Ratliff who was the lead developer on the site, to find out how the site was built.

Adding Signups and Payment to an Event Site: UC Signup

In 2009, the site was a standard build relying mostly on Views and content types. For 2010 they needed all of the features from the previous year but also needed to charge an entry fee for the event, for individual sponsorships, as well as the ability to submit and vote on sessions. The Atlanta Drupal Users Group decided to base their 2010 site on the acclaimed 2009 Drupalcamp LA site that was released as a zip file. The LA code, updated with new module releases, handled the voting, some nice Views, helpful theme functions, context, and some of the "attendee logic," but not the e-commerce portion. Brent was familiar with using the UC Node Checkout module for building an event site, but ultimately decided to go with the Ubercart Signup integration module along with Rules and custom hooks to handle workflow. UC_Signup allows them to collect profile information from users during checkout and helps keep track of attendees using the Signup module. They also grant roles to users based on which products they have purchased.

Panels vs. Context? Both

On the topic of Panels vs. Context, Brent said he follows the practice of using both modules. Context is responsible for block placement on the site and changing the active menu item on some pages of the site to give a more consistent feeling as you navigate around. Panels is responsible for the main "content" area in a few parts of the site, allowing the site to pull in Views and other content into complex landing pages without having to write much code. Arguments can also easily be passed from the Panel directly to the Views and the Panels can be exported along with features for version control while remaining theme independent. Panels also allow Skinr styles to be applied to content via the UI and for content editors to easily add or remove relevant components as the camp timeline changes, such as removing session voting and adding a session videos after the camp. One example of this is the sponsors page built with four Views embedded into a Panel.

Call to Action on Views for Usability

They are using some PHP in the Views headers and block bodies to present appropriate call-to-action blocks to site visitors. For example, on the sessions view, anonymous users see a suggestion to register for the camp. If you are logged in and registered you'll see a request to "submit a session". The same is true for the voting widgets and any other privileged callouts that require the "attendee" role, triggered by a successful Ubercart checkout. In the LA camp site, as it was a free event, any registered user had these abilities.

Performance and troubles with Pressflow

The Drupalcamp Atlanta site is using Pressflow and Varnish to maintain a fast response time for their visitors. In fact, Brent is giving a presentation on Using Pressflow and Mercury to achieve a super fast site. However, Pressflow caused some problems with the Ubercart shopping cart block so Brent had to use some custom code and the Ajax cart module to let anonymous users see the cart contents.

Schedule of Events: Always a challenge

One area where they want to do more is the Schedule. Currently it's just a Google Spreadsheet embedded into the page, but ideally it could be built based on Views. As part of GVS work on the COD - the Conference Organizing Distrubution distribution, we will be releasing a Views+CCK based schedule builder in the next few weeks.

Conference Organizing Distribution vs. Build your own

When I asked Brent about why they didn't use COD he said it was simply a lack of knowledge of COD's availability. He said they based some of the site on the features from Drupalcamp Colorado and just didn't know that they had been packaged up into the COD_Support features.

For the future, though, he said he would definitely base his work on the COD and COD_Support packages since they are a modular, features-based system that make it easy to pick and choose the parts you need and then contribute back enhancements, while maintaining the ability to modify workflow through customization. Brent also feels it's much better using a distribution where you start off with a fresh installation and turning on compartmentalized features as you need them rather than using a database export which may have cruft in it.

A few weeks after our conversation, Brent got back in touch with me to say:

We're running into groups who want one account to set up
multiple attendees. Live and learn. Take it as validation to the COD
approach and uc_signup.

That was a feature that GVS built into UC Signup from the beginning and which was used on the Drupalcamp Colorado site by several large companies, one of which purchased tickets for their 30 attendees all at once. Brent disabled the feature at the cart level to make their site simpler.

Sharing Events Best Practices

It's great to hear about best practices in building event management sites and to share those ideas with other camp builders.

Last weekend I participated in a call with the fun folks from LA Drupal which is now available: LA Drupal Podcast 8: Rocking Drupal where we discussed the future of camps vs. summits vs. cons and the idea of a distribution like COD.
This coming Wednesday, September 8th, GVS will be hosting a Free COD support hour in IRC (#drupal-cod) and Skype. This is just the first of what will hopefully be many events where Drupal site builders can get together to share tips and tricks and get support.

Usability Testing of Ubercart and Uc_signup

evelyn — Thu, 06 Aug 2009 01:08:30 +0000

Ezra Glidesgame has been writing a module to integrate the Signup module for managing event registration with the Ubercart e-commerce module: Signup integration for Ubercart (short name: uc_signup). The uc_signup registration process was designed to support a wide variety of use cases (one user potentially signing up multiple other users for different events, in different quantities) while still being easy to use. We wanted to see what users thought of the preliminary uc_signup registration process, so in June we ran a small usability test here at the Growing Venture Solutions office. The test revealed several subtle and interesting findings that applied to the uc_signup module, the Ubercart checkout process, and specific aspects of the client site's configuration.

First, some background on the project

AUSSIE provides professional development in the field of K-12 education. One of their services is to offer workshops around the country, with registration done through their website. Uc_signup is being written to give AUSSIE more control of the look and administration of their sign-up process, and internalize their events management, which is currently being hosted by Eventbrite. The improved Aussie site is scheduled to launch in August.

About our Usability Participants

We recruited 4 participants having the following profile characteristics:

Two men and two women between the ages of 29-36
All with general office experience and good computer proficiency
All use the internet daily, with a range of 3 to 40 hours per week
Internet purchasing comfort level: comfortable to strongly prefer
Three of the participants had previously signed up online for classes or workshops

Participants were recruited prior to testing with the assistance of requests to FFF (“Friends of Friend and Family”). Participants were compensated $50 for their time. (Read this article about tester compensation.)

Where/How
We hosted the tests in our office, running a scaled back development version of the AussiePD site. We used Camtasia Studio for screen and audio/video capture. Present at each session were the moderator (me) and 1 to 2 observers.

Collected data:

Participant background information, and their internet usage experience
Observation of tasks performed – errors, obstacles, comments
Participants’ impression of the sign-up process – in discussion and in writing

Test & Findings:
Participants were asked to sign up and purchase tickets for two fictional workshops. The overall task performance was successful; each participant was able to complete the tasks within the expected time frame. In post-test discussions and surveys, participants all agreed that the sign-up and checkout process were what they expected and typical of what they’ve used in other online purchasing experiences.

However, all participants made similar minor errors and/or encountered obstacles, with varying degrees of recovery.

Finding #1- Purchaser not entering atendee e-mail addresses

On the first registration screen users are asked to enter an e-mail address for each person attending the workshop. One user simply entered the attendees' names and because uc_signup was still in relatively early development, the submission went through unchallenged.

Suggested fixes:
1. Change the screen title from “Attendee Information” to “Attendee E-mail Addresses”.
2. Validate the information entered.
* FIXED: http://drupal.org/node/525542

Finding #2 - Entering full name in “First Name” profile field

For every email address entered that does not have a corresponding account on the Drupal site, uc_signup allows the purchaser to fill out the configured core Profile fields and create a new account. Without custom theming, the first and last name profile fields appeared on different lines.

Three of four participants entered full names in the “First name” field and had to correct themselves after they tabbed down and saw the “Last name” field. Two participants made this error more than once.

Suggested fix:
We recommended that this page be themed so that the first and last name fields are on the same line. Since these fields are configurable Profile module fields, they are specific to the AUSSIE project.

Finding #3 - "Previous" is the default submit button on the multi-step attendee information form

Next/Previous step buttons appear at the bottom of the 2-step attendee information form. Because the "previous" button was the first in the form, it became the default submit button. That meant that users would enter information, press enter expecting to go to the next step, and get sent to the previous one.

Suggested fix:
As a short term fix, we reversed the order of these two buttons. However, that results in an awkward button order for left-to-right readers.

A better long term solution exists as part of the issue mentioned below, which proposes making each step of the form appear at its own path.

Posted issue: http://drupal.org/node/540136

Finding #4 – Purchaser Confusing “Country” drop-down for “State” drop-down

On the Ubercart's “Delivery Information” pane, three participants mistook the “Country” drop-down box for a “State” drop-down box, inadvertently selecting “Canada” (presumably because they were looking for a word starting with the letter “C” for “Colorado”.)

Confusion can also be attributed to the fact that it is more typical to find the country selector, if there is one, to be the last line of an address sequence.

Suggested fixes:
1. Since “Country” needs to precede “State/Province” in order to populate states and provinces, we suggest moving the “Country” drop-down out of the address sequence – perhaps before the Attendee name, or
2. Replace pre-populated City and Country dropdowns with text fields, eliminating the state/province field's dependence on the country field.
* Posted issue: http://drupal.org/node/529108

Finding #5 – Purchaser Unintentionally clicking “Remove” checkbox

When viewing their workshop in the shopping cart page, two participants clicked the "Remove" box next to the item, as if to confirm the selection.

Suggested fixes:
1. Move the location of the “Remove” checkbox to the left of the “Qty.” so that it is more visually connected to the idea of quantity, and/or
2. Perhaps change the word “Remove” to something like: “Remove?” or “Delete?” to make it appear less like a confirmation selection, or
3. Replace the remove checkbox with a "remove" button, like on Amazon.com.
* Posted issue: http://drupal.org/node/529110

Finding #6 – Ubercart: Purchasers miss the “Saved Addresses” option

On the Checkout screen, in the “Delivery Information” pane, two participants repeatedly missed the "Saved Addresses" option and manually re-entered their billing name and address.

Suggested fixes:
1. Add more default styling to highlight the text “Saved addresses”, and/or
2. Add space underneath that line, thereby drawing attention to it, or
3. On the checkout page, show the most recently used address (if there is one) and provide a "Change" button that goes to a page showing all the saved addresses, as well as a new address field set, similar to Amazon.com
* Posted issue: http://drupal.org/node/529130

Usability testing results in surprises and best practices

Overall, the workflow for collecting attendee information proved to be successful. Still, no matter how much you think through a workflow when you're designing it, real-world users will are likely to surprise you by finding potential improvements that you may have missed. In the course of watching participants use the uc_signup module, we learned some other valuable lessons - “rules-of-thumb” that are important to improving the general work flow for all modules and design situations. One example from Greg is to pre-fill data whenever possible. Evelyn was reminded of the importance of label names.

This project is a collaboration working with Andy Hieb at Dtek Digital Media, and sponsored by client Australian United States Services in Education (AUSSIE). This is also an example of how community minded clients and companies can collaborate to get better results for their end-users while improving community software for everyone. All of us at GVS, Dtek and AUSSIE are excited to help make a useful new contributed module possible, and do usability testing to seek improvements for the software we share. Uc_signup currently has a stable beta release, and issues found in our usability test have either already been fixed, or are in the queue waiting to be fixed.

RainSkirts.com - Company Site with E-Commerce

Greg — Sun, 07 Sep 2008 23:26:07 +0000

Emergent Designs Needs - Brochure Site and E-Commerce

Libby Earthman is the founder and creative genius behind RainSkirts - A superior alternative to Rain Pants. Earthman and the team at Emergent Designs researched how to best-produce a Made-in-the-USA garment--one with city styling, but rugged enough to withstand the adventures of outdoor enthusiasts. They wanted a website that was as simple as their concept, and just as user friendly, which lead them to Drupal and Growing Venture Solutions. They selected a basic Drupal theme and were able to customize it enough that it fits well with their company image. On top of their basic "brochure" website with information about the company and products, I layered in a blog so they can share company news, and added e-commerce capabilities so that can can get the products out to rain-soaked clientele.

Rain Skirt Site Step 1 - The Basics

The site started with a basic Drupal installation which was customized with several additional modules:

The core "Blog" module provides a way to publish the News about Rain Skirts
Quotes to provide a rotating "testimonial" from one of RainSkirts.com's many satisfied customers.
Image management is handled via the Image module which creates resized photos for use in various parts of the site.
The core Page content type is used for the basic pages on the site like FAQ and Products pages. The menu module and taxonomy modules are used to provide navigation and categorize content.
Various modules like Google Analytics, Pathauto, and Drush also help out on the site.

Getting Rain Skirts Into Customer's Hands - E-Commerce with Ubercart

The next big stage was to add E-Commerce capabilities to the site using the powerful Ubercart package. Ubercart's core package handles nearly everything that the RainSkirts.com site needed. With a little extra configuration and a lot of great work by the Rainskirts.com photogrographer and models, the site provides nice closeup photos o each product page with a fancy "click for enarge image" feature that overlays the image on top of the current page.

The Ubercart Out Of Stock AJAX Notification and Ubercart Stock Manager With Attributes are used together to provide "out of stock" handling. The AJAX solution is great since it provides instant feedback for users with JavaScript enabled. And, to provide slightly stronger verification for all users the Stock Manager With Attributes will prevent adding items to a cart if they are sold out.

This image shows the difference between an in stock item and an out of stock item on the site.

Feedback About Working with Growing Venture Solutions

Mrs. Earthman is a great client to work with and when I asked her for feedback, she gushed. Here's a piece of what she had to say:

We were extremely lucky in our first year of business. We keep hitting the nail on the head with our contractors, and Greg is a perfect example of this. I've been delighted with the quality of his work, and his willingness to listen and explain things to me in a way I can understand. I've always felt that he treats me fairly, honestly, and with great integrity. Greg set up our site so that we can edit it--ourselves--from any computer, no software required. Greg enabled us to control our own website, yet he's always there with backup should anything be too complicated for us to do ourselves.

The folks at RainSkirts.com manage all the site content and use a support contract so that they can be sure all of their technical needs are met in a timely manner.