Ticket Cake - An Event Ticketing Website
TicketCake.com is an event ticketing and promotion start-up that recently launched using Drupal as its framework. The website features an innovative design by White Label Graphics which balances functionality and simplicity.
Because Drupal has many ways to display dynamic content, finding the right way to implement a design can be a problem in itself. To overcome this obstacle, the Ticket Cake team focused a significant amount of time creating wireframes for the project.
Drupal’s unique ability to display content in various ways made the process of developing wireframes a constant back and forth. With each iteration, the team updated price quotes, layouts, and site flow.
“Throughout the construction of the wireframes, we always looked to a keep it simple philosophy that ended up being vital,” said Joe Henriod, head of the Ticket Cake business development team. “Measure twice, cut once.”
It was important for the Ticket Cake team to allow developers from different locations and skill sets to envision how their code may be built upon later. To do this, the Ticket Cake team chose a cloud based RPS (Rapid Prototyping Software) called GoMockingbird.
When Ticket Cake developers ran into problems, they would be asked to revise the project’s main online wireframe.
“Each morning, the entire team would look over any changes to the existing wireframe. This daily meeting allowed those from marketing or design departments to chime in before the project changed directions,” Henriod explained.
Event Browsing
Ticket Cake wanted to rethink the way people browse events. A picture is worth a thousand words - and a highly visual project was vital to the success of Ticket Cake. The team determined that focusing on colors, photos and text for events gives the users instant clues as to if they would like to attend the event or not. Ticket Cake combined a unique visual search with traditional filters such as title, genre and location to provide desired tools in a one-of-a-kind package.
On the TicketCake.com “Events” page, you can see the cross between the Bing-inspired never ending image search, and the quick text filtering provided by the “Live Views” module. This view is also filtered by date, listing events in order. Events then drop off the page after the event is over.
“Our next step for this feature is to learn more about a user’s past choices and customize their search experience accordingly,” said Dylan Jorgensen, http://drupal.org/user/8592302 lead developer for Ticket Cake.
Administration of Events
A goal for the Ticket Cake team was to allow special tools for venue owners which have not been mainstream for the industry. A special “Event Admin” user role was created for venue owners, enabling them to post events to the site. This user role also allows them to track sales, control pricing for the event, and view ticket will-call lists.
“We were able to construct these pages using views with an NID argument,” Jorgensen said. “We placed the code for the view in a tpl.php file and then printed the argument into place. For certain views that were specific to the event admin, we would place them on the tpl.php file between role verification tags.”
<span style="color: #000000"><span style="color: #0000BB"><?php $view </span><span style="color: #007700">= </span><span style="color: #0000BB">views_get_view</span><span style="color: #007700">(</span><span style="color: #DD0000">'Sample Graph of Sales'</span><span style="color: #007700">); </span><span style="color: #0000BB">$view</span><span style="color: #007700">-&</span><span style="color: #0000BB">gt</span><span style="color: #007700">;</span><span style="color: #0000BB">set_arguments</span><span style="color: #007700">(array(</span><span style="color: #0000BB">$nid</span><span style="color: #007700">)); </span><span style="color: #0000BB">$view</span><span style="color: #007700">-&</span><span style="color: #0000BB">gt</span><span style="color: #007700">;</span><span style="color: #0000BB">is_cacheable </span><span style="color: #007700">= </span><span style="color: #0000BB">FALSE</span><span style="color: #007700">; print </span><span style="color: #0000BB">$view</span><span style="color: #007700">-&</span><span style="color: #0000BB">gt</span><span style="color: #007700">;</span><span style="color: #0000BB">execute_display</span><span style="color: #007700">(</span><span style="color: #DD0000">'default'</span><span style="color: #007700">); ?&</span><span style="color: #0000BB">gt</span><span style="color: #007700">;&</span><span style="color: #0000BB">lt</span><span style="color: #007700">;!-- </span><span style="color: #0000BB">END ROLE “TICKET CAKE ADMIN” </span><span style="color: #007700">--&</span><span style="color: #0000BB">gt</span><span style="color: #007700">;&</span><span style="color: #0000BB">lt</span><span style="color: #007700">;?</span><span style="color: #0000BB">php </span><span style="color: #007700">endif; ?&</span><span style="color: #0000BB">gt</span><span style="color: #007700">;<</span><span style="color: #0000BB">br </span><span style="color: #007700">/><br>&</span><span style="color: #0000BB">lt</span><span style="color: #007700">;?</span><span style="color: #0000BB">php</span><span style="color: #007700"><</span><span style="color: #0000BB">br </span><span style="color: #007700">/><br></span><span style="color: #0000BB">$view </span><span style="color: #007700">= </span><span style="color: #0000BB">views_get_view</span><span style="color: #007700">(</span><span style="color: #DD0000">'All General Views For Everyone'</span><span style="color: #007700">); </span><span style="color: #0000BB">$view</span><span style="color: #007700">-&</span><span style="color: #0000BB">gt</span><span style="color: #007700">;</span><span style="color: #0000BB">set_arguments</span><span style="color: #007700">(array(</span><span style="color: #0000BB">$nid</span><span style="color: #007700">)); </span><span style="color: #0000BB">$view</span><span style="color: #007700">-&</span><span style="color: #0000BB">gt</span><span style="color: #007700">;</span><span style="color: #0000BB">is_cacheable </span><span style="color: #007700">= </span><span style="color: #0000BB">FALSE</span><span style="color: #007700">; print </span><span style="color: #0000BB">$view</span><span style="color: #007700">-&</span><span style="color: #0000BB">gt</span><span style="color: #007700">;</span><span style="color: #0000BB">execute_display</span><span style="color: #007700">(</span><span style="color: #DD0000">'default'</span><span style="color: #007700">); </span><span style="color: #0000BB">?></span></span>
A Drupal Box Office
The Ticket Cake team thought outside the box on how Drupal could be applied to the ticketing industry. Using the Drupal framework as an information hub, real time information about ticket sales and event attendants could be delivered to the venue’s box office or staff. The team was able to create a dynamic ticket will-call list to move the state of an order by implementing the “Views” and “Views Bulk Operations” modules.
“Our system has allowed small to mid-venues to re-think the way they can run their front door or box office,” Henriod said. “In the past, a venue would close online sales hours before the show giving them ample time to print a ticket will-call list. Using the venue features incorporated into TicketCake.com, a venue with a wireless Internet connection has no need to close their online sales, and no lists to print. We’ve seen an uptick in ticket sales and a smoother system overall.”
To further enhance the venue feature, the Ticket Cake team created a new Ubercart state in the conditional actions settings called “checked in”.
“Venues using TicketCake.com see a “Views” powered dynamic ticket will-call list for each event,” Henriod continued. “The venue’s staff simply logs into TicketCake.com, and searches for the event-goer. From there, the event-goer’s status changes to “checked in.” Oftentimes, a venue needs to know the number of attendees in real time, especially if there is a question of reaching capacity. This feature makes this stressful problem a piece of cake.”
In the future, the Ticket Cake team plans to help venues plot information collected in these features to learn about event goers’ patterns. For example, the number of tickets the average attendee purchases may help the venue change their marketing efforts to entice more ticket sales per customer. For another venue, a high number of day-of ticket purchasers may warrant a ticket price reduction to help push early sales.
Ubercart Enhancements
When it came to accepting payment for tickets, the Ticket Cake team settled on Ubercart as the best module for payment processing. However, the module required some modification:
- Ending payments after an event
First, “Event Admins” needed the ability to stop ticket sales for an event once the event has ended. “We used the “UC Not For Sale” module. This worked great except when an event admin forgot to turn off their tickets after the event,” Jorgensen explained. “To solve this we came up with this bit of code that will replace the buy now buttons with an “Ticket Sales Are Closed” notification on the node’s tpl.php file.”
<span style="color: #000000"><span style="color: #0000BB"><?php<br> </span><span style="color: #FF8000">//This is the Time of the Event $my_date = strtotime($node->field_ticket_date[0]['value']);<br><br>// This is the exact time right now<br> </span><span style="color: #0000BB">$now </span><span style="color: #007700">= </span><span style="color: #0000BB">time</span><span style="color: #007700">(); </span><span style="color: #0000BB">$event </span><span style="color: #007700">= </span><span style="color: #0000BB">$my_date</span><span style="color: #007700">; </span><span style="color: #0000BB">$number_price_format </span><span style="color: #007700">= </span><span style="color: #0000BB">number_format</span><span style="color: #007700">(</span><span style="color: #0000BB">$node</span><span style="color: #007700">-></span><span style="color: #0000BB">sell_price</span><span style="color: #007700">, </span><span style="color: #0000BB">2</span><span style="color: #007700">, </span><span style="color: #DD0000">'.'</span><span style="color: #007700">, </span><span style="color: #DD0000">','</span><span style="color: #007700">); if (</span><span style="color: #0000BB">$event </span><span style="color: #007700">> </span><span style="color: #0000BB">$now</span><span style="color: #007700">) </span><span style="color: #FF8000">//If the Event is has not happened yet { print $node->content['add_to_cart']['#value'] ; } else { print '<p>Ticket Sales Are Closed</p>'; }</span><span style="color: #0000BB">?></span></span>
- Auto populating the SKU
Second, the Ticket Cake team needed to ditch Ubercart’s default SKU settings for a product. Because of the nature of the project, SKU settings do not apply. Instead, the team used the “UC Product Power Tools” module to auto-populate it then hid the <div> tag.
- UC Pic Cart Block
Finally, the team discovered event goers would rarely need to buy tickets to multiple events at the same time. Therefore, some of the Ubercart default settings were modified to skip the cart page. The “UC Pic Cart Block” module was added to display the tickets on the same page as the order checkout.
Theming
For the Ticket Cake team, the design was all about having fun.
“The last thing we wanted was a site that was maze to get through,” said Jorgensen.
For the design team, White Label Graphics, the focus was to treat the browsing experience on TicketCake.com like that of searching Bing Images or podcasts on iTunes.
“Our vision was to allow users to find events that make a statement about them,” said Jacqueline Jensen, project manager for White Label Graphics. “It’s all about an online community - we want them to feel inclined to share the event with their friends on social media networks.”
Flash
Ticket Cake developers created a graceful Flash degradation, meaning the website looks great whether a user views the site with or without Flash. Today's websites will be viewed on desktops, mobile devices, and the iPad. It is important that developers design for all users and not leave out design flourishes or functionality.
This is different from just installing a mobile theme. When users have consistent experience across multiple platforms, they will develop greater trust for the brand and experience of the website.
Conclusion
If creating a system along the lines of a traditional ticketing company (think Ticketmaster) is the goal, Drupal is the wrong kind of CMS. However, for a team who aims to re-think the status quo, Drupal was a perfect fit.
“At Ticket Cake, our mission is to change and improve the way people go to events around the world by introducing innovative features for users to interact with their events,” Henriod said. “By offering unique rewards and business opportunities for event goers and event hosts, we are able to transform how people think about events. So far, we have been extremely excited with how Drupal has assisted us in our goal.”
- Follow Ticket Cake on Twitter
Modules Used
SEO
- Custom Error - Allow us to redirect our "Error 404" pages back to our events page.
- Google Analytics - Finds the keywords we rank for.
- Imagefield Tokens - This module allowed us to rewrite image file names based on node titles.
- Pathauto - Allows us to make our URL's search friendly.
- XML Sitemaps - Assists search engine crawlers index the site.
Images
- Colorbox - Used for the shaded backdrop on event pics.
- Imagecache Actions - Helps make the rounded corners on the pictures.
- Imagefield Crop - Keeps all the flyer's the same size.
CCK
- Node Reference URL Widget - For when a user is creating a new event it gets attached to the the correct venue.
- Node Location Relationships - To display the venue page with all the events associated with it.
Ubercart
- Ubercart CIM - Allow users to edit there own credit cards.
- Ubercart Not for Sale - Some events do not sell tickets.
- UC Pic Cart Block - To save one step on the checkout process and give a visual way to see there ticket on the checkout page.
- UC Product Power Tools - To auto fill the SKU Ubercart required on all products.
- UC Who Bought What - Populates our lists for venues.
Views
- Views Bulk Operations - For when the venues are using our back end to run their entry. It allows them to check in groups.
- Views Export XLS - So venues can save a excel version of there guest list.
- Views Live Filter - Removes the submit button and saves time when searching the site.
Users
- Autoassignrole - Give users the permission to buy tickets.
- Email registration - Easier log-in, hides and auto-populates Log in name.
Theme
- Message Effects to give a bounce with the warnings messages on our site.
- jQuery_ui - for Message Effects.
- jQuery_update - for Message Effects.
Mobile
- Browscap - To detect how a user is viewing the website and serve up the correct version.
- Mobile theme - Uses the browscap information to serve up the mobile theme.
Performance
- Boost - Page caching and and a flexible virtual based host like Stackable.com or Slice Host Page cashing.
Drupal version: Drupal 6.x