Visual Storytelling from Chipotle

Is there a benefit to entertaining while educating?  Chipotle thinks so!  As I was writing this series, Chipotle’s website was updated time and time again with more interactive features.  Chipotle is always finding new ways to use more visual storytelling.  What is visual storytelling?  This post will cover why it is important and how Chipotle has used visual storytelling in its website design.

Visual Storytelling

The more that I learn about visual storytelling the more attractive it becomes for marketing purposes.  I have a love for drawing and graphic design but the issue is much more practical than my taste.  While researching the topic, I found that many famous authors first drew what they had imagined before they put it in writing.  Authors such as J.K Rowling (Harry Potter) and J.R.R Tolkien (Lord of the Rings) drew images of their thoughts first.  As humans, we connect with images more quickly.

Visual storytelling also has better retention rates for website page visits.  Online blog posts and articles with images performed 91% better than those without images.  Visual content is processed 60,000 times faster than reading text.  The right combination of image and text will communicate the best.  It will help readers to scan information to see if it is what they are looking for.

Chipotle’s Web Design

Chipotle’s home page acts as an advertisement for just one item-a large margarita.  Sure, there are two other links on the side bar, but I love how there is one main focus to the home page.  It’s important to focus the viewer’s attention to only a few areas.  The visual focus can be updated by season or sale.

If you look towards the bottom of the homepage you will see a cord.  When you pull it, you find interaction! Chipotle’s recent interaction area summarizes events and topics quickly while keeping the visitor active/entertained.  This interactive area is a summary of the content you would find on the whole website. It’s an interactive segmentation for those visitors who want to click and see rather than read off the website.  Chipotle has four main areas of focused content.

Branded Website Photography

The first area has photography that answers one question, “What does naturally raised look like?”  The viewer then gets to flip through images like home photographs.  They see the pigs out in the open living natural lives. This design choice provides context for the interaction.  These are “home; personal photography; memories of an individual”.  It fits with the home-raised pigs that the farmers raise on their property.  It is the opposite of confinement farming in a warehouse.  For your brand, what would be the best way to communicate images in a context of difference?

Website Audience Education

Every website visitor needs convincing.  Chipotle provides recommended reading-essential books that have helped Chipotle’s brand positioning.  A hover-over animation rotates and displays the books.
The next area focuses on the question, “Where Does Our Food Grow”.  Visual storytelling from Chipotle A map is included with the interactive hover-over option.  As the visitor hovers over an area on the map, they see where particular kinds of Chipotle food are from.  The impressive part is that you can change seasons with a wheel above and the map.  It adjusts to show how the season changes Chipotle’s food supply.

Last but not least, a historical video is at the bottom of the page.  This video shows how Steve Ells is on a mission for better pork.  One of my recent posts is all about how Chipotle uses video on its multiple websites. It is clear to me that website interaction communicates information quickly-while engaging the audience at the same time.

Mediums for Visual Storytelling

We have a lot of options for visual storytelling.  It could be used in mediums like: drawing, painting, digital graphic design, and photography.  Or it could be a mix of these.  Chipotle mostly uses photography and graphic design. Below are more examples that connect web design with visual storytelling and interaction.

Pi’s Epic Journey Website

Life of Pi is a very successful film that won 4 Academy Awards.  It uses a Parallax scrolling design. This scrolling method moves images in the background slower than images in the foreground.  The website reveals new messages with imagery as you scroll down the page.

I really enjoyed the matching of the storyboard art to the actual film shots.  As you scroll, there are two versions of images.  The site either shows storyboard art or before and after shots of a real shooting environment vs. the special effects.

pis-epic-journey pis-epic-journey-2 pis-epic-journey-3

Notice the grey bar on the bottom of this image.  It sticks in the for-front even as the user scrolls through the pages. This is another great option with parallax website design.  You can have website options stand out in the field of vision.

Land Rover-Virtual Driving Experience

The outdoor imagery with the Land Rover is very well done.  The tag line is a great an overall call to action.  It says, “Never Stop Discovering”.  It leads the visitor to ‘Discover Now’ at the center bottom of the home page.  You play the online game through the website to boosts your all-terrain driving skills.  After completing all 6 challenges you can win a chance to visit the Land Rover Experience Center.

When you click “Discover Now” a video plays.  This video takes up the full screen of the browser.  Like a film, it sets the scene with environment shots and the new Land Rover Sport in action.  The Land Rover pulls up and the driver-side door opens.  We then transition into the vehicle as if you are taking a seat.  Next, you explore a 360 degree view of the SUV interior.



Land-Rover-Virtual-Driving-Experience-2 Land-Rover-Virtual-Driving-Experience-3 Land-Rover-Virtual-Driving-Experience-4

Once you start virtually driving, it gives you education on how to drive off-road! It shows how to adjust the suspension settings and how the interface works.  The website is a fascinating mix of visual storytelling, education, and interactive game.

Take Away

In your buying cycle how are you visually educating your audience?  This means show them and sum up what the main points are quickly.  You can also provide extra resources such as books, white papers, and extra website pages for more information.

Every one of the above examples does an excellent job at educating the visitor.  They not only educate the visitor but they also make the education fun with interactive areas, website gaming, parallax design, and dynamic content.  It comes back to educating your audience and making the whole experience enjoyable!