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 Visit GIFFFFR

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. A few months after launching, 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 big list of other sites as their GIF creation source as well as see these animated GIFs in action when sharing to Twitter and Facebook. The static site was built using Gulp, SASS, Compass, and PHP.

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


2014 × nclud Design / Code Visit Sketchbook

As a leading digital creative agency, nclud is always pushing the limits of interaction and design. In order to show off our work and share news, events, and thoughts, a site called Sketchbook was built featuring long-form case studies about important work as well as a general purpose blog. Each case study is individually created to focus on the story of the work, from initial concept to finished product, using unique elements to highlight interactions and designs. The responsive site was built using Grunt, SASS, and Compass on a Jekyll static backend.

Development: Jared Laser, Jesse Shawl Visit Sketchbook


2014 Design / Code / Identity Visit AwesomeThings

A blog about design, technology, creativity, and advertising (and whatever else pops into my head), AwesomeThings is an outlet to write my thoughts about the modern digital world in a more expansive way than the character limit imposed by social media. Working through various design iterations, the latest version strips down the site to the basics: a focus on text, legibility across all devices, and minimal distraction. The responsive site was built using SASS, Compass, and PHP on a WordPress backend.

Visit AwesomeThings

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

Renaissance Hotels.

2013 Design

As part of an overhaul of their brand and digital experience for guests, Renaissance Hotels by Marriott installed iPad kiosks in the lobbies of their hotels. Called “RNavigators,” they allow visitors to see what experts recommend for dining, shopping, and activities around the hotel in an effort to encourage discovery of the local areas and culture. From these kiosks, users are able to send an email to themselves with their selected recommendations or sign up for a “pick of the day” that has featured recommendations. The emails were designed to follow the clean and elegant goals of the new Renaissance branding while also being flexible enough to allow for multiple selections or featured images to show off recommendations.

Development: Kevin Sung

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. You should check us out — we’re nice people and we do great work.

I write about design, code, technology, advertising, and creativity on AwesomeThings. 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, Neustar, Pink Taco, The Viper Room, Volkswagen Financial Services, Sweetgreen, US Department of State