NBC Sports.

2015 × nclud Design / Code

Every company likes to think of their project as “the big game,” but only one can truly lay claim to THE Super Bowl. While NBC Sports already had massive numbers of fans on Facebook and Twitter, they were looking to conquer another social media platform in the lead-up to the game: Tumblr. The network needed something eye-catching and beautiful that was also rock solid, fast, and responsive across desktop and tablet platforms in order to share content and interact with fans. We used JavaScript particle effects in conjunction with SVG objects and CSS animations to create a unique, smooth, and compelling animation that would just work everywhere (even on underpowered tablets). In addition, we built out a fully custom responsive grid and lightbox interaction to provide the best possible visual experience for visitors that also allowed for maximum sharing and social exposure. During the game itself, the site was promoted on air as a “second-screen experience,” serving up the television ads as they went live — and we made sure that those videos became the center of attention, presented in a huge and beautiful manner. With coverage on CNN, Huffington Post, Reuters, Variety, AdWeek, and Advertising Age and over 38 million unique page views in under twenty-four hours, the site was an immense success, surpassing every expectation. It was built using Gulp and SASS on the Tumblr backend.

Additional Development: Ramsay Lanier

World Of X.

2015 Design / Code Visit World Of X

Growing up, the mutant outcast heroes of Marvel Comics known as the X-Men struck a personal chord with me, leading to immense collections of action figures, comic books, and a probably unhealthy Saturday morning cartoon addiction just to catch up with the latest adventures of Wolverine and friends. When Marvel announced an API with references to their entire history of publishing, it was time to turn that childhood obsession into something amazing. Initially conceived as a quick experiment to combine the Marvel API, the Google Maps API, and the Meteor JavaScript platform, World Of X quickly became an expansive and comprehensive guide to almost every location in which the X-Men have lived and battled. Based on a fully interactive map, the site allows visitors to explore these locations with large comic book imagery, a full description of the location and its relevance to the X-Men, and a link to every comic series in which the location has played a part. World Of X is fully responsive across all sizes and devices (even including a full-screen big picture mode) and was built using SASS on the Meteor platform with Marvel and Google Maps API integration.

Visit World Of X

This Week's Playlist.

2015 Design / Code / Identity Visit This Week's Playlist

With so much new music being released every week, how does someone find the best of it without constantly visiting blogs or relying on Pandora or Spotify to happen upon a song they might like? That was the challenge tackled by This Week's Playlist — every Sunday, a new playlist of ten to twenty songs, curated by myself and a fellow music blog veteran. Intended to be inherently temporary, there is no archive or reference of old playlists or songs. With a mix of all genres and styles, the site uses large beautiful serif type contrasted with an old-school monospace font to introduce listeners to something they might not have heard before (and, hopefully, will dance along to). A static site built with Gulp and SASS, This Week's Playlist is fully responsive so that anyone, anywhere can listen on whatever device or platform they prefer.

Visit This Week's Playlist

Tesla Motors.

2014 × nclud Design / Code

For Tesla Motors in Austin, South By Southwest is the perfect opportunity to market themselves in an innovative way to the many technology-related visitors and residents of the area. In an effort to spread the word and grow their marketing, we created a way to interact with people in an individual way — by allowing them to customize their own Tesla and share it with the world. Planned to be used on iPads on site as well as on the in-dash web browser of a Tesla Model S, the site would let visitors pick their Tesla's color, roof, wheels, and interior before sharing a photo of it on their own Twitter account with the hashtag "#TeslaSXSW." Tesla Austin would then randomly pick certain users who had posted their customizations to win a day of being driven around South By Southwest in a chauffeured Model S. Unfortunately, due to time constraints, the full design and execution of the promotion was unable to be executed. The responsive site was built using Gulp, SASS, and Compass, with Express and Node.js handling the back-end integration with the Twitter API for social sharing.

Additional Design: Brooke Hollabaugh  ×  Development: Jesse Shawl


2014 Design / Code / Identity

Animated GIFs have become the social language of the internet, used across Reddit, Tumblr, Twitter, emails, and even text messages. While everyone uses them, it's hard for people to make their own — the current tools and applications out there are complicated, slow, and make small, low-quality GIFs. GIFFFFR is a web application that was built to solve that very problem — enter a YouTube video, select your size and time, add a caption, and you have a high quality GIF that can be directly uploaded to various platforms for social sharing. Using modern HTML5 and JavaScript, all of the rendering of the video to GIF is client-side with low server overhead and no back-end processing of the image. GIFFFFR was covered by multiple blogs and online magazines, including FastCo.Labs, Yahoo! Tech, The Wire, and Wired, as well as making the front page of Product Hunt. After launch, GIFFFFR partnered with Giphy, the leading (and most fun) GIF sharing platform on the web to become their primary tool for creating GIFs from videos and uploading directly to Giphy. This partnership also led to an increase in capabilities — users were now able to use not only YouTube videos, but also Vevo, Vimeo, DailyMotion, and a whole list of other sites as their GIF creation source, as well as see these animated GIFs in action when sharing to Twitter and Facebook. Once the partnership was concluded, GIFFFFR was acquired by Giphy to become part of their in-house and public facing GIF creation toolkit. The static site was built using Gulp, SASS, Compass, and PHP.

Peter Venkman's "World of the Psychic" (from Ghostbusters II) made using GIFFFFR.

Mistaken For Strangers.

2013 Design / Code / Identity Visit Mistaken For Strangers

A Washington, DC-based music blog started by myself and two fellow music lovers, Mistaken For Strangers’ tagline is “We like good music. We think you should too.” All identity and branding from the start was done with the intent of conveying the knowledge and love of music that we share. The site was designed to be more like a print magazine than a traditional blog, with a focus on large imagery, great typography, and dynamic high-impact layouts. Mistaken For Strangers was built using SASS and Compass with fully responsive custom templates (including swipe gestures, AJAX loading, and web app capability for mobile) on a WordPress backend.

Visit Mistaken For Strangers

Metro HotCars.

2013 Design / Code Visit Metro HotCars

Initially built as a humorous single page site to test out some new CSS3 animations and development techniques, Metro HotCars quickly struck a chord with DC residents fed up with the failings of the local regional transit authority. Exploding overnight based on a single tweet, the site saw over twenty five thousand unique visitors within twenty-four hours and was covered by DCist and the CBS local news. After receiving a cease and desist from the transit authority’s lawyers, the site was quickly redacted, with all references, copyrights, and trademarks scribbled out in the style of confidential documents. This, of course, elicited another round of coverage from the local media, heaping scorn on the transit authority’s handling of the situation. What started as a simple design experiment launched in the middle of the night escalated into an example of how not to respond to social media and satire online. The static site was built using SASS and Compass.

Visit Metro HotCars

My name’s Kyle. I’m a designer and coder. I’m sarcastic. I sing in the car. I love Chuck Taylors and Wayfarers. I’m a font nerd. I organize my closet by color. I was born on a Friday. I’ve been to the emergency room in every place I’ve ever lived.

I’m the senior interactive designer for nclud in Washington, DC (but I live in Richmond, Virginia). You should check us out — we’re nice people and we do great work.

I write about design, code, technology, advertising, and creativity on Medium. I post weekly music — both new and old — on This Week's Playlist.

Other than that, I post random thoughts on Twitter, random things on Tumblr, photos on Instagram, code and projects on Github, and designs in progress on Dribbble.

Do you have an awesome project that needs design or code? I’m available for limited freelance work, so email me.

Additional Clientele

African Wildlife Foundation, AOL, Audi Financial Services, Clyde's Restaurant Group, Comcast, Doubletree by Hilton, jQuery Foundation, Neustar, Pink Taco, The Viper Room, Volkswagen Financial Services, Sweetgreen, US Department of State