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 Dole websites displayed on a computer and tablet

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.

The Cars quiz design as part of the Dole/Disney partnership
The Cars character page design as part of the Dole/Disney partnership
The Cars recipe page design as part of the Dole/Disney partnership
The Beauty & The Beast landing page design as part of the Dole/Disney partnership
The Beauty & The Beast quiz design as part of the Dole/Disney partnership

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.

The Beauty & The Beast character and recipe page design (featuring Belle) as part of the Dole/Disney partnership
The Beauty & The Beast character and recipe page design (featuring the Beast) as part of the Dole/Disney partnership

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 Star Wars Episode VIII: The Last Jedi homepage design as part of the Dole/Disney partnership
The Star Wars Episode VIII: The Last Jedi homepage design as part of the Dole/Disney partnership

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 Star Wars Episode VIII: The Last Jedi quiz design as part of the Dole/Disney partnership
The Star Wars Episode VIII: The Last Jedi quiz design as part of the Dole/Disney partnership
The Star Wars Episode VIII: The Last Jedi character page design as part of the Dole/Disney partnership

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.

The Star Wars Episode VIII: The Last Jedi stories page design as part of the Dole/Disney partnership
The Star Wars Episode VIII: The Last Jedi story page design as part of the Dole/Disney partnership
The Star Wars Episode VIII: The Last Jedi recipe page design as part of the Dole/Disney partnership
The Star Wars Episode VIII: The Last Jedi sign up page design as part of the Dole/Disney partnership

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.

The Star Wars Episode VIII: The Last Jedi homepage design as part of the Dole/Disney partnership, highlighting the timed promotional modules
About

I fell in love with design and code in 7th grade when I built a webpage in Microsoft Word.

Hosted on GeoCities, it was a middle schooler’s dream of Star Wars: lightsabers, starfields, hyperspace, character profiles, and, of course, the Mos Eisley cantina band song playing in a MIDI loop in the background. Since then, I’ve grown up alongside the web — the introduction of CSS, the explosion of JavaScript, the death of animated GIFs, the birth of Flash, the death of Flash, the rebirth of animated GIFs, Web 2.0, and too many search engines to mention (along the way, I taught myself how to make websites a little bit better than that first one). Now I'm a designer for Taco Bell — your favorite place to grab a delicious taco at 3AM on the way home from an unforgettable night out with friends.

I live in Richmond, Virginia. I have a border collie named Logan (yes, after the X-Man). I’m a sneakerhead and 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.

Do you have an awesome project that needs design, code, or identity? I’m available for very limited freelance work, so reach out.

Additional Clients: African Wildlife Foundation, AOL, Audi Financial Services, Clyde's Restaurant Group, Comcast, Custom Ink, Doubletree by Hilton, EVERFI, Habitat for Humanity, jQuery Foundation, Neustar, RAINN, Renaissance Hotels by Marriott, Sweetgreen, Volkswagen Financial Services.