Crafting with Digital Narrative

At Karsh Hagan it is our job to tell stories that connect people through emotion and shared experience, that drive the universal truths we seek every day. Stories have forever been the crux of video, literature, theater, music, and more. And over the last ten years, the narrative platform has made its way to the web. And we have been closely watching how the technology of digital mediums can enhance a story’s impact through rich interactivity, video, animation, imagery, and text.

Integrated storytelling is what we love to do for our clients, and that’s what got us excited about rethinking our own story on the web. For inspiration, we shared digital narrative examples that opened people’s eyes to the power of interactive storytelling and revolutionized the way we think of traditional storytelling (NYT’s “Snow Fall”, MOMA’s “Century of the Child”). We explored how restructuring our work portfolio away from small projects into integrated case studies would help tell the story of who we are and how we build our clients’ businesses. We then outlined ways that we could utilize tools of the modern web in order connect our story in a beautiful and engaging way.

As mentioned above, the biggest shift we made from a content standpoint was to focus on integrated case studies instead of small projects. The approach was to craft an experience that tells each one of our campaign stories from concept, to creation, to result. This also helped us rethink our agency story (About Us) and our company culture (Our Culture). Karsh Hagan is a dynamic place where the employees are passionate about their jobs and have fun in and outside work hours. We knew that our new website had to illustrate this, so we made sure to showcase our people on production sets, at parties, and in the office doing great work.

From a technical perspective karshhagan.com needed a complete overhaul, and that started with simplifying our platform. One of the core requirements we set was to ensure the site worked seamlessly and look beautiful on mobile devices, tablets, laptops, and widescreen desktop computers. In addition to this mobile objective, we outlined a number of characteristics we knew the site needed:

• Snappy loadtime
• Intuitive, modern page transitions
• Full width imagery/video
• Beautiful typography
• Engaging scrolling experience

To achieve these goals, we built the site with the latest in html5 browser standards in mind. Below is a list of key technical features that ensured our goals were met.

• Ajax content loading for seamless page transitions
• CSS3 transforms for hardware accelerated smooth animations
• Compiled and minified JS for speedy load time
• Preloaded hero images for smooth navigation between case studies and other scrolling pages
• HTML5 looping video showcases the beautiful shots we take all over the world for our clients
• CSS3 keyframe animation used to show the fun and quirky faces of our employees
• Minimal CSS grid removes reliance on heavy frameworks like Bootstrap or Foundation

Just four years ago, Karsh Hagan was searching for its place in the digital world. After hiring one of Denver’s top Interactive Directors, David Stewart, it became clear the agency was investing in the web/mobile landscape. Not long after, I was brought on as an experience developer and we started to grow the department. In these short four years we have built everything from immersive 360-degree device enabled property tours, to fully integrated ecommerce/booking website built on ruby, to a massive IOS/Android app for a fortune 500 company. And this year we will keep pushing the boundaries of 1-to-1 digital marketing with innovative technologies like gesture-based interactions, mobile identification with iBeacons, and social CRM. We’re coming for ya 2014!

Andrew Baker – Senior Experience Developer