Home Page
Projects > Vintage Experience
Search:
Vintage Experience Thumbnail
Vintage Experience v1.0
Completed
Software suite to run Gregory Charles’ Vintage Experience concert
Rating: 10 (Highly utilized, large scale, minimal production time)
Project Time: 2/20/2013-5/24/2013: 900
Languages: JavaScript, PHP, MySQL, GoLang
Requirements:
Downloads: No downloads currently available (See any updates below for prior versions)
Sections: Information, Content, Concepts, Notes, Updates, Comments
Information
Gregory Charles’ 8 million dollar Vintage Experience project. This included:
  • The primary website
  • Voting software that handled millions of web page votes in under 30 seconds, which was first deployed during the Gala Artis, a Québécois Television Award Show
  • A complete suite of control software for the stage manager to push audience content to two gigantic stage monitors and the monitors embedded in the artist’s piano
  • Mobile compatible web pages for the audience to answer live questions and send chat messages to the artist during the performance to help shape the show
  • Mobile compatible web pages for the audience to order drinks during the show, and for the staff to manage the drink orders
Content

Vintage Experience is a large scale concert/event project for the Québécois artist Gregory Charles. A custom venue is built up in every city he performs specifically tailored towards the unique experience Gregory Charles creates. The show is audience driven, in that the audience members vote, answer questionnaires, and send chat message to Gregory Charles during the concert to shape what occurs.

I created all the software for this project ranging from the basic information website, to the software used by the audience to tailor the dynamic experience to their wishes, to the control software that is used to drive the show. I did all the front and back end layout and programming, including creating the HTML and images from PSDs given by the designer.


The following are brief explanations of the different parts of the project:
Main page:
Vintage Experience: Main Web Site
  • Index page:
    • Ability to automatically convert the main web pages from dynamic PHP to a static structure with HTML to put on Amazon S3 for high load situations
    • A video section at the top that rotates between different videos and has multiple mute buttons. As the page is scrolled, it fades out and a menu bar background fades in.
    • A header section that is always on the top of the page, with a menu bar that docks on top after the main video
    • Multiple languages available (French and English). The language is detected by the browser preferences, and can be switched afterwards by clicking the language button. The last language is remembered via cookies.
    • Bookmarked sections controlled through hashtags that smoothly scroll to the proper location, accounting for the header. The menu and footer have links to most of the sections.
    • A mobile compatible picture section that slides like an iPhone interface and has a custom popup image gallery
    • Most of the content is dynamic and settable by an admin interface
    • Dynamic overlay graphic that move as a parallax while the page scrolls
    • Dynamic press quotes
    • Latest tweets from the Vintage Experience twitter account
    • Subscribe to news letter
    • Stock-type-ticker that shows the current song Gregory is playing live
    • Date picker for show times with blockable times and dates for sold out shows (Also seen on the Buy Tickets page)
  • Contact Page:
    • Embedded Google Map applet to event location with custom icon and overlays
    • Custom contact form
  • Past Shows: Shows everyone’s votes for favorite songs per date along with pre-selected favorite quote
Scalable voting:

This was originally deployed during the Gala Artis, a Québécois Television Award Show, in which an audience of millions was given the option to vote via a web page on their cell phones on what Gregory Charles would perform during the event. The software was able to handle millions of web page votes a minute. This involved bringing up and controlling a number of Amazon EC2 servers.

Questionnaire:
Vintage Experience: Questionnaire
  • For each ticket bought for the show, 1 token is given to answer a questionnaire. Answers are used as percentage indicators, and often individually, to drive different parts of the show.
  • A unique code is given at the end of the questionnaire that the user is told to keep. This code is used to keep track of the person’s data and log into the live-show site at the time of the concert to interact with the show, including ordering drinks. It can also be used to go back and edit the questionnaire.
  • The purchaser of the tickets can forward the questionnaire to the emails of the individuals the remaining tickets were bought for to spend the rest of the tokens by filling out questionnaires.
  • The user can choose to count multiple tokens towards a questionnaire so it does not have to be filled out multiple times for multiple people.
  • The entire questionnaire is mobile compatible.
Live Site:
Vintage Experience: Live Site
  • The users log in with their unique code given by the questionnaire to access this part of the site during the show with their cell phones. If the code was lost and cannot be recovered, a new questionnaire can be filled out shortly before the show by picking the date and time of the show.
  • The live site has 5 tabs:
    1. Profile: Show the user’s information including their questionnaire answers
    2. Live Chat: Send messages directly to Gregory Charles that he and his manager see during the performance
    3. Questions: Questions are sent out periodically through the show that the audience answers from their cell phones. The answers are instantly tabulated and can be shown both on the big screens and Gregory Charles’ piano screen. This tab automatically gains focus when a question is asked.
    4. Order drinks (with age verification for alcoholic beverages): A basic cart checkout system, delivered to a given seat number
    5. Jukebox: Allows the audience to vote for the song that they want to play before the show and during the intermissions. The songs are played through the big screens, which have a scroller at the bottom with the song name and names of everyone who voted for that song. Song were automatically chosen and played based upon the number of votes. $1 was also donated to a foundation for every vote received.
  • Entire page is mobile compatible and only has 1 initial load time
  • This is the only part of the project where someone else converted the PSD to HTML/CSS (lack of time).
Primary admin control pages:
  • The 2 primary admin pages (below 2 sections) are 1080p in size and work together to control the same block of the show. Whenever the tab for a part of the show is selected on one screen, it automatically selects on the other. Information is also shared in between them.
  • Both admin interfaces allow everything to be dragged to targets, including reordering lists.
  • All shown information is editable (updated in the database) via the search sections.
  • All changes are immediately saved to the database (in the background) in case a refresh is needed.
Admin control page: Control Big Screens
Vintage Experience: Admin Control Page: Big Screen
Controls the gigantic screens above the stage. Content is directly pulled from (searchable and random):
  • Pre-uploaded backgrounds
  • Pre-uploaded Images
  • Facts about artists
  • Live audience answers
  • Live audience responses to questions
  • Information about songs
Can also show live percentage results
Admin control page: Control Gregory’s Piano Screens
Vintage Experience: Admin Control Page: Grecory Charles Screen
  • Controls the primary Gregory Charles’ piano monitor, letting him choose the next few songs he wants to play via a keypad. The info for this interface is mainly pulled from questionnaire info.
  • Shows live information and results from votes, which can also be sent to the primary piano monitor
  • Control and sends show timers to the primary piano monitor
  • Can send messages directly to the primary piano monitor from the event coordinator. The box to send these messages can have many different types of information dragged to it to include in the message.
Admin control page: Live Chat and Questions
This 3rd 1080p admin interface:
  • Shows all the live comments from the audience. The secondary piano monitor also shows these comments.
  • Through this interface, the event coordinator can ask the audience live questions, and view/search the results of the answers. The questions are sent to the live site page on audience member’s cell phones, and can be multiple choice or free answer.
  • Can send messages directly to the primary piano monitor from the event coordinator. The box to send these messages can have many different types of information dragged to it to include in the message.
Other pages
  • An admin page to handle drink order fulfilling, which includes printing receipts for, modifying, canceling, searching, and sending orders.
  • Different automatic emails are sent out at pre-specified intervals before and after the show with different information and personalized links, including to the questionnaire.
  • Admin pages to search and manage questionnaires
Concepts
Mobile compatibility, scalability
Notes
When trying to create a complex new experience, custom software always does the trick
Updates
GC and C2MTL Website Updates @ 2016-02-08 06:04:17
Vintage Experience @ 2013-09-09 21:55:25
Added the Vintage Experience project. Gregory Charle’s Vintage Experience is a large scale concert/event for the Québécois artist Gregory Charles. A custom venue is built up in every city he performs specifically tailored towards the unique experience Gregory Charles creates. The show is audience driven, in that the audience members vote, answer questionnaires, and send chat message to Gregory Charles during the concert to shape what occurs. I created all the software for this project ranging from the basic information website, to the software used by the audience to tailor the dynamic experience to their wishes, to the control software that is used to drive the show.
Comments
To add comments, please go to the forum page for this project (guest comments are allowed for the Projects, Posts, and Updates Forums).
Comments are owned by the user who posted them. We accept no responsibility for the contents of these comments.

No comments for this Project