
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.”
<?php $view = views_get_view('Sample Graph of Sales'); $view->set_arguments(array($nid)); $view->is_cacheable = FALSE; print $view->execute_display('default'); ?><!-- END ROLE “TICKET CAKE ADMIN” --><?php endif; ?><br />
<?php<br />
$view = views_get_view('All General Views For Everyone'); $view->set_arguments(array($nid)); $view->is_cacheable = FALSE; print $view->execute_display('default'); ?>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.”
<?php //This is the Time of the Event $my_date = strtotime($node->field_ticket_date[0]['value']); // This is the exact time right now $now = time(); $event = $my_date; $number_price_format = number_format($node->sell_price, 2, '.', ','); if ($event > $now) //If the Event is has not happened yet { print $node->content['add_to_cart']['#value'] ; } else { print '<p>Ticket Sales Are Closed</p>'; }?> - 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.


Comments
That banner is crazy! What is
That banner is crazy! What is that, some type of flash animation?
Lovely site, simple but
Lovely site, simple and very pleasing to the eye. The banner is really cool.
another high five
Yeah- third praise for the banner. That is awesome.
Thank You
Thanks, we are really happy with the banner. Although I would like to make the splatter effect more of a cake spatter and less of an ink splatter when I have time.
Excellent Update!
Vying for the front page, are you?
Well, I have to say: excellent work on the documentation! Some of the design ideas/concepts you've shared are causing me to rethink a few processes for my own projects Very, very, helpful stuff.
Thanks again for the inspiration!
Great effect, but in terms of
Great effect, but in terms of SEO and usability it is not a good feature. Maybe the whole thing should be realized using CSS3 or jQuery. So the menu is still accessible for bots and users without Flash. For example, I'm using Opera and the menu is only accessible after clicking once on it — to activate the Flash plug-in.
Boost is a good start to make a Drupal installation faster, but there are a lot of other things you could do. If I have a look at YSlow or Google Page Speed I find a lot of things you could do to make your site faster.
I recommend to use those tools to get some important tips for increasing site performance:
You should definitely active the aggregation of CSS and JavaScript on Drupal's performance page (something you can do right away). Additionally you should consider using Pressflow instead of Drupal. Pressflow is a high-performance distro of Drupal.
Modules I can definitely recommend to speed up your website (works best together with Pressflow):
Hopefully I could help you to point you in the right direction in terms of performance. This is an important issue, for user experience and SEO.
Flash Degradation
Thank you for all your performance tips!
We made sure to have alternate content for the header so the website still looks great on an Ipad.
Opera is an interesting problem because it doesn't go right to the alternate content, but doesn't display the Flash by default either.
suggestions
Nice looking site, but a few suggestions.
BTW, what did you use for the top banner with the splatter/ buttons?
I did find the image flash banner a little slow to load and set up. (all are a little large images to load). BTW, what di
I would suggest having the twitter, myspace, and facebook links open in a new window. This would allow user to wonder off but still have the main page remain open.
Hi, I'd like to know how you did the HP image accordion...
What module(s) did you use for the "accordion image rotator" on the Home Page? Thanks for sharing and congrats for the site.
Homepage accordion original link
The homepage accordion was not made with a standard Drupal module. It was an adaption from a Wordpress theme we moved over to the page-front.tpl.php. You can see the original at Theme Forest. http://themeforest.net/item/innovationscience-wordpress-edition-theme/fu...
Very happy you made it
Very happy you made it througth.
Congratulations it look realy great.
Diallo.
Cool website. The themeing
Cool website.
The themeing of the website really fits the image.
Although the code portions of your writeup don't seem to be formatted correctly.
A great concept and nice
A great concept and nice website!!
---~~~***~~~---
aac
who control the event show up
who control the event show up on front page top banner ?
Most recent 6 events ? or control by site administrator ?
They are selected based on
They are selected based on popularity, through tracking our page views and clicks.
what modules did you use on
what modules did you use on tracking page views and clicks ?
Google Analytics
The homepage is manually updated, so nothing fancy we just look over our google analytics for the numbers.
What content type are the Events and Venues themselves?
I don't see any mention of any events modules in the listing above. Would like to add events to our user group website being migrated to Drupal. How are they representing event and venue nodes? Reusing core Drupal content types, some modules or custom code?
Events Modules
On TicketCake.com the events are Ubercart products. We use the date and time CCK fields to give the product node the ability to be sorted and shown in different views. Then Venues are a separate content type and we use views relationships to assign the products to the right venues.
Nice case study
Fantastic. Very nice website... cool design.
Gorgeous and fantastic
Running a small ticket sales site myself, I am impressed by how you have tackled the issues you face. Great looking too.
Hey! I just noticed you are using my Who Bought What module. That makes me smile!
:)
Who Bought What Module
We have used your module on two occasions and highly recommend it! Thank you for your comments.
Great Job!
I love TicketCake, it's a big step on ticketing. Go TicketCake Go!
Nice
Nice
really awesome site!
really awesome site!
nice
You have created really great site. Congrats.
hiding the userID from the URL
How did you get user pages to show up as user/me ?
I am aware of Pathauto but when I try to do this it always
defaults to user/me-01 - amending the user ID to the end of the url.
In your case you are hiding the userID somehow.
Nice site BTW!
edit; never mind, I figured it out using panels and views permissions to sort this out, thanks anyway.
Me Aliases Module
It was a user module called "Me Aliases" http://drupal.org/project/me
crazyyyy, cooolll. awasomeee
crazyyyy, cooolll. awasomeee
Very nice work indeed! Always
Very nice work indeed!
Always admire sites mixing eCommerce & community features and i'm not a huge fan of flash but the flash header is really slick!
Congrats
Tom
______________________________________________
https://tomswebstuff.com
Nice Site
Cool website. I love the interactive banner.
Events Page
When you scroll down the events page the images seem to "fade in". Are they being partially loaded? If so, what are you using to do this? Nice site.
jQuery module lazyload
To make the images fade in we are using the lazy load jquery module.
thanks.
thanks.
Tab view is good
Tab view is good.
Great Case Study and great use of Drupal CMS
Well done people.
You used Drupal with its finest features and where ever needed you made modifications in order to incorporate properly the underlying business logic!!!!
+1.
Just a couple of quick comments.
1. You did not discuss anything about the theming.
2. On the search box if you use no arguments at all and just select from the genre list no results are displayed. Is this the way that is suppose to run?
Theming & Search
So the theme is done with mostly within template.php but the main shape of the design was done on the 960 grid (Read our blog post here). As for the search, we have some work to do. The genre works as a general exposed filter but there is time gap as the website reads your ip and automatically filters by state. We will be working more on that in the future.
Great Site
I really Appreciate the work.
You people made a really good looking site and the slide show is really nice.
I like the theme you made.
good work gaye's.
zakir.gori
How do you submit an event
Excellent site but I think I am missing something, how do you submit an event that the user wants to promote? I tried the "submit event" button on the homepage, after I have registered and all i get is a list of events that have already been submitted. Am I missing something?
Link explained
Thanks for the question. We just realized the link you are referring to on the homepage was not going to the correct Webform. We just fixed it, but that link is for a venue who wants to sell tickets. To promote events you can log in then click the share buttons on any of the products under the flyer. (We are working on a video explanation that should be ready next week)
Message effects!
Message effects looks awesome in this implementation! Congrats on the launch.
Nice site, like the links at the top
How did you get the Events and Blog to come up under the website when someone search's it? The splashing behind the top links is really cool. Keep up the creative and unique work.
There are a couple things you
There are a couple things you can do to hep how Google determines the sub-index of your website under your the main site.
Link the to pages you would like sublisted with H1 tags, and only use h1's for those pages from the front page.
In your XML sitemap drupal module you, can set priority of the pages listed in the sitemap.
Have some backlinks pointing to the those pages from outside websites.
Thank You
Thank you very much I really appreciate your help. I will def do all of the things mentioned above.
accordion
How did you do the image accordion?
My vote is always for drupal
My vote is always for drupal website especially in e commerce. Thanks for the above script this is would be the beneficial for all developer especially for me..:)