VA Summer Jam

Strategy, Responsive Website Design and Development, Wordpress Integration

Background

The Virginia Lottery has been creating fun and exciting games for Virginians since 1988. 100% of the Lottery’s profits go to support public K-12 education. We partnered with the Lottery in the past to create the JeepSeeker and Z-VA games, and were thrilled to be selected in the fall of 2014 as one of the seven “Best in Class Partners” for the Lottery to continue creating fun digital experiences to help support public education throughout the Commonwealth.

The Challenge

We partnered with StoryWerks, another member of the Lottery’s Best in Class Partners, to tackle the challenge of creating the digital backbone of the Lottery’s summer promotion, VA Summer Jam. Vasummerjam.com is the digital hub that promotes concerts and music events across the state; features music downloads, videos and insider content from the Virginia bands Anhayla, Carbon Leaf, and Jukebox the Ghost, as well as games, behind the scenes stories, free concert tickets and upgrades, VIP Music Experiences and more.

screenshot of the VA Summer Jam Free Music page

The Solution

Design

Our goal for the VA Summer Jam site was to create an experience that looked and felt like attending a rockin’ summer concert — an experience that captures the excitement of the lights dimming and the bands taking the stage, but also embodies the energy and vibrancy of those hot summer days and warm summer nights, with bright lights on the stage and motion of the musicians.

screenshot of the VA Summer Jam Events and Prizes pages

This site has a significant amount of rich, real-time content, and we chose a feed-driven design to help showcase the different types of content — blog posts, music downloads, prizes, events, Summer Jam Journal posts with photos and videos from the concerts — across a variety of devices and platforms.

screenshots of the VA Summer Jam homepage

Development

We leveraged a variety of development techniques to enhance the site’s design and build a moving, engaging experience. One of the ways we achieved this was through animating SVGs and other design elements, including the equalizer in the header, the event grid hover animation and the page transition animation.

A major focus of this project was delivering a site that was exceptionally fast and performant. By utilizing the browser’s History API along with our Javascript, we built a site where the user doesn’t experience unique page loads. Instead, when a user hovers over a link, the site preloads and caches the page. This decreases the apparent load time between pages and gives the website a fast, seamless feel, from loading new content in the home page grid, to viewing the music, prizes and the other pages on the site.

See the Pen VA Summer Jam Page Transition by CO+LAB (@teamcolab) on CodePen.

Co+Laboration

We have some of the best clients and partners around, and working with Storywerks and the Virginia Lottery to bring the VA Summer Jam site to life was an experience that absolutely rocked!

The Summer Jam events, concerts and giveaways are going on throughout the end of the summer, so be sure to visit vasummerjam.com and check out what’s happening near you!

Like our work?

Learn more about what services CO+LAB can offer you and your business.

Our Services

Have a project in mind?

We'd love to hear from you and answer any questions you have.


Shoot us an email and let's get started.

Say Hello!