Design + Code + Identity

My name is Kyle Conrad.

I make awesome things for folks like Disney, Bethesda Softworks, NBC Sports, and
 Tesla Motors.

Design + Code

Anti-Defamation League.

Never again.

The Anti-Defamation League (ADL) is an international Jewish civil rights organization with over a hundred years of experience in raising awareness and fighting extremism. Since the 2016 presidential election, they grew increasingly concerned with the rise of hate crime reporting and the growing use of antisemitic language in the political and public spheres. To combat these alarming incidents, we worked with the ADL to create a comprehensive digital report on the history of antisemitism (both internationally and within the United States) as well as the seven most pervasive antisemitic myths.

While the ADL team had an eighty page base report, we wanted to create an interactive version that would allow for better social sharing of individual elements as well as visitors to carefully read all of the data, something that might be overwhelming if just presented with a wall of text. Starting with a series of interactive content concepts, we quickly narrowed down on a structure that had a base landing page, individual myth and history landing pages, and an interactive loading structure that could pull those separate pages into a single screen without the visitor having to navigate away or lose their place. Once we had the overall content structure in place, we worked to create a series of high-level modules that would build out the site, including embedded videos, image sliders, and interactive footnotes.

For the design, ADL wanted something striking and bold while still being easy to scan and read. Based on their stated inspiration and existing branding, we created a series of style tiles to hone in on the goal — one based on the current ADL web presence, one based on elements of the print styles, and one based on online longform journalism. With a final style and wireframes in hand, we turned the report into a visually gripping digital experience, with large full screen images, a sidebar navigation element, and striking deep reds and blacks. We worked hard to emulate the legibility and tangibility of the print medium while still creating something innovative for the digital space, all while encouraging the ADL team to layout their image and video assets in a variety of ways to best tell the story.

In the lead up to launch, we made sure the experience was smooth and consistent — lazy loading of all images and assets helped page speeds, JavaScript animations achieved consistent frame rates across all browsers and devices, and ajax loading of myth and history pages meant visitors would never be lost. Visitors could share not only pages of the site, but also selected quotes from within the stories on social media. Video hero areas on each myth page and bold hover elements reinforced the narrative and kept visitors engaged. Each page encouraged visitors to get involved by signing up with the Anti-Defamation League to join the fight against antisemitism and help them advocate for civil rights for all.

Agency: Friendly Design Co. Additional Design: Olivia Huffman.

All work was designed with Sketch and Illustrator. InVision was used to prototype interactions. The fully responsive site was built using JavaScript, GreenSock, Gulp, and Sass on the WordPress content management system.

Initial wireframe concepts explored content structures and interactions, from a single scrolling page to loading pages in an overlay to a narrative format.

Once the basic content structure was decided, we created a series of modules that would not only highlight their content but also provide visitors the best reading experience.

Alongside the content structure, we designed a series of style tiles (one based on existing ADL digital branding, one based on the print styles, and one based on outstanding longform journalism) to perfect the look and feel of the report.

Bold hover animations were incorporated throughout to reinforce the themes of the report and keep visitors engaged.

Interior myths and stories would load as an overlay element from the landing page but could also be loaded and shared via their individual URLs.

Flexible, reusable modules were created to build out the site, encouraging visitors to discover the content and share the myths and histories to social media.

The flyout navigation animation and structure was optimized to work smoothly and seamlessly across all browsers, devices, and screen sizes.

Code

Georgetown.

A story in every brick.

Georgetown is not only one of the most historic neighborhoods in Washington, D.C. (including the oldest building in the district), but it has also been home to some of the most iconic politicians (John F. Kennedy lived here while serving in Congress) and movie scenes (The Exorcist steps are still a tourist destination). Looking to modernize their identity while maintaining ties to their long history, the Georgetown Business Improvement District wanted to do a full rebrand and relaunch. The rebrand drew elements from around the neighborhood — cobblestone steps, star anchors, canals, old brick — to create a comprehensive identity that would work in print and digital not only for their primary brand, but also across all of their tourism- and business-focused brands and campaigns.

For the website, our goal was to consolidate a myriad of sites and landing pages (including the tourism site, business improvement district site, and interactive map landing page) into a single digital destination. We created a flexible, modular content structure (much like their new brand design elements) that would allow them to build out and grow the site with new content and information. Along with that, we focused on mobile user flows, using analytics to look at the pages most trafficked on mobile devices and building easy paths into those from the home page and navigation. With so many pages and verticals contained on the new site, we built a flexible “mega menu,” highlighting key areas and verticals while also allowing visitors to dive directly into second and third level content.

One of the major focuses of the new site was on their events — there are hundreds of small business and community events in Georgetown every month in addition to larger annual celebrations and gatherings. We created a template and organizational system for events that not only highlighted the smaller, ongoing events, but also gave the Georgetown team the flexibility to create dynamic landing pages (including interactive sliders and Instagram features) for their larger annual events. A brand new calendar system was implemented that allowed visitors to filter events by type, by month, or even by day.

Another major focus was on businesses — the Georgetown team was managing all business information in the old content management system as well as in the SalesForce CRM, leading to disjointed and outdated information. Along with that, they had a little-used custom Google Map integration landing page that pulled data from the content management system, meaning visitors often were pulling up inaccurate contact or hours information. We removed the businesses entirely from the content management system, using SalesForce as the single point of information. This allowed their team to manage all business-related content in one place as well as connect that information with their existing sales funnels. The backend automatically created a custom tagging and category structure for businesses (based on the SalesForce data) that encouraged visitors to explore and sort to find what they were looking for, as well as provide direct links to contact or find local parking. Instead of one large map, we created a series of interactive maps that more directly exposed the information visitors were looking for — business pages and neighborhoods each had smaller maps showing their location and directions while a larger neighborhood map highlighted the different historic and tourist-centric areas to visit. We incorporated social media integrations and simple newsletter subscription forms throughout the site to ensure visitors would easily connect with the Georgetown team for the most up to date content, information, and events.

Agency: Friendly Design Co. Identity: Hannah Karl. Design: Josh Sender. Additional Development: Ryan McCahan.

The fully responsive site was built using JavaScript, Gulp, and Sass on the WordPress content management system and integrating the Salesforce CRM.

The sitemap consolidated several different existing sites and landing pages into a single digital destination.

A comprehensive set of modules and templates allowed the Georgetown team to not only build out the existing content, but also grow and expand as necessary to best serve their visitors and community.

An interactive neighborhood map encouraged visitors to learn more about Georgetown's history and highlighted tourist and shopping areas.

The new event structure allowed Georgetown to highlight annual events with a custom modular structure incorporating interactive elements (such as videos, image sliders, and Instagram features). Visitors are able to sort and filter by event type, month, and day.

The new business structure connects with SalesForce CRM to serve as the single point of information for the Georgetown team to manage. Visitors are able to explore and filter all of the businesses in the directory thanks to the new automatically generated category and tagging system.

Design + Code + Identity

ZogCulture.

Bring your play to work.

ZogSports is the largest adult recreational sports league in the country, with over 115,000 players, leagues operating in five states, and sports ranging from kickball to cornhole. Named one of the fastest growing companies and best places to work, ZogSports was looking to bring their knowledge of fun and play to the next frontier: the workplace.

ZogCulture, the new company, had their goals already firmly in place: work with companies and workplaces to plan and host both in- and out-of-office events (like field days, holiday parties, or sports tournaments) focused on fun and building interpersonal connections. What they didn’t have was a company identity, so we worked with them to host a series of brand workshops and activities to discover what they wanted ZogCulture to be: tied to the existing ZogSports style without being a direct copy, playful but still professional, and bold without being over the top. From there, we created a series of brand explorations and moodboards to capture the perfect vibe for the new endeavor — a mashup of Nickelodeon game shows and an open office nine to five. We landed on an identity full of bright colors, playfully bold sans serif type, a cast of cartoon coworkers, and exploding confetti shapes.

Once we had the brand in place, we worked with the ZogCulture team to create a site map and content structure that could not only highlight their currently existing activities, but also grow with them as they expanded into more events and offerings. The responsive site was designed and built on a fully modular structure, allowing their team to mix and match pieces and parts like their very own customizable internet LEGO kit. We also worked to bring the “fun” throughout with interactive slider and map elements, colorful hover treatments, and animated confetti. Finally, we made sure that every page connected visitors directly with ZogCulture through a combination of simple and expanded contact forms tied directly into the HubSpot CRM, generating leads and sales funnels for future events in the most frictionless user flow possible.

Agency: Friendly Design Co. Identity: Hannah Karl. Additional Identity: Olivia Huffman. Additional Development: Ouzy Mariko.

All work was designed with Sketch, Photoshop, and Illustrator. InVision was used to prototype interactions. The fully responsive site was built using JavaScript, Velocity.js, Gulp, and Sass on the WordPress content management system and integrating the HubSpot CRM.

Initial style and identity explorations incorporated ultra bright colors, large shape cutouts, and pastel overlays.

The refined identity explorations honed in on the brand elements that resonated with ZogCulture: bold colors, fun shapes, and bright color treatments.

The entire hierarchy was designed from the ground up to be fully modular, allowing the ZogCulture team to organize and reorganize to best highlight their stories, case studies, and activities.

Detail of the interior brand design elements, including the bright colors, cartoon coworkers, exploding confetti shapes, and simple call to action contact form.

Design + Code

Dole + Disney.

A force for healthy eating.

Dole is not only the largest fruit and vegetable producer in the world, but also a longtime partner with Disney (just imagine a hot day in the happiest place on earth without a refreshing Dole Whip in hand). In conjunction with the Disney Check program, a nutrition guideline policy to help families eat healthier, Dole wanted to create a series of branded and interactive experiences centered around the latest Disney, Pixar, and Lucasfilm movie releases. Each experience would consist of fruit, vegetable, and salad branding (with characters showing up on the tags at your local grocery store) alongside a website allowing visitors to further discover and explore characters, recipes, and keys to maintaining a healthy lifestyle.

The first experience was themed around Pixar’s Cars 3, an animated series about talking cars racing around the world (and delighting children everywhere). We created a simple site based on character discovery — visitors would take a quiz, find out which Cars character they were most like, and then be shown a simple recipe to go along with that character (using Dole ingredients, of course). Once completed, the visitors could share their results to social media, sign up to be entered in a prize drawing, or explore the other character recipes. While having a basic structure, the site also had the requirement of allowing for multiple languages — since the quiz and prize drawing was open to the United States and Canada, the site was able to display content and images in both English and French.

Following Cars 3, the next experience was based on Disney’s Beauty And The Beast, a live-action reimagining of the classic Disney animated movie. With a new theme comes a new prize, and this time it was a family vacation to Walt Disney World in Florida. For such a big prize, we thought it was only right to amp up the visitor experience across the site — while the basic structure and user flow remained the same, we introduced loading, landing, and quiz animations, as well as page transitions for smooth motion throughout.

The final experience was based on Lucasfilm’s The Last Jedi, the eighth episode of the iconic Star Wars saga. With this site, we rebuilt the entire content structure from the ground up — while still based primarily on a character discovery quiz, we also introduced modules throughout highlighting movie trailers, an upcoming Dole healthy living app, weekly giveaways, and social media posts. In addition to recipes, stories were added that showed tips and guidance on healthy living and a tagging structure was added throughout to connect those stories to characters and encourage visitors to discover them after completing the quiz. Instead of creating a single user flow from landing to quiz to results, the Last Jedi site created multiple landing pages and entry points (including pages for the healthy living app and the weekly giveaways) that better showed the larger amount of content and provided more opportunities for Dole and Disney cross-branding and promotion.

Agency: nclud. Additional Design: John Salmon. Additional Development: Shorouk Mansour.

All work was designed with Sketch, Photoshop, and Illustrator. InVision was used to prototype interactions. The fully responsive site was built using JavaScript, Gulp, and Sass on the WordPress content management system.

The first project was creating a quiz for the movie Cars 3, allowing visitors to find out what character they are most like and discover healthy recipes associated with the Cars characters.

After the Cars 3 partnership, we used the base character quiz model to develop a Beauty And The Beast themed experience with more detailed recipes and animated interactions.

Initial and final designs for the Last Jedi themed experience — assets and content structure would change as it was approved by Dole and then Disney marketing teams (with separate rules for licensed usage of images and logos).

The quiz for the Last Jedi themed experience was rebuilt to be a single scrolling page instead of multiple pages, allowing for better storytelling and a more compelling user experience.

The Last Jedi themed experience also expanded on the overall content structure — not only were recipes associated with characters, but there were now stories across the site intended to give visitors tips and advice on how to maintain a healthy lifestyle. These stories were tagged to match with characters, presenting them to visitors upon quiz completion.

With weekly giveaways, a new promotions page was created that allowed visitors to sign up, counted down to the next promotion, and highlighted past winners and prizes.

Design + Code

Wolfenstein II: The New Colossus.

Always punch Nazis.

Wolfenstein: known as the grandfather of first-person shooters (1992’s Wolfenstein 3D essentially invented the genre), it was also a pioneer in stealth-based gaming (1981’s Castle Wolfenstein also essentially invented that genre) and is one of the longest-running game series of all time, with releases and re-imaginings every few years since the original. With 2014’s Wolfenstein: The New Order, MachineGames not only reincarnated the series but also created a compelling alternate universe to set the action in — a 1960’s Europe conquered by the Nazis (the perennial bad guys of the series) and full of colorful characters ready to join the fight and fight against. Garnering multiple Game of the Year awards and accolades, The New Order was a smash hit, leading gamers to ask “what’s next?”

With E3 2017 on the horizon (and the much anticipated announcement for the next game in the series), nclud was brought in alongside the Bethesda Softworks marketing team to conceptualize the entire Wolfenstein web experience from the ground up. With the rise of social media and online gaming blogs, we knew we wanted to create an experience that would encourage visitors to explore the world of the game (and pre-order it) instead of just act as a dumping ground for press releases or desktop wallpapers. Starting with high fidelity concepts, we let our imaginations run wild and approached the experience from a variety of angles: what if we let visitors pick a side? What if we built a music player with songs from the alternate universe (including a German version of The Beatles)? What if we created an interactive map that highlighted “tourism” areas that mirrored the levels of the game?

After condensing and stripping back the concepts, we had a path forward: a landing page that immediately told the story and set up the world of the game (as well as served as a repository for news items and trailers) and an immersive world landing page that fully explored the new setting: a 1960’s America that has been taken over and controlled by the Nazis. Alongside these major landing pages, we would also further explore the world with smaller connected landing pages, utilizing the in-world advertisements and television programs to tease more the pop culture of this alternate universe. Calls to action throughout drove visitors to a pre-order page, allowing them to learn more about planned downloadable content and select their platform and game package (including a deluxe edition that included a 12” replica B.J. Blazkowicz action figure in the style of retro G.I. Joe toys).

Throughout the process, we made sure to have a strategy in place for each segment that coordinated with the overall marketing plan. The home page grid was designed to grow and adapt from initial announcement to pre-launch to post-launch, with rules in place for content and information. The trailer landing pages went live weekly in conjunction with the marketing social media and advertising plan for each, to trickle out more information about the world and keep gamers engaged. Special consideration was given to the age, language, and visual requirements: an age gate was in place across the site to ensure only visitors who were 18 (or could do basic math) could access; the site had to be able to accommodate ten languages (initially loaded based on visitor location), including languages using Chinese and Kanji characters; in Germany, the depiction of Nazi imagery was strictly forbidden, meaning we not only used localization to develop a country-specific site, but we also created alternate assets across the board to ensure that those visitors were presented with a Wolfenstein-specific enemy logo instead of a swastika or iron cross.

The Wolfenstein web experience went live at the same time as the game was officially announced at E3 (and global live streaming on all official Bethesda channels) with the slogan “Make America Nazi-Free Again.” The site was inundated with visitors from around the world desperately seeking to learn more about “Amerika” and the new world B.J. and his allies would be facing. An immediate success, it continued to grow according to the content plan and beyond (including new home hero animations and post-launch pages for the Nintendo Switch port of the game). The Wolfenstein II: The New Colossus experience was nominated for Special Kudos by the CSS Design Awards.

Agency: nclud. Strategy: Jadd Adams. Additional Design: John Salmon, Maxim Leyzerovich. Additional Development: Evan Sanderson, Shorouk Mansour, Maxim Leyzerovich.

All work was designed with Sketch, Photoshop, and Illustrator. InVision was used to prototype interactions and transitions. The fully responsive site was built using JavaScript, PixiJS, WebGL, GreenSock, Gulp, and Sass on the Riot.js platform with Contentful as the content management system.

An initial high-fidelity concept allowed visitors to pick their side on landing, with each path presenting different information about the world and game.

Another high-fidelity concept presented visitors with an interactive map highlighting levels of the world as “tourism” locations. A “restricted” area was hidden behind a password (that would be revealed via hints on social media) that highlighted the game protagonists.

A smaller scale concept was a simple landing page that replicated a music player experience, with all of the music made up of the alternate universe in-game bands and songs.

Concept work was also done on modules and sections of landing pages divorced from the bigger picture. This weapons module would allow visitors to interact with a 3D model of the weapon as well as learn more about specific weapon functions and features via videos and screenshots.

After a final direction for the overall experience was decided, we moved back from high-fidelity prototypes to hand-drawn sketches and diagrams to quickly flesh out concepts and ideas. These sketches are early explorations into “World” and “Game” landing pages.

Instead of full wireframes, we built out comprehensive site and content maps to show the overall structure and allow us to iterate more quickly on design and interactive features.

As part of the home landing grid, we created a comprehensive series of grid sizes and rules for content and media to ensure the site could continue to be updated and maintained across all phases of the experience.

The site was built to accommodate upwards of ten localizations and languages, including German-specific assets removing all Nazi symbols and languages made up of Chinese or Kanji characters.

As part of the “Amerika” landing page (in the style of an in-world newspaper), we created content documents and rules laying out exact requirements alongside the design.

Immersive landing pages were created for each of the “in-world” trailers released for the game. These trailers used pop culture set in the game's alternate universe, mirroring real world television shows, to fully flesh out their version of “Amerika.”

These landing pages were linked together to tell a more cohesive story of the world and included a looping carousel interaction to dynamically load the pages when moving between them.