Festival Checklist Promo Page (Html5 Animations)

Launch date: Februari 2014.

This is the promotional landing page for the main project Festival Checklist.

Objectives:

  • To design and develop a landing page to convert visitors into using the popular Festival Checklist web app.
  • To design and develop a unique interactive animated user experience that is compatible with HTML5, using for example parallel animations (no Flash).
  • To design a color palette for the target audience (females going to festivals). The project contained initially a dark theme and a light theme. The dark theme was selected as the winner after a period of customer feedback by the target audience. And the light theme was trashed.
  • Apply and customize the Gumby CSS Framework, which is based on SASS/Compass.
  • Implement various Javascript and CSS3 animation libraries.
  • Design a Bootstrap-like 1 page design.
  • Designed for mobile first. Responsive web design and supporting touch-based devices are clearly the way to move forward.
  • Design for different content on various device platforms. This approach is going one level further than a strict responsive design. The visibility and the order of the content sections also vary on several device platforms.
  • Develop an automated build system using the Grunt Javascript Task Runner and develop a template that can be used in future projects.
  • Implement Google Analytics’s Custom Events in order to analyze the user’s behaviour on this landing page (Behaviour), to analyze the goals (Conversions), and optimize the landing page using this information. I planned to implement the beta Universal Analytics but unfortunately it does not support Custom Events for the moment.
  • Improve graphical creative design skills.

 

Animations:

The animations are best demonstrated in… a video:

 

Google Analytics: Goals based on the Custom Event “clickstream”:

via infozine.be

Project Documentation:

Notes:

  • The build and deploy processes are automated using Grunt running on the NodeJS platform. The various HTML, JS and CSS/Compass/SASS components are validated and minified before being deployed.
  • This landing page mini-project has a programmatic interface with the other web app “Festival Checklist”. A conversion on the landing page results in autostarting the use case “Compose My Checklist” within the web app.

Go to: