Festival Checklist Promo Page (Html5 Animations)
Launch date: Februari 2014.
This is the promotional landing page for the main project Festival Checklist.
- 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.
- 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.
- 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.
The animations are best demonstrated in… a video:
Google Analytics: Goals based on the Custom Event “clickstream”:
- 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.
- Festival Checklist promo page (dark theme, Html5 Animations).
- Festival Checklist promo page (light theme, Html5 Animations). This theme was dropped in favor of the dark theme, this link might not work forever…
- Promotional banners 300×250 (Html5 Animations) which are uploaded into Google DoubleClick.