Griffith Observatory is one of the most iconic landmarks in Los Angeles, featured in such legendary films as Rebel Without A Cause, The Terminator, and La La Land. Opened in 1935, it is the world’s most popular public observatory and has welcomed over 85 million visitors to explore interactive exhibits on space and science, live shows, beautiful grounds, and an amazing view of the Hollywood sign, all for free.

Their website receives tens of thousands of monthly visitors, a combination of people looking to visit the observatory and people looking to learn more about space and history, with huge spikes in traffic around astral events (eclipses, launches, etc.). Unfortunately for those visitors, the website was a huge roadblock to successfully learning more – over a decade old, static and hard to update, hundreds of random and confusing pages with low resolution photos, and, most importantly, not mobile friendly (especially important for visitors looking to learn more while on the go).

Working with the Griffith Observatory Foundation and the City of Los Angeles Department of Recreation and Parks, we started by creating a comprehensive and flexible content strategy. Using visitor analytics, we highlighted specific high level goals and built a mobile-friendly and modular structure on a content management system that allowed their team to not only help visitors quickly find what they needed, but also update, maintain, and grow the site in the future. Every old or lost page on the site was restructured, reorganized, and rebuilt to create clear user journeys throughout, with calls to action, breadcrumbs, and a structured content hierarchy.

Three design directions were explored – the shades of sunset on the grounds, the mystery and magic of space exploration, and the detailed art deco architecture all served as points of inspiration. We wanted to highlight how beautiful and inspiring Griffith Observatory truly is, incorporating brighter and more exciting colors, huge photos focusing not only on the observatory but also on people interacting with the exhibits, and adding moments of delight throughout.

For that delight, we started small. Calls to action incorporate planetary orbit lines with hover effects and constellation charts add decorative elements while avoiding cliché patterns or boring stock photography. Thinking bigger, we built interactive maps that allowed visitors to explore and learn more about not only the grounds and surrounding area but also the interior floors and exhibits.

Then, we thought even bigger. What if we leaned into the mystery and wonder of the observatory and space by incorporating a day and night cycle to the site, changing the theme between a dark and light mode based on the visitor’s location and their local sunrise and sunset times? Using their IP address, we built just that, with the entire site visually changing – including stunning photos of the observatory in daylight and at night alternating between the two modes. A large information module atop the primary pages highlighted not only the day’s operating hours, but also local noon and sunset for the visitor’s location.

The dual color scheme was expanded for the Griffith Observatory Foundation, the non-profit partner of the observatory that works with the city and staff to promote it as an agent of science literacy and education. To differentiate the main observatory pages from foundation pages, an alternate color scheme and added decor elements are used throughout all foundation pages (including calls to action, navigation, and accents) to create a custom experience within the larger observatory site.

A year after launch, the deputy director of Griffith Observatory praised the site: “While the potential of the website was clearly evident at its outset, I can confirm that its reality and use has been transformative for our communication with our visitors. The fundamental design and organizational capabilities, the interface on phones, and the ability of the site to be expanded and refined have all been amazing. The site is very attractive, easy to navigate, and (critical to me) easy to update.”

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.

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.