← Previous
02
Process
A fluid strategy of planning, direction, and hands-on design work
Since 2017 was the 6th installment of TNWSC, several of the design elements were previously-determined in years past. However, new this year, I overhauled functionality and layout of our custom microsite, as well as brainstormed content and layout ideas for the new on-stage video wall backdrop.
Familiar design elements:
The logo is the same, while we tailored the design for the poster and social media graphics around the 2017 content. The t-shirt design is new and inspired by the Dr. Seuss classic “How The Grinch Stole Christmas”. These items are relevant because aspects helped shape the visual tone for the website and video wall content.
Preliminary website development:
When planning out the custom microsite, I created a sitemap to serve as a blueprint for the various pages that I’d need to build. Then, I created a handful of sketches and wireframes to get a better sense for the content layout… this is especially helpful when trying to articulate my vision to other team members.
Video Wall development:
Early on in the development stages for the video wall content, I created a few schematics for my team and I to refer to when coordinating with AV Chicago. This helped ensure everyone was on the same page, and allowed us to have more productive conversations about layout and content.
03
Website
A dynamic, modern, and user-friendly experience
For pre-premotion, I opted for a one-page website, with a cool video background, and a clean layout that quickly spells out all important info. Further, I built a custom sticky nav with smooth scroll that allows the user to easily bounce around from section to section. The ulitmate goal was to capture the user’s attention, give them the facts, and send them on their way to buy tickets!
Pre-Promotion Landing Page:
The browser view is a scrollable figure that demonstrates the page layout (at this viewport size). The iPhone view is a video that demonstrates the user experience on mobile. Note the sticky nav (with horizontal scroll), the smooth scroll vertically from section to section, as well as the horizontal scroll for the lineup each night.
Dynamic Video Masthead:
This figure demonstrates the video background we used within the masthead/branding section. The falling snow was created using PNG graphics and CSS.
After the concerts:
This figure is scrollable, helps demonstrate the full page layout for the Relived section that was created to recap the concerts with photos and videos.
04
Video Wall
Enhanced concert experience
The video wall was a new asset for us to use in 2017, giving us the ability to create a variety of animations to enhance the presentation of the concerts. The video wall also allowed us to generate revenue with custom sponorable opportunities that we used in between band performances during stage setup.
Sponsor Logos Animation:
During the “Countdown Schematic” phase, we carved out various sponsorable opportunities. These examples demonstrate the rotating logo video. The figure on the left is my rough mockup to establish layout and scale. The figure on the right is a portion of the finished animation.
Live Demo:
These videos put our work into greater context of final output, providing a reference to scale, as well as a reference to the graphics were tied into the experience of the concert.
05
Results
Overwhelming success
We received great feedback from sponsors, record labels, and fans for all of our work for TNWSC. The video wall was a successful addition this year, elevating the overall concert experience to an exciting new level. Regarding the custom website, the amount of traffic that we received further underlines the success, and proved to be a great compliment to the sold-out shows.
3
Nights of sold-out concerts
9
Total number of bands featured
109k+
Website pageviews
TNWSC captured in 6 pictures:
These photos by Zach Spangler demonstrate the popularity of the event, on-site. Judging by the overall engagement on the microsite, I’d surmise that it was a very nice compliment to the event as a whole.